前言

接到一个新需求，要求在后台管理添加一个数据统计的页面，里面展示各种数据和图表，说到图表第一时间想到了 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();  });},