【echarts】常用知识点（1）

这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战

echarts的常用知识点

echarts是我们常用的一个图表工具，里面也有很多现成的成熟的图表模板组件的实例。但是echarts的文档里面过于的庞大，有些配置的属性不好找，今天我就我自己的开发过程中来进行记录下一些常用的知识点，记录一些经常查找的配置项。

1、渐变色的背景色的设置。主要是横向渐变颜色，还是就是径向的渐变颜色。就是从中心往外进行渐变。渐变主要是使用了LinearGradient和RadialGradient

线性渐变

color: function (params) {
                  var colorList = [
                    {c1: ' #CBA0FF',c2: '#598EFE'},
                    {c1: ' #FCAE17',c2: '#FCDA5B'},
                    {c1: '#30DDD8',c2: '#84F0F0'}, 
                    {c1: '#3288FC',c2: '#36B4FD'
                    },]
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    offset: 0,
                    color: colorList[params.dataIndex].c1
                  }, {
                    offset: 1,
                    color: colorList[params.dataIndex].c2
                  }])
                }
复制代码

径向渐变（中心往外面渐变）

color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, 
              [{offset: 0,color: 'rgb(24,43,99,.3)'},{offset: 0.5,color: 'rgb(24,43,99,.8)'},{offset: 1,color: baColor}]
                  ),
复制代码

2、legend的数量太多了，需要进行分页的操作。给legend里面添加下面两个属性就可以实现了legend的分页功能，避免了legend太多，遮住了图表的内容。

type: 'scroll',  //legend要多，进行分页处理
orient: 'vertical',
复制代码

3、x轴的刻度标签间隔的控制。图表本身如果数据太多了的话，间隔会自动打开的，但是有时候是不能符合我们自己项目要求的，所以就需要自己去配置，就要使用到了interval。我的设置是针对时间的来进行做展示刻度标签的

axisLabel: {
   show: true,
   interval:23,//刻度之间的间距设置
},
复制代码

4、x轴的文字标签的倾斜角度。如果x轴的标签的文字太长了会发生重叠，所以就需要对文字进行倾斜，一遍完整的显示出来

axisLabel: {
   rotate: 20,// 倾斜角度
},
复制代码

5、图表上面显示数字。在柱状图或者折线图上面添加数值展示。在series里面添加label

label: {
   show: true, //开启显示
   position: 'top', //在上方显示
   textStyle: { //数值样式
      color: '#fff',
      fontSize: 16
   }
}
复制代码

6、图表的提示框中的内容格式配置。只要是只有字符串模板和回调函数的两种形式。

字符串模板(下面是官网的内容解析)

实例

formatter: '分类' + ' <br/>{b} : {c} '+'人'+'({d}%)'
复制代码

回调函数的

formatter: function (params) {
            return (
              '<span style="color: #fff;">整改回复率：' + getvalue + "%</span>"
            );
},
复制代码