Echarts 配置项设置总结

除非付诸行动  否则空口无凭

关于Echarts 的配置项，再好的总结也不如官方文档详细，明了，而且可以直接在线设置看效果，简直不要太赞。那么我只是知识的搬运工，将自己的一些使用和尝试记录下来。

一个重要的属性 show 

在整个echarts 图标中，如果有些图例 你想控制显示与否那么就设置show 属性值，大部分有这个属性默认show : true,自己需要做调整不显示时可设置为false，title 标题组件，legend 图例组件 ，grid 是否显示，xAxis yAxis,toolbox 工具栏等。代码示例：

           title: {
                show: false,
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                left: 'center'
            },

文本或者图表项的样式 XXXStyle            

图标中想设置一些样式，如果是文本样式基本是 textStyle ，设置每一个小项的样式一般是 itemStyle ,如设置各种label 的样式使用textStyle，设置series 中每一项的样式使用 itemStyle ，代码示例：

        legend: {
                orient: 'vertical',
                icon: 'circle', // 图例icon 的形状
                left: 'left',
                //图例文本样式
                textStyle: {
                    color: 'black',
                    fontSize: 14
                },
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },

             emphasis: {
                    //每一项没选中时样式
                    itemStyle: {
                        shadowBlur: 10,// 图形阴影的模糊大小
                        shadowOffsetX: 0,//阴影水瓶方向上的偏移距离
                        shadowColor: 'rgba(0, 0, 0, 0.5)'//阴影颜色
                    }
                }

不可或缺的type 

XXXAxis.type 坐标轴的类型 

可选：

• 'value' 数值轴，适用于连续数据。

• 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 yAxis.data 设置类目数据。

• 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。

• 'log' 对数轴。适用于对数数据。

  series:是系列列表，每个列表通过type 决定自己的图标类型，常用值：line 折线/面积图（是否设置areaStyle）,bar :柱状图、pie:饼图、radar:雷达图、tree：树图、map:地图、graph:关系图、funner:漏斗图、gauge:仪表盘、custom:自定义样式，实际效果参考文档吧 https://echarts.apache.org/zh/option.html#series

一定会用的formatter

官方提供的最常用的是 tooltip 提示框组件的formatter，支持字符串模板和回调函数，其中图例legend 的formatter 也一样，具体如下：

1, 字符串模板

模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

• 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）

• 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）

• 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）

• 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

示例:

formatter: '{b0}: {c0}<br />{b1}: {c1}'

回调函数示例：

 formatter: function (params) {

      //  可以根据自己的实际需求设置自己的需要的格式，return 就好。

      //  如果有依赖数据可以设置到params 中,params 是 formatter 需要的数据集。

         return params.name

   }

这次先总结这些吧，更加详细的配置可以去参考文档的每一项的属性，echarts 的功能样式和开放性真的好赞。

业精于勤 荒于嬉