ECharts初级配置指南

ECharts初级配置指南

初始化

记住三个步骤：init + option + setOption

然而 init 与 setOption 并没有什么技术含量，就一句代码的事。咱们直接把焦点放在 option 上就好。

如果是在 react 项目中使用 ECharts , 可以使用插件 echarts-for-react

配置项

配置项守则

这是个人在做项目的一路下来的一些总结，不一定适合所有人所有项目，但对于刚刚接触echarts，对一切配置项都一脸懵逼的童鞋来说，可以首先掌握以下几个，能解决入门遇到的70%的配置。

一般图形配置

ECharts 中有一些通用的样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等，这些样式一般都会在系列的 itemStyle 里设置。
部分涉及到线条样式的都会在 lineStyle 里设置。
文字部分的样式一般会在 textStyle 里设置。

图表大部分配置，都会区分两种状态：normal 与 emphasis。

normal 是图形在默认状态下的样式；
emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。

至于里面具体的配置项，就是充分体现CSS 功底的时候了

{
    color: '#000',
    width: 2,
    type: solid,
    shadowBlur: ...,
    shadowColor: ...,
    shadowOffsetX: 0,
    shadowOffsetY: 0,
    opacity: ...,
}

刻度

刻度主要在折线图、柱状图上设置颜色与分段，在仪表盘上应用则设置的种类较多。
常用的主要有一下几项：

{
    axisLine: {...},        // 坐标轴线
    axisTick: {...},        // 坐标轴刻度样式
    axisLabel: {...},      // 坐标轴上的数值标记
    splitLine: {...},        // 坐标分隔线（分段刻度）
}

还是按照上面的“规则”，字体用textStyle, 线条用lineStyle.
设置后的代码片段：

axisLine: {            // 坐标轴线
    lineStyle: {       // 属性lineStyle控制线条样式
        color: [[0.29, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],
        width: 2,
        shadowColor : '#fff', //默认透明
        shadowBlur: 10
    }
},
axisLabel: {            // 坐标轴小标记
    textStyle: {       // 属性lineStyle控制线条样式
        fontWeight: 'bolder',
        color: '#fff',
        shadowColor : '#fff', //默认透明
        shadowBlur: 10
    }
},
axisTick: {            // 坐标轴小标记
    length :12,        // 属性length控制线长
    lineStyle: {       // 属性lineStyle控制线条样式
        color: 'auto',
        shadowColor : '#fff', //默认透明
        shadowBlur: 10
    }
},
splitLine: {           // 分隔线
    length :20,         // 属性length控制线长
    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
        width:3,
        color: '#fff',
        shadowColor : '#fff', //默认透明
        shadowBlur: 10
    }
},

位置

几乎所有的标题、标记描述、图例等都有特性的位置控制。
主要以 top, left, right, bottom 四个属性控制。

默认值是 auto
值可以为数值(100)、百分比(20%)
左右还可以为left, center, right

上下为top, middle, bottom

配置项简介

enter description here

常用的在用途上有写明，空白的都比较少用，使用到的话自己去查找哪些可配置。

配置项	用途	备注
title	标题、副标题
legend	图例
grid	图表绘制区域
xAxis	x轴
yAxis	y轴
polar	极坐标系
radiusAxis
angleAxis
radar	雷达
dataZoom	区域缩放控件	xy轴上数据量较大的时候，可以通过选择放大/缩小区域范围，使数据更直观
visualMap	视图映射组件
tooltip	提示框组件	可以设置在全局、坐标系、系列、系列的每个数据项中
axisPointer	坐标轴指示器：指示坐标轴当前刻度的工具
toolbox	工具栏	内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
brush
geo
parallel
parallelAxis
singleAxis
timeline
graphic	图形元素组件	可以自定义显示的图形，如温度计
calendar	日历坐标系组件
series	系列列表	每个系列通过 type 决定自己的图表类型
color	调色盘颜色列表
backgroundColor	背景色，默认无背景
textStyle	全局的字体样式
animation
animationThreshold
animationDuration
animationEasing
animationDelay
animationDurationUpdate
animationEasingUpdate
animationDelayUpdate
progressive
progressiveThreshold
blendMode
hoverLayerThreshold
useUTC

事件

在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 legendselectchanged 事件（这里需要注意切换图例开关是不会触发legendselected事件的），数据区域缩放时触发的 datazoom 事件等等。
详细的事件使用请参考文档，这里仅介绍三个事件。

click

click 事件在全局监听。

