Echarts柱状图表的使用

持续创作，加速成长！这是我参与「AdminJS日新计划 · 10 月更文挑战」的第29天，点击查看活动详情

前言

接到一个新需求，要求在后台管理添加一个数据统计的页面，里面展示各种数据和图表，说到图表第一时间想到了echarts，看了看设计图是一个柱状表，要求多数值，而且按不同日期展示不同的数据，就决定使用echarts了，但是之前没有在vue项目里使用过echarts，这还是第一次

安装引入echarts

vue使用echarts之前首先要安装，通过npm install echarts -S指令安装，在main.js引入，然后挂载到Vue原型对象上

//不同通过import echarts from 'echarts'引入，会报错
import * as echarts from 'echarts'
Vue.prototype.$echarts=echarts

然后就可以在任何一个组件中使用echarts了

首先准备一个设定了宽高的容器，在组件挂载的时候创建echarts图表

mounted(){
    this.init_echarts()
},
methods: {
    init_echarts(){
        this.myChart=this.$echarts.init(this.$refs.tree)//创建echarts，this.$refs.tree为容器
        this.myChart.setOption({
            //配置echarts参数
        })
    }
}

图表配置参数

信息提示

图表的参数在setOption中配置，先配置柱状图鼠标悬浮交互时的信息提示，对应tooltip参数，trigger设为axis，item只显示该点的信息，axis则显示该列坐标轴对应的数据

tooltip: {
  trigger: 'axis',//鼠标悬浮交互时的信息提示
},

标题

图表的标题使用title，text是主标题，subtext是副标题，subtextStyle则是副标题的样式，x和y分别是标题距离容器的位置

title:{
  show:true,
  text:`今日邀请率:${echarts_.zhuce}%`,
  subtext:`${echarts_.date}`,
  x:5,
  y:5,
  subtextStyle:{
    fontSize:16
  }
},

图表区域

图表区域使用grid配置，表示图表距离容器的位置

grid:{
  left:40,
  top:80,
  right:40,
  bottom:30
},

图例组件

图例组件使用legend配置，用于展现了不同系列的标记，可以通过点击图例控制哪些系列不显示，data为图例的数据数组，如果 data 没有被指定，会取自 series里的系列名称

legend: {
  data: ['邀请人数', '注册人数'],
  top:15,
  right:15,
  width:100,
  textStyle:{
    width:100,
  }
},

x坐标轴和y坐标轴

x坐标轴的坐标轴类型设为category，value表示数值轴，category表示类目轴，time表示时间轴，log表示对数轴，我们只需用类目轴，y轴则是设置坐标轴的最小值最大值，和坐标间隔值

xAxis: [//x坐标轴
  {
    type: 'category',
    //data只在类目轴中有效
    data: echarts_.xaxis,
    axisPointer: {//坐标轴指示器
      type: 'shadow'//指示器类型,line直线,shadow阴影,none无
    }
  }
],
yAxis: [//y坐标轴
  {
    type: 'value',
    min: 0,
    max: echarts_.max,
    interval: echarts_.interval,
  }
],

系列

图标的类型通过series.type设置line折线图，bar柱状图，pie饼图等等，我们设置为bar柱状图，系列名称通过series.name设置，有多少组数据就创建多少组对象

series: [
  {
    name: '邀请人数',
    type: 'bar',
    data: echarts_.xdata1
  },
  {
    name: '注册人数',
    type: 'bar',
    data: echarts_.xdata2
  }
]

缩放组件

但是如果数据过多的话，容器是放不下那么多数据的，只会展示出前面一部分的数据，超出的数据会被隐藏起来，因此还得加一个缩放的组件，缩放组件的类型有两种，一种是slider滑动型缩放组件，通过滑块滚动；一种是inside内置型缩放组件，直接在坐标系内就可以拖动数据了，这里我们设置为slider滑动型缩放组件。

数据窗口范围的百分比通过start和end表示，例如start设置0，end设置了30，那么图表就只显示数据的前30%，剩余的通过滑块拖动展示

dataZoom:[{
  type:'slider',
  show:true,
  bottom:-20,
  start:0,
  end:echarts_.end,
}],

展示

配置完这些基本的配置图就可以展示出图表了，只需要将后台传来的数据一一对应传入echarts配置里就可以了，如果还需要配置更多的内容可以通过echartAPI查阅配置

自适应

当窗口放大缩小时，图表并不会跟着放大缩小，但是echart本身提供了一个resize的函数，我们只需要监听页面的resize变化以后，去执行echarts的resize方法即可重绘canvas，从而实现对应自适应效果

window.addEventListener('resize',()=>{
    this.myChart.resize()
})

别忘了页面组件销毁的时候移除绑定的监听resize事件，否则多渲染几次容易导致内存泄漏和额外CPU或GPU占用

beforeDestroy() {
  window.removeEventListener("resize", () => {
    this.myChart.resize();
  });
},