众所周知ECharts是一个纯 Javascript 的图表库,提供了常规的折线图、柱状图、散点图、饼图、k线图等十分炫酷的图表,最主要的要文档还是中文的,制作者为baidu.好咱不用知道制作者是谁。我按照平时使用ECharts的习惯自然是直接导入jquery的链接和图表的链接然后一个div嵌套元素,js拿到元素就完活了。
先上json地址:https://raw.githubusercontent.com/ecomfe/echarts/master/test/data/lines-bus.json
如果直接拷贝官网的代码,是看不到效果的,大家都知道这个地址是错的,大家可以去上面这个网址下载数据。
我并不关心这个数据是啥因为他太长了。
可是他跑不起来于是我就找解决方法找其他的地方的问题看看引用问题或者json数据的问题因为当时报错然后浏览器还会抛出异常Uncaught TypeError: data.map is not a function然后我换了一个json能跑出来。哦 对了 代码结构如下:
用下面的json做的山东的可以跑出来,但是我还是没解决问题。于是我试着看能不能用网络上的json数据实现 。也还是没有实现,但是我有次运行是代码报了下面的错误。
然后我就想到直接用百度给的js的api解决以下就是步骤:注册
然后 信息确认
搞起来:
<script src='http://api.map.baidu.com/api?v=3.0&ak=你的密匙'></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=niRSMyiK2AEFr6E6xZHuO3MtlYo8yT73"></script>
<script type="text/javascript">
var map = new BMapGL.Map("container");
// 创建地图实例
var point = new BMapGL.Point(117.128, 36.681);
// 创建点坐标
map.centerAndZoom(point, 15);
// 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>
</body>
</html>
成功hei'h嘿嘿 但是突然发现还不如引入一个a标签简单,做麻烦了,淦。