升级taro3之后echarts失效



  • @jd_496f43dea8f12 解决了。

    usingComponents: {
          "ec-canvas": "./ec-canvas/ec-canvas"
        }
    

    要在page级内引入,在组件内引入就获取不到。



  • @汪仔 你好,6d934826-336b-4a7e-8685-589301754c08-image.png ,这个已经在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失效 中说:

    refChart = React.createRef();

    你好 我按照你那样写 init未执行



  • @汪仔 在 升级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 你好 可以贴一下你的代码吗


登录后回复