echarts图表的实现

第一步：安装echarts

yarn add echarts

第二步：引入echarts

import * as echarts from 'echarts';

第三步：准备容器

<div id="box" ref="box"></div>

第四步：绘制图表，注意：代码必须在写在mounted里面，才能获取到页面容器

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

第五步：重置图表大小

//重置大小
window.onresize=function(){
  myChart.resize();
}