taro引入echart 怎么处理详细过程（内有源码）

taro 环境引入echart 采坑之旅

天才第一步 引入 组件 ec-canvas

个人建议：看完再下载 一定要看 里面省的来来回回 找问题 一次性解决是最快的 gayhub上下载组件

天才第二步 定制图表

天才第二步，定制自己需要的图表 但这个组件因为一些特别限制导致了无法直接使用 //真不知道 官方组件自己咋跑起来 的 单个js文件不能超过500k 压缩过的echart 依然超过 所以（备注千万千万别选亚索 压缩之后根本不能用 鬼知道官方玩啥锤子）

天才第三部 压缩echart.js

压缩网址 用着还行 顺手推荐下！ 文件目录

做到这里外部引入就基本结束了

天才第四步 写代码

import Taro, {
  Component
} from '@tarojs/taro';
import {
  View,
  Text,
  Image
} from '@tarojs/components';
import './radarChart.less';
import * as echarts from "../../components/ec-canvas/echarts";
let chart = null;

function setChartData(data, indicator) {

  var option = {
    backgroundColor: "#ffffff",
    color: ["#37A2DA", "#FF9F7F"],
    xAxis: {
      show: false
    },
    yAxis: {
      show: false
    },

    radar: {
      center: ['50%', '50%'],
      radius: 80,
      name: {
        textStyle: {
          color: '#59a17a',
          fontSize: 20,
        }
      },
      // shape: 'circle',
      indicator: indicator
    },
    series: [{
      name: '测试',
      type: 'radar',
      label: {
        show: true,
        color: 'red',
      },
      data: data
    }]
  };
  chart.setOption(option);
}

class RadarChart extends Component {
  config = {
    navigationBarTitleText: 'taro echarts',
    usingComponents: {
      "ec-canvas": "../ec-canvas/ec-canvas"
    }
  };

  state = {
    ec: {
      lazyLoad: true
    }
  };
  refresh(data, indicator, screenInfo) {

    this.Chart.init((canvas, width, height) => {
      let defaultHight = { //如果想填入默认高度
        width: screenInfo.width,
        height: screenInfo.height
      }
      chart = echarts.init(canvas, null, defaultHight);
      setChartData(data, indicator);
      return chart;
    });
  }
  refChart = node => (this.Chart = node);

  render() {
    return ( < View className = "container" >
      <ec-canvas ref = {this.refChart } canvas-id = "mychart-area" ec = { this.state.ec} force-use-old-canvas = "true" />
      </View>
    );
  }
  constructor(props) {
    super(props)
    this.state = {
      ec: {
        lazyLoad: true
      }
    }
  }

  componentDidMount() {
  //至于数据怎么来的 还需要我说  麻烦出门右转 
    //             echart数据  雷达图系列配置
    _this.refresh(dataValA, indicator,
      //图表宽高配置             
      {
        width: res.screenWidth - 50,
        height: (res.screenWidth - 50) / 1.3
      });

  }

  componentWillMount() {}

}
export default RadarChart;