myChart.on('click', function (params) {
    console.log('Hello ECharts!');
});

所有的鼠标事件包含参数 params，这是一个包含点击图形的数据信息的对象

{
    // 当前点击的图形元素所属的组件名称，
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
    seriesType: string,
    // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
    seriesIndex: number,
    // 系列名称。当 componentType 为 'series' 时有意义。
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
    // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
    // 其他大部分图表中只有一种 data，dataType 无意义。
    dataType: string,
    // 传入的数据值
    value: number|Array
    // 数据图形的颜色。当 componentType 为 'series' 时有意义。
    color: string
}

具体获取到的数据根据 params 中的属性进行判断与筛选。更多可参考ECharts 中的事件和行为

legendselectchanged

图例更换 返回对象的 selected 属性就是当前的图例列表的状态。与 legend 的 selected 一致。

datazoom

数据区域缩放后的事件。
鼠标的滚动缩放与拖拽区域组件上的变换截然不同。
但都触发 datazoom 事件, 只是从事件中获取的对象不一样。
可以参考一下代码片段

   handleDataZoomChange = (e) => {
        var that = this;
        var start = 0, end = 0;

        if (e.dataZoomId) {
            start = e.start;
            end = e.end;
        } else if (e.batch && e.batch.length>0) {
            start = e.batch[0].start;
            end = e.batch[0].end;
        }

        // deal with start and end here
    }

知多D

图表的发光效果

发光效果在一些深色系的呈现中可以为视觉增加一定的奇妙效果。例如边框发光，元素发光等。

原图

边框添加发光效果图

发光效果主要实现是采用 阴影 (shadow) 原理。
如图片中就是使用 box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);，为每一个边框增加一些白色的“光芒”。
box-shadow 的具体参数配置可参考文档

而在图表中已经封装好了许多样式效果，如果需要带发光的效果，就直接设置
shadowColor : '#fff', shadowBlur: 10, 效果如图

发光的仪表盘

发光的折线图

发光的饼状图

折线图上添加渐变

在深色系呈现方式下的折线图，在添加了一层渐变的效果之后，立马从屌丝变成富二代。

enter description here

这一层渐变效果是在 series 里面数据项的 areaStyle 区域填充样式 属性中实现的.

areaStyle: { //区域填充样式
    normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //填充的颜色。
            offset: 0, // 0% 处的颜色
            color: 'rgba( 18,133,243, 0.7)'
        }, {
            offset: 0.8, // 80% 处的颜色
            color: 'rgba( 18,133,243, 0.15)'
        }], false),
        shadowColor: 'rgba(0, 0, 0, 0.1)', //阴影颜色。支持的格式同color
        shadowBlur: 10 //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
    }
}

渐变效果具体配置参数请参考文档

enter description here

阻止当鼠标处于在数据上方时的鼠标效果

这个操作有点奇葩，但是在图表实现时候，的确是需要的。
例如百分比的显示，其实使用饼状图两个数据项共同显示的：20%,80%。

百分比

当用户把鼠标放在 20% 的数据上时(红色部分)，鼠标 hover 会使得该部分有不一样的效果，这个表现效果可能狠狠地抓住了用户的关注点。

enter description here

但是如果把鼠标放在灰色的 80% 部分时（该部分无实际数据意义，仅仅由于表现而存在），如果有同样的提醒，似乎多此一举了。所以这时候需要设置 hoverAnimation: false, 关闭了该项的鼠标效果。

enter description here

而如果整个都不需要鼠标hover效果, 则是使用 silent 属性

enter description here

如温度计，温度计的图形已经是一种别致的表现效果，可以不需要鼠标放在上方时还展示有其他效果，就可以直接禁止所有的鼠标事件。

enter description here

legend 对象内的部分属性失效

当数据类型较多的时候，图例展示会相当的占位，所占面积有时甚至会比图表还多。
ECharts 提供一个图例分页展示的属性： demo

legend: {
    type: 'scroll',
    orient: 'vertical',
    right: 10,
    top: 20,
    bottom: 20,
    data: [...]
}

enter description here

但是在使用 React 的项目中引用ECharts ，legend 的 scroll 属性会失效。

作者简介：李尧晖，芦苇科技web前端开发工程师，代表作品：飞花亭小程序、续航基因、YY表情红包、YY叠方块直播竞赛小游戏。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端框架、服务端渲染、SEO技术、交互设计、图像绘制、数据分析等研究。

欢迎和我们一起并肩作战： [email protected]

访问 www.talkmoney.cn 了解更多