Echarts数据可视化网址「Echarts快速入门，5分钟搞定」

看Echarts官网配置项手册：
https://echarts.apache.org/zh/option.html#title

1、获取/引用echarts

//npm 获取
npm install echarts --save

//.vue文件准备好dom
<div id="main" :style="{ width: '100%', height: '400px' }"></div>

//项目中引用
import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: '这是title',
  },
  color: ['#ee6666', '#91cc75', '#fac858'],//圆柱的颜色
  legend: {},
  dataset: {
    dimensions: ['product', '总作品', '已批阅', '未批阅'],
    source: this.source,
  },
  xAxis: {
    type: 'category',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
})

2、异步请求的动态数据，绘制到图标中

 //异步请求数据的方法async fetchData() {  const { data } = await index(param)  const { list, total } = data  var newlist = []  for (let index = 0; index < list.length; index++) {    newlist.push({      product: list[index].teacher,      总作品: total,      已批阅: list[index].hasFinish,      未批阅: list[index].notFinish,    })  }  this.source = newlist  this.drawEcharts()   //因为请求数据是异步的，所以等this.sourse有数据了，再去调用绘制圆柱图形的方法},