echartsjs模板制作地图案例分享-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

echartsjs模板制作地图案例分享-创新互联

今天分享一个 echarts   js 模板制作 地图 案例,有类似需求的筒子可以参考 O(∩_∩)O

目前创新互联公司已为数千家的企业提供了网站建设、域名、网站空间网站运营、企业网站设计、钦南网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

需求:因为最近管理的全国各地代理服务器越来越多,有时上级需要看下我们的代理分布,比如带宽,比如供应商,如果用纯excel不是很直观,就套用了前端的Js模板,修改了些代码,填充部分值进去,就出来基本效果了。

上效果图:

echarts   js 模板制作 地图 案例分享

基本上把全国各地的资源情况很直观的显示出来了,这里只填充了部分值,后期会将值存入mysql,并且用上ajax 来塞值,这里就列个基本的效果图。

5分钟上手echarts,官网教程:http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts   很简单的。

echarts   js 模板制作 地图 案例分享

我修改的部分:

1.塞值填充

echarts   js 模板制作 地图 案例分享

2.因为默认地图只能显示数字,这里通过formatter函数,进行了修改显示,可以显示文本非数值

echarts   js 模板制作 地图 案例分享

3.完整核心代码 option 部分

 = {
  : {
    : : : }: {
    : : (params) {
      res = params.+myseries = .(i = i < myseries.i++) {
        res+= myseries[i].(j=j

这里没有详细讲解基础部分,官网前面5分钟入手教程就可以了。后期陆续更新 ajax,mysql 部分,基本效果就先到这里了。  (*^__^*) .......

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


网站名称:echartsjs模板制作地图案例分享-创新互联
网站路径:http://kswsj.cn/article/csdsde.html

其他资讯