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


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


上效果图:

wKiom1fieGiBfZNhAAEiG3oKhZg878.jpg


基本上把全国各地的资源情况很直观的显示出来了,这里只填充了部分值,后期会将值存入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   很简单的。

wKiom1fiePDj4WcsAAE7S2-mcj4457.jpg




我修改的部分:

1.塞值填充

wKioL1fieW-y2kWLAABOXBJxDEA746.jpg


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

wKioL1fieYTCvXZqAABOMYwTypY812.jpg





3.完整核心代码 option 部分


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



  ]}



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