看配置项手册: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有数据了,再去调用绘制圆柱图形的方法
},