升级taro3之后echarts失效
-
config = { usingComponents: { "ec-canvas": "./ec-canvas/ec-canvas" } }; refChat: node => this.Chart = node refresh(data) { this.Chart.init((canvas, width, height) => { const chart = echarts.init(canvas, null, { width: width, height: height }); setChartData(chart, data); return chart; }); } <ec-canvas ref={this.refChart} canvas-id="mychart-area" ec={this.state.ec} />
之前是通过this.Chart.init绘制图表,获取到的this.Chart是原生组件对象,但是升级之后this.Chart是TaroElement。
-
请问解决了吗
-
@jd_496f43dea8f12 解决了。
usingComponents: { "ec-canvas": "./ec-canvas/ec-canvas" }
要在page级内引入,在组件内引入就获取不到。
-
@汪仔 你好,
,这个已经在page级的注册了,this.Chart还是报错。铁子,能详细说下你是怎么解决的吗
-
@jd_518064fcde903 后来我没有使用this.Chart了,用了它的onInit。
import Taro from "@tarojs/taro"; import React, { Component } from "react"; import { View } from "@tarojs/components"; import * as echarts from "../ec-canvas/echarts.js"; let chart = null; function setChartData(chart, data) { let option = { title: { textStyle: { color: "#eee", size: 12, rich: {} } }, grid: { x: 20, y: 20, x2: 20, y2: 20, top: 20, bottom: 20, left: 20, right: 20, containLabel: true }, radar: { indicator: data, name: { textStyle: { color: "#333333", fontSize: 10, backgroundColor: "rgba(255,216,1,0.4)", padding: [0, 5], borderRadius: 50, lineHeight: 20, rich: {} } }, // splitNumber: 8, splitLine: { lineStyle: { color: [ "rgba(255, 216, 1, 1)", "rgba(255, 216, 1, 1)", "rgba(255, 216, 1, 1)", "rgba(255, 216, 1, 1)", "rgba(255, 216, 1, 1)", "rgba(255, 216, 1, 1)" ].reverse() } }, splitArea: { show: false, areaStyle: { color: [ "rgba(255, 216, 1, 0.1)", "rgba(255, 216, 1, 0.2)", "rgba(255, 216, 1, 0.3)", "rgba(255, 216, 1, 0.4)", "rgba(255, 216, 1, 0.6)", "rgba(255, 216, 1, 0.8)" ].reverse() // 图表背景网格的颜色 } }, axisLine: { lineStyle: { color: "#FFD801" } } }, series: [] }; if (data && data.dimensions && data.measures) { option.radar.indicator = data.dimensions.data; option.series = data.measures.map(item => { return { ...item, type: "radar" }; }); } chart.setOption(option); } function initChart(canvas, width, height) { console.log("init"); chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); setChartData(chart, {}); return chart; } export default class RadarChar extends Component { constructor(props) { super(props); } state = { ec: { onInit: initChart }, init_chart: false }; componentDidUpdate(nextProps) { const _this = this; setTimeout(() => { setChartData(chart, nextProps.chartData) }, 2000); } refChart = React.createRef(); render() { return ( <ec-canvas ref={this.refChart} id="mychart-dom-area" canvas-id="mychart-area" ec={this.state.ec} /> ); } }
-
-
@汪仔 在 升级taro3之后echarts失效 中说:
import Taro from "@tarojs/taro";
import React, { Component } from "react";
import { View } from "@tarojs/components";
import * as echarts from "../ec-canvas/echarts.js";let chart = null;
function setChartData(chart, data) {
let option = {
title: {
textStyle: {
color: "#eee",
size: 12,
rich: {}
}
},
grid: {
x: 20,
y: 20,
x2: 20,
y2: 20,
top: 20,
bottom: 20,
left: 20,
right: 20,
containLabel: true
},
radar: {
indicator: data,
name: {
textStyle: {
color: "#333333",
fontSize: 10,
backgroundColor: "rgba(255,216,1,0.4)",
padding: [0, 5],
borderRadius: 50,
lineHeight: 20,
rich: {}
}
},
// splitNumber: 8,
splitLine: {
lineStyle: {
color: [
"rgba(255, 216, 1, 1)",
"rgba(255, 216, 1, 1)",
"rgba(255, 216, 1, 1)",
"rgba(255, 216, 1, 1)",
"rgba(255, 216, 1, 1)",
"rgba(255, 216, 1, 1)"
].reverse()
}
},
splitArea: {
show: false,
areaStyle: {
color: [
"rgba(255, 216, 1, 0.1)",
"rgba(255, 216, 1, 0.2)",
"rgba(255, 216, 1, 0.3)",
"rgba(255, 216, 1, 0.4)",
"rgba(255, 216, 1, 0.6)",
"rgba(255, 216, 1, 0.8)"
].reverse() // 图表背景网格的颜色
}
},
axisLine: {
lineStyle: {
color: "#FFD801"
}
}
},
series: []
};
if (data && data.dimensions && data.measures) {
option.radar.indicator = data.dimensions.data;
option.series = data.measures.map(item => {
return {
...item,
type: "radar"
};
});
}
chart.setOption(option);
}function initChart(canvas, width, height) {
console.log("init");
chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
setChartData(chart, {});
return chart;
}export default class RadarChar extends Component {
constructor(props) {
super(props);
}
state = {
ec: {
onInit: initChart
},
init_chart: false
};componentDidUpdate(nextProps) {
const _this = this;
setTimeout(() => {
setChartData(chart, nextProps.chartData)
}, 2000);
}refChart = React.createRef();
render() {
return (
<ec-canvas
ref={this.refChart}
id="mychart-dom-area"
canvas-id="mychart-area"
ec={this.state.ec}
/>
);
}
}使用你的代码 init未执行
-
@汪仔 谢谢,已经解决了。
-
@jd_518064fcde903 你好 你是怎么解决的·呀
-
@jd_6befc999222b2 能看下代码吗?
-
@HTTISHERE你好 使用你的代码initChart方法没有执行
import Taro from "@tarojs/taro"; import React, { Component } from "react"; import { View } from "@tarojs/components"; import * as echarts from "../ec-canvas/echarts.js"; let chart = null; function setChartData(chart, data) { let option = { title: { textStyle: { color: "#eee", size: 12, rich: {} } }, grid: { x: 20, y: 20, x2: 20, y2: 20, top: 20, bottom: 20, left: 20, right: 20, containLabel: true }, radar: { indicator: data, name: { textStyle: { color: "#333333", fontSize: 10, backgroundColor: "rgba(255,216,1,0.4)", padding: [0, 5], borderRadius: 50, lineHeight: 20, rich: {} } }, // splitNumber: 8, splitLine: { lineStyle: { color: [ "rgba(255, 216, 1, 1)", "rgba(255, 216, 1, 1)", "rgba(255, 216, 1, 1)", "rgba(255, 216, 1, 1)", "rgba(255, 216, 1, 1)", "rgba(255, 216, 1, 1)" ].reverse() } }, splitArea: { show: false, areaStyle: { color: [ "rgba(255, 216, 1, 0.1)", "rgba(255, 216, 1, 0.2)", "rgba(255, 216, 1, 0.3)", "rgba(255, 216, 1, 0.4)", "rgba(255, 216, 1, 0.6)", "rgba(255, 216, 1, 0.8)" ].reverse() // 图表背景网格的颜色 } }, axisLine: { lineStyle: { color: "#FFD801" } } }, series: [] }; if (data && data.dimensions && data.measures) { option.radar.indicator = data.dimensions.data; option.series = data.measures.map(item => { return { ...item, type: "radar" }; }); } console.log('option',option) chart.setOption(option); } function initChart(canvas, width, height) { console.log("init"); chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); setChartData(chart, {}); return chart; } export default class RadarChar extends Component { constructor(props) { super(props); } state = { ec: { onInit: initChart }, init_chart: false }; componentDidUpdate(nextProps) { const _this = this; setTimeout(() => { setChartData(chart, nextProps.chartData) }, 2000); } refChart = React.createRef(); render() { return ( <ec-canvas ref={this.refChart} id="mychart-dom-area" canvas-id="mychart-area" ec={this.state.ec} /> ); } }
-
@jd_518064fcde903 你好 可以贴一下你的代码吗
-
我也遇到了,请问怎么解决