数据可视化之echarts

echarts

echarts是一个常用的数据可视化工具,我们可以借助它很方便的设计出一些图表,让数据分析变得更加容易

什么是echarts

当我们要设计一些图表的时候,我们如果想做的酷炫一些,就需要编写大量的javascript代码,而现在我们不用重头编写,echarts帮我们编写了大部分代码,并把这写代码封装起来,我们只需要熟悉API即可。

怎样使用echarts

使用echarts也非常简单,只需要引入其js文件:

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

准备一个dom容器：

 <div style="border:2px solid #666;width:49%;height:450px;float:left" id="chartmain"></div>

创建一个折线图：

<script type="text/javascript">
window.onload = function (){
		//指定图表的配置项和数据
			option = {
			    xAxis: {
			        type: 'category',
			        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [{
			        data: [820, 932, 901, 934, 1290, 1330, 1320],
			        type: 'line'
			    }]
			};

			//获取dom容器
			var myChart = echarts.init(document.getElementById('chartmain'));
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
}
</script>

打开echarts的官网,我们首先打开一个例子来学习一下。

以折线图为例

左边的代码控制着右边的图像。我们观察左边的代码，左边的option下有三个选项：xAxis,yAxis和series,xAxis主要配置x轴的相关信息,yAxis主要配置y轴的相关信息,series决定其他的一些配置信息,type表示这个图是什么类型的,是折线图,还是柱状图,data代表图中的数据。