最近一直在研究Echarts,ECharts是百度产品,也符合百度一贯的产品风格,技术文档比较粗糙,我本身也是个外行,导致我研究起来也麻烦了很多,不过,我还是不会放弃的,我一直都在研究,在寻找,以期望能够找到解决办法。
经过3天的熏陶,对ECharts也大体上有了很深的认识,ECharts的代码其实更像是一个json,并么有太多js的代码,功能全部在option配置项中,我们如何配置了这个option也就决定了ECharts图标的样式。
大体上的步骤是这样的
1.绑定dom。var dom = document.getElementById(“crossFlow”);
2.实例化echarts对象。 var myChart = echarts.init(dom);
3.配置option项
4.加载option。myChart.setOption(option, true);
其中的重点是在option项目中,下面简单写一下自己用到的一些字段
title:图表标题
legend:图例
grid:网格
toolbox:工具箱
提示框:提示框
xAxis:x轴
yAxis:y轴
radar:雷达图默认参数
series:服务项,重点是数据绑定
map:地图项
我看网上很多也是吐槽ECharts的文档不够细致,对于我这个初学者更甚,好在ECharts的官网上有很多例子程序,刚开始的时候我遇到一个很蛋疼的问题是,我根本不会使用那个例子,我将例子拷贝到一个html文件中,我在浏览器中打开这个文件,结果就坑了,根本加载不出来。
我根据官网的提示,下载github上的代码,下载官网的代码,都无法显示图标,各种报错,找不到echarts组件,我当时就凌乱了,这应该怎么办,这么多复杂的表,我们要展示,没有办法,趁着是周末,我就默默的到公司加班了。。。
没有办法自己也就硬着头皮一点点的学了,能搞出来一点是一点吧,但是,后来我有了惊人的发现,其实echart的demo是能够下载的,只不过是百度坑爹的把这个下载的东西隐藏的特别的深,你可以点击教程,然后看到5分钟上手Echarts的选项,直接拉到最下面,然后看到 : “你也可以直接进入 ECharts Gallery 中查看编辑示例”。文本,点击进入,你就会发现,其实每个官方的demo都是能够下载的,这样我就可以上手的快多了,我也了解了echarts的代码一个规范,整体各个选项卡的含义了,终于心口的一颗大石头落下来了。
下面是百度ECharts demo的下载地址
http://echarts.baidu.com/gallery/index.html
从此,我也就知道各个表要怎么写了,但是接下来又遇到一个蛋疼的问题,凡事有地图的页面,都加载不出来,我一直不知道是什么问题,我反复的修改,都不能够实现,我想究竟是怎么了,我究竟最错了什么,我去百度js地图上看文档,然后下载百度地图js代码demo也是加载不出来地图,然后我又注册开发者,申请key,都这样搞了,还是不能实现,我的心都凉了,但是我惊奇的发现,在申请key的时候竟然要输入域名,这时候我想是不是域名导致的,我百思不解,然后我想我怎么要用域名访问尼?放在我本地的locahost的路径下?然后我就放mac的localhost的访问文件夹下,但是这个文件夹是需要权限的,每次的操作都要去搞权限,我想能不能在别的地方也能访问,我百度了一下还真的有这种方法,真的是好神奇,突然发现,老天真的是很帮助我,竟然每次都给我指明了道路
mac下locahost访问路径变化
1.cd 到要访问的路径
cd /Users/heqin/Desktop/trafficBigData/trafficBigData
2.执行python脚本
python -m SimpleHTTPServer 8080
终于能够愉快的加载地图了,再次感谢,天朝那股神奇的力量。