ECharts的学习与使用

最新推荐文章于 2025-06-10 12:16:04 发布

小小平不平凡

最新推荐文章于 2025-06-10 12:16:04 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Echarts 文章标签：前端

本文链接：https://blog.csdn.net/sinat_34241861/article/details/105229390

Echarts 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了ECharts图表配置的各项参数，包括提示框tooltip的触发方式和格式设置、工具栏toolbox的功能、图例legend的使用、颜色color的设定、系列配置series的说明，以及如何添加标识线markLine。适合初学者快速掌握ECharts的基本配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、提示框 tooltip

提示框触发方式：trigger
trigger的值可以有：‘item’、‘axis’
item: 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用

axis : 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用

注：Echarts 里面的类目轴和非类目轴是什么意思？
提示框的格式：formatter
分为两种模式：
第一种是字符串模板，请看官方文档http://echarts.baidu.com/option.html#tooltip.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

https://www.cnblogs.com/wgl1995/p/6247403.html

三、图例 legend

如图所示内容即为图例
在这里插入图片描述

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

https://www.cnblogs.com/ytwanzi/p/6641200.html

四、color

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

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

五、配置项 series

series 数组元素与图例legend对应
https://www.cnblogs.com/vali/p/7978165.html

六、添加标识线 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']
          }
   ]