使用ECharts制作交互图形 动态可视化交互

ECharts引入

新建一个html文件，准备好网页的基本内容，然后像引入JQuery呢样引入ECharts，可以下载到本地引入，也可使用CDN，不用下载直接引入。鳄鱼君这里使用CDN： https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js，直接引入，目前最新版本为4.8.0.直接引用

<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>

ECharts使用

首先需要创建一个白色的画板，在HTML中写一个div并设置id，具体代码如下：

<div id="main" style="width: 600px;height: 400px;@media(max-width:600px){width:48%}"></div>

<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
<script type="text/javascript">
	var myChart=echarts.init(document.getElementById('main')); // 获取画板并进行初始化
	var options={
		title:{
			text:'ECharts4.8.0入门实列' //标题
		},
		tooltip:{},  //提示框
		legend:{
			data:['销量']  //图列
		},
		xAxis:{     //x轴
			data:['苹果','香蕉','橘子','雪梨','凤梨','葡萄']
		},
		yAxis:{},   //y轴
		series:[{   //数据
			name:'销量',
			type:'bar',
			data:[2,34,32,14,23,15]
		}]
	};
	myChart.setOption(options);
</script>

更换主题

var myChart = echarts.init(document.getElementById('main','vintage'))  // vintage为主题名字

配置项目手册

ECharts最大的好处便是语法高度统一，任何ECharts图形都遵循以上步骤进行绘制，唯一的不同只是option的设置。配置项目手册：https://echarts.apache.org/zh/option.html#title，非常的详细，每个示例页面左边为使用到的全部代码，主要包括用到的数据和option的具体设置，右边对应生成的图形效果，并且支持在线修改代码和调试图形。

1. · title：图形的标题。
2. · legend：图形的图例。
3. · grid：图形的绘图范围。
4. · xAxis：图形的x轴，支持同时使用多个x轴，可以是数值、类别值、时间等。
5. · yAxis：图形的y轴，支持同时使用多个y轴，可以是数值、类别值、时间等。
6. · polar：使用极坐标时的配置项。
7. · radar：绘制雷达图时的配置项。
8. · dataZoom：展示时序数据时的时间范围选择工具。
9. · visualMap：使用视觉映射时的配置项，就像ggplot2将数据映射到颜色等视觉元素上一样。
10. · tooltip：当鼠标悬浮在图形上时显示的信息提示框。
11. · toolbox:ECharts提供的图形编辑工具箱。
12. · geo：绘制地图时的配置项，定义如何显示地图的范围和样式等。
13. · parallel：绘制平行坐标时的配置项。
14. · timeline：定时在多个option之间切换，从而实现动态更新数据的效果。
15. · color：绘图颜色集合。
16. · backgroundColor：绘图区的背景颜色。
17. · textStyle：绘图的文本样式。
18. · series：图形所用的数据系列，其中的type配置项可以指定图形种类，可以是line、bar、pie、scatter、effectScatter、radar、treemap、boxplot、candlestick、heatmap、map、parallel、lines、graph、sankey、funnel、gauge、pictorialBar和themeRiver。