Echarts (数据可视化库) 入门

时间:2019-02-11
本文章向大家介绍Echarts (数据可视化库) 入门,主要包括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 上仍有地图数据。

 

上一页 下一页

原文地址:http://www.manongjc.com/article/51648.html