echart 多柱图只显示部分数据标签_Echart | 能辅助展示你交互设计思想的数据可视化小工具！...

[编者按语] 

因为教《数据可视化》课程的原因，会让本科生做一些交互可视化的作业与作品，让研究生做一些研究报告时用得着的交互式可视化的辅助图形素材，这里介绍的这款傻瓜工具确实挺实用！

本期特推荐 Apache ECharts 小工具给大家。

话不多说，先看看Apache ECharts的官网示例作品：

例如，关系图：

再如，路径图：

还有……

关键是，它还支持交互操作！

怎么使用？

难不难？

回答是：只要你会上网、那么你一定秒会！

具体怎么做？

浏览器地址栏输入：

https://echarts.apache.org/zh/index.html

找到示例菜单点击，

会转到这里：

https://echarts.apache.org/examples/zh/index.html

看看你想做什么同类型的图形，

然后，选定它，随即就可模仿实现。

比如像我选择的下面这幅图形:

你只需要用你的数据填入相关代码块之中(当然有些数据是你需要事先处理好的，比如网络关系数据，按照需要的格式做好即可)！

myChart.showLoading();$.get(ROOT_PATH + '/data/asset/data/les-miserables.gexf', function (xml) {    myChart.hideLoading();    var graph = echarts.dataTool.gexf.parse(xml);    var categories = [];    for (var i = 0; i < 9; i++) {        categories[i] = {            name: '类目' + i        };    }    graph.nodes.forEach(function (node) {        node.itemStyle = null;        node.value = node.symbolSize;        node.symbolSize /= 1.5;        node.label = {            normal: {                show: node.symbolSize > 10            }        };        node.category = node.attributes.modularity_class;    });    option = {        title: {            text: 'Les Miserables',            subtext: 'Circular layout',            top: 'bottom',            left: 'right'        },        tooltip: {},        legend: [{            data: categories.map(function (a) {                return a.name;            })        }],        animationDurationUpdate: 1500,        animationEasingUpdate: 'quinticInOut',        series: [            {                name: 'Les Miserables',                type: 'graph',                layout: 'circular',                circular: {                    rotateLabel: true                },                data: graph.nodes,                links: graph.links,                categories: categories,                roam: true,                label: {                    position: 'right',                    formatter: '{b}'                },                lineStyle: {                    color: 'source',                    curveness: 0.3                }            }        ]    };    myChart.setOption(option);}, 'xml');

就这么简单：

• 点击你想做的类似图形、

• 在左边的代码中填入你的数据、

• 点击运行、

• 审核数据可视化交互式实现的最终效果、

• 导出图形！

快去试试吧！！！

试想一下，你做报告时，可以随意选择数据、放大缩小绘图区域、旋转数据对象，高亮显示拟突出个体，是不是很炫呢？Echart应该能极好地辅助你展示你的设计思想。

说实话，这款工具在科学数据可视化方面的能力着实让我感到了吃惊！

Echart可以实现以下数十种交互可视化作品，如果你不擅长其它诸如R，Python，Matlab等编程语言做交互可视化，也许它就是你的一个备选：

下面是官方介绍：

Apache ECharts (incubating)

Apache Echarts 是一个免费的、功能强大的图表和可视化库，它提供了一种简单的方法，可以将直观、交互式和高度定制的图表添加到您的商业产品中。它是用纯JavaScript编写的，基于zrender，这是一个全新的轻量级画布库。

Apache ECharts (incubating) is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.

你可以通过以下几种方式获取 Apache ECharts (incubating)^{TM}。

• 从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。

  https://echarts.apache.org/zh/download.html

• 在 ECharts 的 GitHub 获取。

  https://github.com/apache/incubator-echarts/releases

• 通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”

  https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

• 通过 jsDelivr 等 CDN 引入

  https://www.jsdelivr.com/package/npm/echarts

官网直达地址：

• https://echarts.apache.org/zh/index.html

• https://echarts.apache.org/en/index.html

如何获取呢？

• Download from Official Website in 中文下载页

• Download from Official Website in English

• npm install echarts --save

• CDN: jsDelivr CDN

相关技术文档的获得方法：

• Tutorial

  • 中文

  • https://echarts.apache.org/zh/tutorial.html

  • English

  • https://echarts.apache.org/en/tutorial.html

• API

  • 中文

  • https://echarts.apache.org/zh/api.html

  • English

  • https://echarts.apache.org/en/api.html

• Option Manual

  • 中文

  • https://echarts.apache.org/zh/option.html

  • English

  • https://echarts.apache.org/en/option.html

其他资源：

推荐一：Awesome ECharts

https://github.com/ecomfe/awesome-echarts

其它插件推荐：

• ECharts GL An extension pack of ECharts, which provides 3D plots, globe visualization, and WebGL acceleration.

  https://github.com/ecomfe/echarts-gl

• Liquidfill 水球图

  https://github.com/ecomfe/echarts-liquidfill

• Wordcloud 字符云

  https://github.com/ecomfe/echarts-wordcloud

• Extension for Baidu Map 百度地图扩展 An extension provides a wrapper of Baidu Map Service SDK.

  https://github.com/apache/incubator-echarts/tree/master/extension/bmap

• vue-echarts ECharts component for Vue.js

  https://github.com/ecomfe/vue-echarts

• echarts-stat Statistics tool for ECharts

  https://github.com/ecomfe/echarts-stat

软件的版权:

ECharts is available under the Apache License V2.

相关文献下载：

• Deqing Li, Honghui Mei, Yi Shen, Shuang Su, Wenli Zhang, Junting Wang, Ming Zu, Wei Chen. 

• ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization.

• Visual Informatics, 2018.

• https://www.sciencedirect.com/science/article/pii/S2468502X18300068

喜欢就点个 在看 吧！