echarts 在vue webpack工程化中的深入应用

背景

本次要做的项目是一个以okr为核心功能的后台管理系统，需要通过数据可视化的形式展示进行中任务数量,延期任务数量,循环任务占比，任务完成质量四块内容的任务看板

其中循环任务指：通过指定开始时间以及结束时间生成任务，在第一次任务结束后按照结束时间向后生成任务;并且循环任务不能添加前置任务

通过分析得出图表匹配方案

进行中任务数量: 柱状图单位是个
延期任务数量: 折线图单位是个
循环任务占比:环状图
任务完成质量: 多系列柱状图单位是分

布局

由于这种看板需要一屏展示全部内容，不需要添加滑动条，所以采用flex的列布局，让看板的三块按内容所需高度分配相应百分比，设置最大宽度与最小宽度防止缩放导致页面变形。

echarts

options

title

echarts图标题

text 文本内容
textStyle 文本css样式，用小驼峰形式书写css属性
show 是否显示标题
background:String

tooltips

trigger
axisPointer
- type: (shadow|cross)
- crossStyle
- label
extraCssText 添加额外的css样式，本次添加z-index提高层级避免被遮挡

position:Function(point)
鼠标放在图表上,tooltip展示的坐标
point是一个[x,y]的数组
需要把最终展示的坐标返回回去

position: function (point, params, dom, rect, size) {
              // console.log(point, params, dom, rect, size)
              let realPoint = point
              realPoint[1] = 0
              return realPoint
          },

formatter:function(params) params是每个x轴对应多个系列数据的json数组，其中每个json有以下属性
- seriresName：系列名称
- seriesIndex：系列下标
- color：当前系类的颜色
- value: 一个x轴对应的多个系列的值数组值得注意的是如果通过series.data设置数据每一个json中的value就是当前系列的值，如果通过dataset.source指定则每个json的value都是拥有所有系列数据的数组在内部可以使用html字符串模板定义布局，最后return该html模板
appendBody 将tooltips板块作为body下的一个dom渲染，避免被echarts容器遮盖
confine tooltips只能在图表容器内展示，同用于解决被容器遮盖问题

legends:

type
pageIconColor/pageIconInactiveColor 分页按钮的选中与非选择颜色
orient: 排列方向 (vertical|horizontal)
pageTextStyle:Oject 分页文本样式
marginBottom:Number 外边距
pageButtonPosition 分页按钮位置
right:在echarts中的绝对定位
top：在echarts中的绝对定位
textStyle
selectedMode
data 默认读取每个series的name

selected:Array 和图例的array.data一一对应，selected对应的索引为true则代表选中展示相应系列的数据图表，否则为隐藏不选中相应内容

this.activeIndex = index  //设置外部功能按钮的选中状态
this.\$nextTick(() => {
// setOption(option:object,update:true) 设置为true则原表的数据会被刷掉
let taskTypes = this.qualityList.source\[0].slice(1).map((el) => el)
let legend = {
selected: (() => {
let temp = {}
taskTypes.forEach((el) => {
if (!level) {
temp\[el] = true
} else {
if (el && this.beforeSetSelected(el, type, level)) {
temp\[el] = false
} else {
temp\[el] = true
}
}
})
return temp
})(),
}

       beforeSetSelected(v, type, level) {
            return type ? !v.startsWith(level) : !v.endsWith(level)
       },


      // 单独设置chart实例的legend属性，setOption的第二个参数为update，指定为true则会把原图表卸载掉，以新option生成图表
      chartInstance.setOption({ legend: legend })

      console.log('1重新设置lengend.selected\n2.将不是以S开头的series.name设置为false')
    }, true)

series

name 设置系列名称，最终会同步到legend的data中，也会被各大formatter回调接收
type 图表类型[bar | pie | line ]
barWidth:{value}% 百分比,具体数值,柱状图的宽度

itemStyle: {Array|Object}

normal

color: { String | echarts.graphic.LinerGrident }

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    {
      offset: 0,
      color: '#248ff7',
    },
    {
      offset: 1,
      color: '#6851f1',
    },
  ]),

barBorderRadius:Number

data:Array 一个系列对应的多个x轴的数据
label
- show:Boolean
- position:String
- color:String
- valueAnimation:Boolean
markLine
- data:Array<{type,name}> eg: [{type:'avarge',name:'平均值'}]
- color:String
- itemStyle
  - normal label
    - show:Boolean
    - position:String
    - color:String 饼图特有的series属性
itemStyle
animation:不一定
roseType:String radius
radius
- [30%,70%]
center
avoidLabelOverlap:防止重叠策略

xAxis:

data x轴坐标值的数组
axisLine x轴线的设置
- lineStyle 线条的样式 color: 线条颜色

axisLabel x轴值的设置

textStyle
- fontSize
- fontFamilu

formatter(value,index) value获取的是x轴值的数组

formatter: function (value, index) {
                var strs = value.split('')
                var str = ''
                for (var i = 0, s; (s = strs[i++]);) {
                    str += s
                    if (!(i % wordNum)) str += '\n'
                }
                return str
            },

interval 显示所有x轴标签，就算会重叠也显示
rotate 旋转角度

yAxis:

name y轴的名称，比如这次拿进行中任务图表来说就叫进行中任务数量
axisLine
- symbol 符号：y轴线条顶部展示的图形
- lineStyle
  - type: [solid | dashed]实线或虚线
  - color
axisLabel y轴上值的展示，通常需要做单位拼接
- formatter:以key value的形式，在value中可以以{value}的形式读取到y轴上的值
splitLine y轴每一个刻度从x轴开始到x轴结束的线条
- lineStyle
- show
position 坐标轴的位置[ left | right ]

zoomData:Array

type :slider
show :true
height :6
bottom :4%
backgroundColor :#cccc
brushSelect :false
handleColor :#429AE9
handleIcon
"path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z"
handleSize :28
start :0
end :100
handleStyle
- borderCap:String
- borderWidth:Number
textStyle
- color:String
- borderColor:String
- textBorderColor:String
  在zoomData发生改变的时候重新计算xAxis的lable所占的宽度 ` chartInstance.on('datazoom',function(parans) { //可以从params中读取当前start和end,将end-start作为变量修改一行的字数 // 计算可以当前start到end的距离可以显示几个柱子 let car_col_num = (end-start)/100 * opt.series.length-1 wordNum = parseInt(Math.ceil(gridWidth/cur_col_num))

})

//这里的gridWidth可以通过echarts实例的getWidth方法获取到,getWidth在setOptions之前,init之后就可以使用 `

grid

指定生成的echarts图表部分的相对位置

left
top
right
bottom
containLabel

color

指定每一个图例的颜色的数组 [colorA,colorB,colorC.....]

labelLine

lineStyle
- color
length:Number 第一段线的长度
length2:Number 第二段线的长度

各大选项中的formatter

formatter: '{a} <br/>{b}: {c} ({d}%)'

{a}:系列名称
{b}:数据名称
{c}:数值
{d}:百分比

echarts 中度使用经验总结