不断写作,加速成长!这个是我参加「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查看配备

不断写作,加速成长!这个是我参加AdminJS日新的目标 ·

响应式

当对话框等比例缩放时,数据图表并不能跟随等比例缩放,可是echart自身提供了一个resize的函数公式,我们只需监视界面的resize变化之后,去行动echarts的resize方式就可以重绘canvas,以此来实现相匹配响应式实际效果

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

别忘记网页页面部件消毁时清除关联的监视resize事情,不然多3D渲染几回容易造成内存泄漏和附加CPU或GPU占有

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

不断写作,加速成长!这个是我参加AdminJS日新的目标 ·

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

原文地址:不断写作,加速成长!这个是我参加AdminJS日新的目标 ·