本文共 1956 字，大约阅读时间需要 6 分钟。

一、提示框 tooltip

1. 提示框触发方式：trigger
   trigger的值可以有：‘item’、‘axis’
   item: 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
   
   axis : 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
   
   注：
2. 提示框的格式：formatter
   分为两种模式：
   第一种是字符串模板，请看官方文档第二种是自定义函数，params 是 formatter 需要的数据集
   formatter: function (params) {
   },
   官方解释格式如下：

{     componentType: 'series',     // 系列类型     seriesType: string,     // 系列在传入的 option.series 中的 index     seriesIndex: number,     // 系列名称     seriesName: string,     // 数据名，类目名     name: string,     // 数据在传入的 data 数组中的 index     dataIndex: number,     // 传入的原始数据项     data: Object,     // 传入的数据值     value: number|Array,     // 数据图形的颜色     color: string,     // 饼图的百分比     percent: number, }

二、工具栏 toolbox

三、图例 legend

如图所示内容即为图例

legend: {          data: ['缺陷总数', '延期缺陷数', '未修复缺陷数'],          left: 10        },

四、color

color 是用来设置图例legend的颜色

legend: {          data: ['缺陷总数', '延期缺陷数', '未修复缺陷数'],          left: 10        },        // color 是用来设置图例legend的颜色    color: ['#F56C6C', '#67C23A', '#E6A23C']

五、配置项 series

series 数组元素与图例legend对应

六、添加标识线 markLine

series: [          {            name: '缺陷总数',            type: 'line',            data: typeof this.data.type_pie === 'object' ? this.data.type_pie.map((i) => { return i.value }) : [],            markLine: {              data: [                {                  yAxis: 1,                  name: '延期缺陷数',                  symbol: 'none',                  lineStyle: {                    color: '#E6A23C'                  }                },                {                  yAxis: 1.5,                  name: '延期缺陷数',                  symbol: 'none',                  lineStyle: {                    color: '#67C23A'                  }                }              ]            }          },          {            name: '延期缺陷数',            type: 'line',            data: ['0', '1', '0', '2', '7', '0']          },          {            name: '未修复缺陷数',            type: 'line',            data: ['0', '0', '0', '0', '2', '0']          }   ]

其他博客

转载地址：http://xqtii.baihongyu.com/