ECharts的初步使用

时隔一年，又重新步入工作，新的起点，重新开始！

——————————————————————————————————

这次的任务需要使用ECharts对一些数据做一些图形可视化处理，去年这个时候在实习期间接触过HighCharts，不过也几乎忘光了。今天讲一下ECharts的初步配置使用以及一些小坑。

首先我们在官网下载好echarts的开发包

ECharts的初步使用

下载完导入项目后的目录长这个样子

ECharts的初步使用

这里根据我的需求可以选择不同的定制版本，如官方所述：

ECharts的初步使用

要求较为苛刻的还有定制版，这里作为小demo就不赘述了

        <script language="javascript" type="text/javascript" 
            src="js/echarts-4.2.1/dist/echarts.js"></script>
		<script type="text/javascript">
			var option = {
		            title:{
		                text:'ECharts 数据统计'
		            },
		            tooltip:{},
		            legend:{
		                data:['用户来源']
		            },
		            xAxis:{
		                data:["Android","IOS","PC","Ohter"]
		            },
		            yAxis:{

		            },
		            series:[{
		                name:'访问量',
		                type:'line',
		                data:[500,200,360,100]
		            }]
		        };
		        //初始化echarts实例
		        var myChart=echarts.init(document.getElementById('charContent'));
		        //使用制定的配置项和数据显示图表
		        myChart.setOption(option);
		</script>

这里要注意的是记得要在body里定义一个有一定大小的div，以用来显示图表。

接着执行代码后发现这样一个错误：

ECharts的初步使用

这个错误的原因是，当我们用document.getElementById('charContent')去寻找这个charContent对象时，该dom对象还没有创建，这是一个基础常识，只有当页面的dom元素都加载完成之后，我们才能去做一些操作，所以我们这时要用到JQuery，去官网下载完JQuery的js文件并引入，然后将我们上面那些对dom元素的操作都放在$(document).ready(function(){....});方法中,这样就可以在页面加载完这些组件之后再去调用他们了。

最后执行代码，可看到我们的ECharts图

ECharts的初步使用