Echarts 配置项设置总结

浅浅的花香味﹌ 2022-11-20 05:50 241阅读 0赞

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

关于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][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 的功能样式和开放性真的好赞。

> 业精于勤 荒于嬉

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

[series.data]: https://echarts.apache.org/zh/option.html#series.data
[dataset.source]: https://echarts.apache.org/zh/option.html#dataset.source
[yAxis.data]: https://echarts.apache.org/zh/option.html#yAxis.data
[https_echarts.apache.org_zh_option.html_series]: https://echarts.apache.org/zh/option.html#series
[trigger]: https://echarts.apache.org/zh/option.html#tooltip.trigger
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20221120/e094f2ddf61a4b19920f3acea9ac33de.png