ECharts在vue中的使用

一、echarts使用步骤：
1、安装
npm install echarts --save
2、引入
import echarts from “echarts”;
3、在html页面上定义

 <div id="pie" style="width: 800px;height:800px;"></div>

4、初始化

 mounted(){
 this.myCharts=echarts.init(document.getElementById('pie'));
  var option = {
    title : {
      text: '同名数量统计',
      subtext: '纯属虚构',
      x:'center'
    },
    tooltip : {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // legend: {
    //   type: 'scroll',
    //   orient: 'vertical',
    //   right: 10,
    //   top: 20,
    //   bottom: 20,
    //   data: data.legendData,
    //
    //   selected: data.selected
    // },
    series : [
      {
        name: '姓名',
        type: 'pie',
        radius : '55%',
        center: ['40%', '50%'],
        color:this.colorInit,
        data: data.seriesData,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
 
 }

5、定义options，和data
6、 this.myCharts.setOption(option);
二、问题
2.1 Error in v-on handler: “TypeError: Cannot read property ‘getAttribute’ of null”
错误原因：Echarts的图形容器还未生成就对其进行了初始化所造成的
解决方法：

 var echartsname=document.getElementById("guimo-pollutant");
 var myChart = echarts.init(echartsname);

2.2 在用地图的时候，容器大小不能写百分比，需写具体的px值