echarts 入门心得

键盘手 (Keyboardist)
• 阅读 6538

公司项目中负责的主要部分是图表展示,初次大规模使用echarts,边写边摸索,以下为一个阶段性的总结,当然ECharts中还有一些好玩的实用的(例如自定义图表)还没涉及到,以后慢慢补充。这篇是总结常见图表:柱状图,折线图,饼图,多Y轴图,气泡图,地图,日历图,折线标注图······

1.引入echarts


ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器。因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 script 标签引入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->## 标题文字 ##
    <script src="echarts.min.js"></script>
</head>
</html>

众所周知,echarts的实现方式为canvas,因此要求初始化时容器宽高必须有,否则会直接导致错误。
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

2.常用配置项


echarts 入门心得

上面标出来的是echarts的配置项里使用最频繁的,其他配置在业务需要时才加入,大多可以现学现用。下面分享使用过程中遇见的需要“费点心思”的配置项———— 提示框

提示框组件可以设置在多种地方:
可以设置在全局,即 tooltip
可以设置在坐标系中,即 grid.tooltip、polar.tooltip、single.tooltip
可以设置在系列中,即 series.tooltip
可以设置在系列的每个数据项中,即 series.data.tooltip

当然tooltip下面还有很多的配置,这里只讲formatter(其余配置都很简单,看看就会了),默认的图例内容格式是formatter: '{b0}: {c0}<br />{b1}: {c1}',在数据结构简单的时候是够用的,但到了地图和二维图表中,这种格式的数据可读性就比较差了,例如:

数据结构这样的:

echarts 入门心得

效果图是这样:

echarts 入门心得

是不是一!头!雾!水!这个时候就需要根据数据结构改变提示框中的内容结构了。这里需要用到formatter的另一种格式,回调函数:
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string,第一个参数 params 是 formatter 需要的数据集。

在我没有细究这个formatter的参数之前,代码是这样的:

formatter: (redata) => {
    let tip = '';
    const key = data.keys[0];
    const bucket = data.buckets.find(x => String(x[key]) === String(redata[0].name));
    if (bucket) {
      bucket.buckets.forEach(x => {
        tip += `<br />${x[data.keys[1]]}<br />` + Object.entries(x.values)
              .filter(([key, value]) => value !== 0)
              .map(([key, value]) => `${key}: ${value}`)
              .join('<br />');
      });
    }
    return `${redata[0].name}${tip}`;
}

效果图是这样的:

echarts 入门心得

现在数据的结构清晰了,但是看起来就是个“毛坯”,柱形图对应的彩色小圆圈不见了,还有一个缺陷是点击图例切换开关时,提示框中的文本不能响应式的改变,永远展示所有的数据。没办法只能继续研究api。 最终,在充分利用formatter的第一个参数(params)后,画风是这样的:

formatter: (params) => {
  return `${params[0].name}<br />`
        + params.map(item =>
          `<span class="eTooltipCircle" style="backgroundcolor:${item.color}"</span>${item.seriesName}: ${item.value}`
        ).join('<br />');
}

echarts 入门心得

可爱的小圆点出现了!而且根据需要选择性展示。
以下,知识点,敲黑板了啊。formatter的第一个参数(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
}

其实这些参数大都是我们在配置option.series时“塞”进去的,在数据结构为一维时,可以直接拿到字段名和值。在二维图表会出现“意想不到”的情况,参数长这样

echarts 入门心得

有value值,没有对应的字段名,但有seriesIndex=0,dataIndex=0,这个时候找到option.series,seriesIndex为0的值找到对应序号的series,中的第dataIndex个数据,就正是我们所需要的

echarts 入门心得

3.事件


在 ECharts 中主要通过 on 方法添加事件处理函数。ECharts 中的事件分为两种,一种是鼠标事件,在鼠标点击某个图形上会触发,还有一种是 调用 dispatchAction 后触发的事件。
示例:

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

myChart.on('legendselectchanged', function (params) {
    console.log(params);
});

params各有不同,以legendselectchanged(切换图例开关,也是我使用的echarts的第一个事件)为例:

{
    type: 'legendselectchanged',
    // 切换的图例名称
    name: string
    // 所有图例的选中状态表
    selected: Object
}

如何区分鼠标点击到了哪里:

myChart.on('click', function (params) {
    if (params.componentType === 'markPoint') {
        // 点击到了 markPoint 上
        if (params.seriesIndex === 5) {
            // 点击到了 index 为 5 的 series 的 markPoint 上。
        }
    }
    else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
            if (params.dataType === 'edge') {
                // 点击到了 graph 的 edge(边)上。
            }
            else {
                // 点击到了 graph 的 node(节点)上。
            }
        }
    }

});

4.自定义主题


在echarts的官网上,工具中选择主题构建工具,根据需要可以修改配色方案

echarts.registerTheme('macarons', {
    "color": [
        ....
    ],....
});

