四时宝库

程序员的知识宝库

来,认识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有数据了,再去调用绘制圆柱图形的方法
},

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接