Echarts (数据可视化库) 入门

安装：

$ npm install echarts --save

官网地址：https://echarts.baidu.com/index.html

github项目地址：https://github.com/apache/incubator-echarts

 

引入：

// 模块引入
var echarts = require('echarts');
// 或者通过 script 标签引入
// <script src="echarts.min.js"></script>

 

指定渲染DOM元素：

// 被渲染的DOM元素(需要设定宽高,否则报错)
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = { ... };
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

更多 API ：https://echarts.baidu.com/api.html

更多 "option" 配置项：https://echarts.baidu.com/option.html

 

主题设定：

如图，官方提供的几种主题，也可以定制，详看官网。

<script src="echarts.js"></script>
<!-- 在引入 echart 后,引入 vintage 主题 -->
<script src="theme/vintage.js"></script>
<script>
// 第二个参数可以指定前面引入的主题
var chart = echarts.init(document.getElementById('main'), 'vintage');
chart.setOption({
    ...
});
</script>

 

数据生成工具：

可以通过官网提供的工具，快速生成 data 。地址：https://echarts.baidu.com/spreadsheet.html

 

官方模板：

通过官方提供的模板可快速找到合适的数据展示形式。地址：https://echarts.baidu.com/examples/

 

配置项（ .setOption ）简单介绍：

• title：标题组件。
• legend：图例组件。
• gird：仅直角坐标系(如,折线图/柱状图/散点图)有效，常用于设置坐标系的大小/位置/个性化坐标轴。
• xAxis：x 轴的相关参数及数据。
• yAxis：y 轴的相关参数及数据。
• tooltip：全局提示框组件。(鼠标移动到图表上显示的内容)
• toolbox：工具栏组件。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
• dataZoom：数据缩放组件。当数据量太大，展示适当区间的数据，以滚动条/拖动/框选的形式操作。
• series：系列列表。较为重要的一个属性。设置图表内的各维度的相关参数、数据及(图表)类型。
•  ....

更多属性及参数，可查看官网。不同类型的图表具有特定的属性，属性的参数之间有重叠交叉部分，不多过介绍。

 

多说一句：

目前"地图"(type:map)不可用，原因在于地图部分数据不合法无法下载，但 Github 上仍有地图数据。