ECharts

安装

npm install echarts @4.6.0 --save    目前推荐使用4.6.0版本，因为其他版本看你数据不太稳定，默认下载的是最新版本；

在项目中引入echarts

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

2 装它的盒子必须有宽高

<div id="main" ref="chart"></div>

3 需要写在能够获取dom节点的钩子函数里 推荐mounted

 mounted() {
// 这句代码的意思为，给这个图表中添加渲染的内容，内容写在setOption中
    echarts.init(this.$refs.chart).setOption(this.data);
  }

4 option的数据，写在vue的data数据中，也可以是请求获取到的数据