不断写作，加速成长！这个是我参加「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事情，不然多3D渲染几回容易造成内存泄漏和附加CPU或GPU占有
beforeDestroy() {
window.removeEventListener("resize", () => {
this.myChart.resize();
});
},
