时隔一年,又重新步入工作,新的起点,重新开始!
——————————————————————————————————
这次的任务需要使用ECharts对一些数据做一些图形可视化处理,去年这个时候在实习期间接触过HighCharts,不过也几乎忘光了。今天讲一下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,以用来显示图表。
接着执行代码后发现这样一个错误:
这个错误的原因是,当我们用document.getElementById('charContent')去寻找这个charContent对象时,该dom对象还没有创建,这是一个基础常识,只有当页面的dom元素都加载完成之后,我们才能去做一些操作,所以我们这时要用到JQuery,去官网下载完JQuery的js文件并引入,然后将我们上面那些对dom元素的操作都放在$(document).ready(function(){....});方法中,这样就可以在页面加载完这些组件之后再去调用他们了。
最后执行代码,可看到我们的ECharts图