修改完毕之后下载主题的js文件,放到自定义的文件中,在echarts.init时引入即可。

5.总结


基本上跟着用例写,都不会有太大问题,但如果想要做一些改动或者创新,就需要细细研读API了,另外现在社区里大家写得例子很多也都很有意思,可以看看。

echarts中的3d、自定义图表、动画······还没应用,用到之后会继续更新的,待续······

点赞
收藏
评论区
推荐文章
皕杰报表之柱状图
1.当我们想设置柱状图时,可以在皕杰报表内,鼠标右键设置类型选择图表类型,鼠标双击图表,选择柱状图和图标模式普通柱状图。可以设置为水平方向。2.选择数据设定,在‘分类轴’和‘系列’中分别设定其值或者表达式。3.选择显示格式,一般图表包括图表区,标题与图例,X轴,Y轴和警戒线。图表颜色:设置图表数据区以外的背景色和字体颜色。数据区颜色:设置数据区内的背景颜色和
Stella981 Stella981
3年前
Echarts柱状图实现不同颜色渐变色
第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图!(https://oscimg.oschina.net/oscnet/d7e04daefbe994516a605f1d19dc5909504.png)直接上
可莉 可莉
3年前
22个免费流程设计工具.doc
22个免费的图表、流程图工具饼图、柱状图、线图和许多其他的图形是非常重要的用来表示数据和沟通的信息,并可展示两个实体之间的关系。而这些图形如果用在Web上则有助于吸引访客的注意力,并有效地解释相关数据。在这里我们推荐一些很棒的工具,你可以通过点击创建非常直观的设计流程图和图表。Gliffy(https://www.os
Stella981 Stella981
3年前
Highcharts使用HTML表中的数据创建交互式图表教程
Highcharts(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F3328)是一款纯JavaScript编写的图表库,为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、
Wesley13 Wesley13
3年前
Java报表之JFreeChart
一、JFreeChart简介  JFreeChart是JAVA平台上的一个开放的图表绘制类库。它完全使用JAVA语言编写,是为applications,servlets以及JSP等使用所设计。  JFreeChart可生成饼图(piecharts)、柱状图(barcharts)、散点图(scatterplots)
Wesley13 Wesley13
3年前
dhm
<centerdhmecharts</center    echarts3图表封装,前台ajax通过自定义div属性实现传值,后台通过各种数据适配器自动组装达到图表封装,以实现echarts图表展示,也可以自定义适配器。以及分析预测echarts图表拟合曲线算法。项目地址:https:
Stella981 Stella981
3年前
ECharts 实现3D嵌套饼图
   嵌套饼图的实现主要是定义多层数据,实际上只需要写成json格式的数组,多层数据源之间用逗号连接起来,自定义样式之后就可以实现,与非嵌套饼图没有很大的区别。1.下载Echarts插件,官网地址:http://echarts.baidu.com/download.html(https://www.oschina.net/action/GoTo
Stella981 Stella981
3年前
Android一个包含表格的图标库
之前有写过一个图表lib,但是开发的速度,大多很难跟上产品需求变化的脚步,所以修改了下原先的图表库,支持图表下面能整合table显示对应的类目,用曲线替换了折线,支持多曲线的显示,增加了显示的动画,,增加了一些可定制的属性,支持水平柱状图和叠加柱状图,以及多曲线图和饼状图的显示1.效果图!image(https://oscim
Stella981 Stella981
3年前
Jfreechart绘制漂亮的图表
要想绘制出漂亮的图表,就必须了解图表的构成部分,将图表进行分解成N个部分。然后再对每一个部分进行渲染,设置样式:包括背景色、轮廓线条样式和颜色、填充颜色、字体大小、样式、颜色。同时,需要确保在整个项目中,图表的样式风格整体统一,统一,和谐才能打造漂亮、干净、专业的外观.1.使用JfreeChart创建柱状图,折线图,饼图,堆积柱状图,时间序列图
陈杨 陈杨
3个月前
【莓创Chart】基于鸿蒙原生ArkTS语法开发的图表组件--柱状图
大家好,我是陈杨。在上一篇文章中,我简要介绍了折线图的实现逻辑,并解释了整体图表的绘制规则。根据这些规则,我们还可以绘制更多种类的图表组件。在本期中,我将讲解如何实现柱状图,并引入了一个新的功能。鉴于柱状图跟折线图可共用的基础配置很多,我将不再重复介绍基础
陈杨 陈杨
3天前
鸿蒙5横向柱状图series属性解析
大家好,欢迎回来鸿蒙5莓创图表组件的专场,我们这一期来讲解McHorBarChart(横向柱状图)组件中series属性的详细用法。series属性是控制柱状图数据系列的核心配置项,掌握好这些属性可以让你轻松创建各种样式的柱状图效果。1.name属性作用:
键盘手 (Keyboardist)
键盘手 (Keyboardist)
Lv1
们两个爱好一样,但性格大有不同
文章
3
粉丝
0
获赞
0