vue echarts 使用

1.在vue项目终端使用npm安装

npm install echarts --save

2.在需要使用echarts的地方导入

import echarts from "echarts";

3.准备一个div 给上高度宽度 还有id

 <div id="Echart"></div>

高度宽度 我没有写入style 所以这里没有

4.在methods里面定义一个方法 我是定义的drawChart

 drawChart(){
    let myChart = echarts.init(document.getElementById("Echart"));
    
    let option = {
            
    }
     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option);   //option 自己配置echarts的参数 名字可以自己定义
},

5.然后在mounted里面调用这个方法

mounted(){
   this.drawChart();
},

说明： 用id去获取dom元素 使用 echarts.init注册 ， 然后自己需要什么echarts的配置，自己配就好了，我这里没有写出来，然后用注册的dom元素使用setOption就出来图表了。

PPChart - 让图表更简单 可以使用这个网站去找到自己需要的图表示例，然后配置好了复制到drawChart方法里面就好了

Documentation - Apache ECharts echarts配置项的api

6.通过symbol去自定义节点图片的问题

通过symbol去自定义节点图片后，首次渲染不会出现

 setTimeout(() => {
      this.myChart.resize();   //myChart是init出来的图表实例
 }, 200);