echarts是一个开源的优秀前端可视化框架，有用很多优秀的可视化方案，调用也十分的简单。今天对echarts如何使用做一个记录，方便日后使用。
先从echarts官网下载所需的js包，用于开发，不多说自然是源代码版js。
这个Demo的例子是来自原官网的空气质量图。
业务需求：将页面捕捉到本地。
代码：
ChinaMap
存在的技术要点：
1.所有数据需要放入option中，然后通过setOption这个方法来放入作为echarts的div中。可以根据官网Demo看出这一点。官网Demo：点击打开链接
2.option中的数据格式是json串的形式，各个参数都具有不同的意义，可以根据官网API来学习。点击打开链接
3.也是存在的坑，本例中需要用到ChinaMap，这里调用的是百度Map，所以需要访问百度地图的接口。也就是需要通过js来访问百度地图，以此类推如果是世界地图，就需要添加世界地图的js。
4.还有几个js文件也是必不可少的，不多解释，少了就是不出效果（删掉这些js后发现地图会变乱，目测是定位坐标的js）
5.dataTool.js是处理echarts数据的js，是必须存在的，否则页面中传入的数据格式不被echarts认可。
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("echarts")):"function"==typeof define&&define.amd?define(["exports","echarts"],t):t(e.dataTool={},e.echarts)}(this,function(e,t){"use strict";function r(e,t,r){if(e&&t){if(e.map&&e.map===f)return e.map(t,r);for(var a=[],n=0,o=e.length;n
m){var w=[l,x];"vertical"===t.layout&&w.reverse(),a.push(w)}}}return{boxData:r,outliers:a,axisData:n}};t.dataTool&&(t.dataTool.version="1.0.0",t.dataTool.gexf=c,t.dataTool.prepareBoxplotData=d),e.version="1.0.0",e.gexf=c,e.prepareBoxplotData=d});
6.最后别忘了引入刚才下载的echarts.js。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/207637.html原文链接：https://javaforall.net
