【vue使用echarts】

1. yarn add echarts || npm i echarts   //安装
2. import * as echarts from "echarts"; //引入
3. <div id="myChart" style="width: 600px; height: 400px"></div> //html中创建具有宽高的盒子
4. let myChart = this.echarts.init(document.getElementById("myChart")); //定义一个方法拿到dom节点初始化实例
5. let option = { //设置option参数如
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' }
      ]
    }
  ]
};
6. myChart.setOption(option);// 使用刚指定的配置项和数据显示图表。
7. 在mounted中调用方法即可出现效果
8. 还可以在调用方法后使用 window.onresize = function () {
      myChart.resize()//窗口变化时，重新绘制,实现自适应大小
    }