继续创作，加速生长！这是我参与「日新方案 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查阅装备

Echarts柱状图表的运用

自适应

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

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

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

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

Echarts柱状图表的运用