你不知道的Echarts的奇技淫巧
# 你不知道的Echarts的奇技淫巧：深度解锁可视化神器的隐藏功能
## 引言
在大数据时代，数据可视化已经成为信息呈现的重要手段，而Echarts作为国内最流行的前端数据可视化库，凭借其丰富的图表类型、高度的定制性和出色的性能表现，深受开发者喜爱。然而，Echarts的魅力远不止于此，本文将带你深入挖掘那些鲜为人知的Echarts奇技淫巧，助你在项目中打造更炫酷、更具交互性的数据可视化效果。
### **一、动态加载与数据流处理**
**标题1：实时数据流的无缝更新**
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts 实时数据流展示</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:400px;"></div>
<script>
var chart = echarts.init(document.getElementById('main'));
// 初始化配置项
chart.setOption({
xAxis: {
type: 'category',
data: []
},
yAxis: {
},
series: [{
data: [],
type: 'line'
}]
});
// 模拟实时数据流
function updateData() {
// 假设这是从服务器获取的新数据
var newData = Math.random() * 100;
// 动态添加到x轴和series数据
chart option xAxis.data].push((new Date()).toLocaleTimeString());
chart.getOption().series[0].data.push(newData);
// 调用setOption方法实现数据刷新
chart.setOption(chart.getOption());
// 配置定时器模拟实时数据流
setTimeout(updateData, 1000);
}
updateData();
</script>
</body>
</html>
```
通过上述代码，我们可以实现Echarts图表对实时数据流的无缝更新，让你的数据始终保持最新状态。
### **二、高级图形与特效**
**标题2：复杂图形的绘制与动画特效**
```javascript
// 创建饼图实例
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'center',
formatter: '{b}\n{d}%'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale', // 使用缩放动画
animationEasing: 'elasticOut' // 使用弹性动画效果
}]
});
```
通过Echarts的高级配置选项，我们不仅能轻松创建复杂的饼图，并且可以应用各种动画特效，提升数据可视化的观赏性与互动体验。
### **三、自定义系列与扩展**
**标题3：利用ECharts扩展API实现自定义图表**
Echarts支持自定义系列，这意味着你可以根据需求设计并实现独一无二的图表类型：
```javascript
// 注册自定义图表类型
echarts.registerSeriesType('customChart', CustomSeriesModel.extend({
getInitialData: function (option, ecModel) {...},
defaultOption: {...}, // 默认配置项
renderItem: function (params, api) {...} // 渲染单个图形元素
}));
// 使用自定义图表
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'customChart', // 使用自定义图表类型
// 其他配置项...
}]
});
```
通过注册自定义系列，我们可以进一步拓展Echarts的功能边界，满足个性化、创新化的需求。
### **四、深度交互与联动**
**标题4：多图表间的联动交互**
```javascript
var charts = [];
for (var i = 0; i < 2; i++) {
charts[i] = echarts.init(document.getElementById('chart' + i));
charts[i].setOption({...}); // 分别初始化两个图表
}
// 设置图表间联动
echarts.connect(charts); // 连接所有图表
// 添加事件监听，实现点击事件的联动响应
charts[0].on('click', function (params) {
charts.forEach(function (chart, index) {
if (index !== 0) {
chart.dispatchAction({
type: 'highlight',
seriesIndex: params.seriesIndex,
dataIndex: params.dataIndex
});
}
});
});
```
Echarts强大的联动功能使不同图表之间能形成紧密联系，用户在操作一个图表时，其他图表可即时做出相应的反馈，极大提升了用户体验。
总结，Echarts不仅提供了一系列丰富且实用的图表类型，还隐藏着许多不为人知的技巧和功能，通过掌握这些奇技淫巧，你可以在数据可视化领域更加游刃有余，创作出令人惊艳的作品。希望这篇文章能够帮助你发掘Echarts更多的可能性，赋予你的数据更多生命与活力。
使用 Apache ECharts 呈现社区活动的渲染图
在ApacheCon Asia 2021大会的“数据可视化论坛”上，Apache APISIX Committer 孙毅发表了题为“使用 Echarts 呈现社区活跃度”的演讲。本文是这次演讲的内容总结。
大家好，我是孙毅，是 Apache APISIX 的 Committer。今天由我来给大家分享使用Apache ECharts来呈现社区活跃度这个主题。
项目介绍
这个项目主要是由我和后端的吴舒旸同学两个人完成的。上面是仓库地址[1]和我们的 ID，大家有 bug 或者 feature 都可以去提交。
项目初衷
我们为什么要做一个这样的小工具呢？我们在日常开发中会经常遇到选型的问题，怎么来判断开源社区是否活跃稳定，是否能可持续发展？如果单从 Star 数或者是 Fork 数这些维度来判断，对我们来说是不够的。
我们的思考是：社区的活跃度也就是社区开发者的活跃度，我们可以收集一些开发者的数据，并做成可视化的图表来判断这个社区是否是健康的、活跃的。于是我们就准备做一个这样的工具[2]来供大家使用。
为何选择 ECharts 来渲染图表
在我们决定要做这个事之后，我们开始做了一些技术选型，最后我们选择了 ECharts 来渲染我们的图表，原因有如下几点：
它是 Apache 软件协议，是一个比较友好流行的开源协议。ECharts 的上手成本比较低，上手比较快。我们调研的时候发现在它的官网里面有大量图表示例，可以满足我们当前的需求。它的文档示例非常丰富。这会让我们后面避开很多坑，在需要支持的时候我们就可以去翻文档来解决我们的问题。它同时也有非常丰富的 API。我们目前还没有遇到比较高阶的特性需求，但后期如果我们会有一些比较高阶的玩儿法，那么 ECharts 的丰富 API 相信可以去完成我们的这些需求。项目功能
下面介绍一下这款图表工具的一些功能。
我们这个工具目前有两个图表，第一个图表就是贡献者增长曲线，是由每个贡献者的首次提交的日期整理而成。图表上可以看到横坐标代表时间，纵坐标代表贡献者数量，从左到右代表这个项目从立项到现在的贡献者总人数的变化过程。
第二个功能是我们的贡献者增长曲线具有合并查看模式。
以 apisix 为例，我们会把和 apisix 所有相关的仓库数据聚合在一起来展示。我们可以看到左侧是我们的普通模式，就是仓库的贡献者的变化；右面的是我们的合并模式，会把这些仓库的所有贡献者的数据聚合一起，有更全面的统计。目前我们支持合并模式的仓库有 apisix、skywalking、openwhisk，还有 dubbo。如果大家也想把自己的仓库做成这种合并模式，可以提 feature，或者修改 yaml 文件，就可以支持查看模式了。
另外一个功能是贡献者曲线的多仓库对比模式。多仓库对比模式可以让某一领域的使用者分析某一领域的软件近期的变化。我们可以从这个图表中看到 apisix 用了两年的时间就快达到了 kong 6 年的贡献者人数的总和。
另外一个是分享功能。当使用者觉得这些图表对他们来说有用的时候，他们想的第一件事是去分享给其他人。我们也对分享这一块比较重视，做了如下几个分享：
网页分享。你可以把分享的链接复制给你的朋友，直接访问链接就会看到你当前的图表。图片分享。这个和网页有点类似，只不过它会直接给你返回一张图片。社交媒体分享。我们先做了 Twitter，点击 Twitter 之后就会跳转到 Twitter 平台，然后自动编辑你的 Post。值得提的一点是我们同样也支持 Markdown 分享。你可以直接把这段代码复制到你的 Markdown 文件中，就可以把这个图表展示在你的 Markdown 里边。需要注意的是我们的图片是由后端动态生成的，也就是说一旦你的贡献者数量，或者贡献者活跃度有更改的话，那么这个图片是会动态刷新的。你只需要首次给它提交到你的仓库里面，后期的数据更新都是由这个服务自己动态完成的。我们做的另外一个图表是月贡献者增长曲线。这个意思是说每一个仓库在每个月具体有多少个活跃的贡献者。这个图表可以让我们分析这个仓库在短期内的活跃度。
我们可以看到 apisix 的活跃度现在是稳定在 kong 的两倍左右。
项目反响
我们把这个工具做完，并且觉得它是稳定可用的时候，我们秉着开源精神将这个工具提交给了一些开源项目。目前有如下这些仓库在用，并且得到比较好的一些反馈。
我们从项目想法到开发计划，再到落地成品到用户使用，这个过程像是一种快乐的传递。尤其是当看到用户在使用我们的小工具，这个工具真真切切帮助了使用者从更多纬度去分析社区的活跃度，这一点是令我们非常开心的。
项目未来规划
目前这个工具已经是稳定可用了，但后期一定会有其他的一些需求，需要去开发。我们后期会更多倾听社区的声音，将社区里面合理的需求转化为产品。我相信有社区力量的注入，我们的项目将会更加完善、更加好用、好看。
项目总结
在整个项目的开发过程中，我认识到一个人的能力终归是有限的，而社区的能力是无限的，因为社区会有源源不断的有能力的人来注入。
像我们在开发合并模式的时候，这个需求是由 skyWalking 社区提出的。我们在向 skywalking 提交我们的贡献者视图的时候，社区里面有人就提出可不可以增加合并模式来完成多个仓库的聚合展示。经过我们的讨论分析后，我们觉得这个功能不仅仅对 skywalking 是有用的，其他小伙伴也会有类似的需求，我们就把这个事情落地了。如果是单靠我和后端同学去想到底需要哪些功能，可能就是比较吃力。从这一方面上来说，社区的能力以及社区的需求是无限的。
我们的图表从表观上看去只是一条冷冰冰的数据，但是我们每条可视化数据背后都是一位位优秀的工程师用汗水浇铸而成的。这就让我们的工作变得更加有意义，因为每一个点都是工程师辛辛苦苦参与到这个开源项目当中的成果，这让我们的事情变得更有意义。
如上就是我的分享内容，谢谢大家。
[1] 仓库地址：https://github.com/api7/contributor-graph
[2] 工具链接：https://www.apiseven.com/en/contributor-graph
相关问答
如何制作一个可视化大屏模板?加上HT自身研发的开发插件API也同样地易于上手,可以实现解决许多行业上的数据可视化系统的应用。二、响应式(自适应)布局布局功能一直是数据可视化大屏...
大数据应用中，怎么打破数据孤岛?首先,我们拿销售部门举例:财务根据自己系统中的数据做了年度销售额汇总,销售部门也做了,但年终发现数据根本对不上。上面这种场景在80%的企业中都出现过,由...
移动web端要做数据可视化，用哪个js库比较好?例如,对于DataTables,可以使用响应式扩展,但这超出了本教程的范围。提取表数据为了检索所需的数据,我们将利用DataTablesAPI。负责此行为的函数如下:...提...
除了tableau/FineBI，还有什么比较好的可视化软件推荐么?作为企业数据分析需求的高频需求,主要应用于各类类Excel中国式复杂报表、报告的查询、打印、导出等场景,是BI软件必备的功能。WynEnterprise通过提供...Wyn...
常用的数据可视化软件有哪些?一.数据可视化库类Echarts一个纯java的数据可视化库,百度的产品,常应用于软件产品开发或者系统的图表模块,图表种类多,动态可视化效果,开源免费...一.数据可...
强大利用JS应用的Javascript网格插件有哪些呢?工具类方便操作对象,数组等的工具库underscore.jslo-dash与underscore.js的api基本一致。与underscore比其优势是,效率高;可自定义构建Sugar在原...
程序员摸爬滚打了五年，难道必须要读源码吗?一定要读的,源码才是你最值得学习的地方,但是也要看情况而定,并不是所有的源码你都要读。该怎么挑选这件事我就帮不了你了,不过,阅读源码是一个良好的习惯...
Vue被淘汰了吗?呃,这个问题问的,Vue正在火热的时候,突然问:Vue被淘汰了么?问的真的很懵逼啊!在流行前后端分离的今天,Vue顺应时代,尤其是在国内以门槛低,开发简单...我感觉...
互联网的发展会如何，前端这个行业以后会是怎样的?经过近几年的发展,现代Web前端已经发展到跨端、跨界面的革新阶段。目前主流以基于MVVM、VirtualDOM、移动端MNV*思路和前后端同构技术进行开发的项目居多,实现...
web前端学习教程流程有什么?web前端作为下一代网站开发技术,无论你是一个Web开发人员或者想探索新的平台的游戏开发者,都值得去研究。借助尖端功能,技术和API,web前端允许你创建响应性、...