【echarts】地图实现省市区联动

最新推荐文章于 2024-09-06 17:33:10 发布
最新推荐文章于 2024-09-06 17:33:10 发布
阅读量2.1k 收藏 8
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tx_xiaobai/article/details/106664515
版权

地图选择器：http://datav.aliyun.com/tools/atlas/#&lat=31.728167146023935&lng=104.32617187499999&zoom=3

效果如下：

代码如下：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/index.css">
    

    <title>看板</title>
  </head>
  <body> 
    <div class="container-fluid">

      <header>
        <div class="header_fl"></div>
        <div class="header_middle">尤顺智动环境监测云平台</div>
        <div class="header_fr" id="currentDate"></div>
      </header>

      <!-- main -->
      <div class="mainBox">
        <div class="row">

          <div class="col-md-3">
            <div class="provinceBox mapLine">
              <div class="province_title">省图(直辖市图)</div>
              <div id="province" class="province_map"></div>
            </div>
            
          </div>

          <div class="col-md-4 ">
            <!-- <div class="province_title">省图(直辖市图)</div> -->
            <div id="china" class="china_map"></div>
          </div>

          <div class="col-md-5 ">
            <div class="airBox mapLine">
              <div class="province_title">空气指数趋势图</div>
              <div id="air" style="width: 100%; height:300px;"></div>
            </div>
            
          </div>

        </div>

        <div class="row">
          <div class="col-md-3  ">
            <div class="provinceBox mapLine">
              <div class="province_title">市/区 亮点图</div>
              <div id="area" class="province_map"></div>
            </div>
            

          </div>
          <div class="col-md-9 ">
            <div class="row">
              <div class="col-md-4  ">
                <div class="customer_number mapLine" >
                  <div class="province_title">客户数量</div>
                  <div id="customer_scroll" class="scroll"> 
                    <ul class="progressBar">
                      <li>
                        <div class="pro_left">黄浦区</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">徐汇区</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">长宁区</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">静安区</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">普陀区</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">虹口区</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">杨浦区</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">浦东新区</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">闵行区</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">宝山区</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
  
                    </ul>
                  </div>
                </div>
              </div>

              <div class="col-md-4">
                <div class="customer_number mapLine" >
                  <div class="province_title">产品信息综合展示</div>
                  <div id="scroll" class="scroll">
                    <ul class="progressBar">
                      <li>
                        <div class="pro_left">产品类型1</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">产品类型2</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">产品类型3</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">产品类型4</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">产品类型5</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">产品类型6</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">产品类型7</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">产品类型8</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">产品类型9</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">产品类型10</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                      <li>
                        <div class="pro_left">产品类型11</div>
                        <div class="pro_middle">
                          <div class="progress-bar">
                            <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                              <div class="bar-face face-position back percentage"></div>
                            </div>
                          </div>
                        </div>
                        <div class="pro_right">1212</div>
                      </li>
                    </ul>
                  </div>
                  
                </div>
                
              </div>

              <div class="col-md-4">
                <div class="customer_number mapLine">
                  <div class="province_title">客户信息综合展示</div>
                  <div id="customer_info" class="province_map"></div>
                </div>
                
              </div>


            </div>
          </div>
         
        </div>
      </div>
      <!-- main end-->


    </div>

    
    

    
    
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/china.js"></script>
    <script src="js/public.js"></script>
    <script>
      $('#currentDate').html(currentDate())
      console.log(currentDate(),'currentDate')
      
      /*
        客户数量  - 滚动
      */
      scroll_customer(); 
      function scroll_customer(){
        var scrollIndex = 0;
        var Timer = null;
        clearInterval(Timer);
          var ul = $("#customer_scroll ul");
          var li = ul.children("li");
          var h = li.height();
          var index = 0;
          ul.css("height",h*li.length*2);
          ul.html(ul.html()+ul.html());  //复制一份当前ul内容 
            function run(){
              if(scrollIndex>=li.length){
              ul.css({top:0});
              scrollIndex = 1;
              ul.animate({top:-scrollIndex*h},200);
            } 
            else{
              scrollIndex++; 
              ul.animate({top:-scrollIndex*h},200);
            }
          }
        Timer= setInterval(run,3000); 
      };

      
      /*
        产品信息综合展示  - 滚动
      */
      scroll_f();
      function scroll_f(){
        var scrollIndex = 0;
        var Timer = null;
        clearInterval(Timer);
          var ul = $("#scroll ul");
          var li = ul.children("li");
          var h = li.height();
          var index = 0;
          ul.css("height",h*li.length*2);
          ul.html(ul.html()+ul.html());  //复制一份当前ul内容 
            function run(){
              if(scrollIndex>=li.length){
              ul.css({top:0});
              scrollIndex = 1;
              ul.animate({top:-scrollIndex*h},200);
            } 
            else{
              scrollIndex++; 
              ul.animate({top:-scrollIndex*h},200);
            }
          }
        Timer= setInterval(run,3000); 
      }
       

      // 全国
      nationwide()
      function nationwide(){
        $.get('https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json',function (chinaJson) {
            echarts.registerMap('china', chinaJson);
            var arr = []
            $.each(chinaJson.features, function(index, item){
              arr.push({
                name: item.properties.name,
                adcode: item.properties.adcode,
              })
            })
            // 绘制图表，准备数据
        var option = {
          tooltip: {
            show: true,
            formatter: function (params) {
              // console.log(params)
                var info = '<p style="font-size:12px">' + params.name + '</p>'
                // <p style="font-size:14px">这里可以写一些，想展示在页面上的别的信息</p>'
                return info;
            },
            // backgroundColor: "#ff7f50",//提示标签背景颜色
            // textStyle: { color: "#fff" } //提示标签字体颜色
  
          },
          series: [
            {
              name: '中国',
              type: 'map',
              map: 'china',
              mapType: 'china',
              // selectedMode: 'multiple',
              nameProperty: 'adcode',
              zoom: 1, //当前视角的缩放比例
              roam: true, //是否开启平游或缩放
              scaleLimit: { //滚轮缩放的极限控制
                min: 1,
                max: 2
              },

              label: {
                  normal: {
                      show: true,//显示省份标签
                      textStyle:{color:"#fff"}//省份标签字体颜色
                  },
                  emphasis: {
                      show: true,//对应的鼠标悬浮效果
                      textStyle:{color:"#fff"}
                  },
                  // formatter: '{b}: {@score}'
              },
              itemStyle: {
                  normal: {
                    label:{
                      show:false, // 显示省份名称
                    },
                    borderWidth: 1,//区域边框宽度
                    borderColor: '#00A0E8',//区域边框颜色
                    areaColor:"#121D39",//区域颜色
                  },
                  emphasis: { // 选中部分
                    
                    borderWidth: .5,
                    borderColor: '#4b0082',
                    areaColor: "#00A0E8",
                    textStyle:{color:"#fff"}
                  }
              },
              data: arr
            }
          ]
        };

        var myChart = echarts.init(document.getElementById('china'));
            myChart.setOption(option);

            myChart.off('click')
            myChart.on('click', function (params) {
              console.log(params);
              testprovince(params.data.adcode)
              
            })
        });
      };

      /*
        省
      */
      function testprovince(adcode) {
        $.get('https://geo.datav.aliyun.com/areas_v2/bound/'+adcode+'_full.json',function (geoJson) {
          echarts.registerMap('province', geoJson);
          var arr = []
          $.each(geoJson.features, function(index, item){
            arr.push({
              name: item.properties.name,
              adcode: item.properties.adcode,
              level: item.properties.level,
            })
          });
          var option = {
            tooltip: {
              formatter: function (params) {
                  var info = '<p style="font-size:12px">' + params.name + '</p>'
                  // <p style="font-size:14px">这里可以写一些，想展示在页面上的别的信息</p>'
                  return info;
              },
              // backgroundColor: "#ff7f50",//提示标签背景颜色
              // textStyle: { color: "#fff" } //提示标签字体颜色
            },
            series: [
              {
                name: '省',
                type: 'map',
                mapType: 'province',
                selectedMode: 'multiple',
                label: {
                    normal: {
                        show: true,//显示省份标签
                        textStyle:{color:"#fff"}//省份标签字体颜色
                    },
                    emphasis: {
                        show: true,//对应的鼠标悬浮效果
                        textStyle:{color:"#fff"}
                    }
                },
                itemStyle: {
                    normal: {
                      label:{
                        show:false, // 显示省份名称
                      },
                      borderWidth: 1,//区域边框宽度
                      borderColor: '#00A0E8',//区域边框颜色
                      areaColor:"#121D39",//区域颜色
                    },
                    emphasis: { // 选中部分
                      
                      borderWidth: .5,
                      borderColor: '#4b0082',
                      areaColor: "#00A0E8",
                      textStyle:{color:"#fff"}
                    }
                },
                data: arr
              }
            ]
          };

          var myChart = echarts.init(document.getElementById('province'));
          myChart.setOption(option);
          // 地图点击事件
          myChart.off('click')
          myChart.on('click',function(params){
            console.log(params)
            if (params.data.level != 'district') {
              city(params.data.adcode)
            }
            
          })
        })
      };
      
      /*
        市
      */
      function city(adcode) {
        $.get('https://geo.datav.aliyun.com/areas_v2/bound/'+adcode+'_full.json',function (geoJson) {
          echarts.registerMap('area', geoJson);
            var arr = []
            $.each(geoJson.features, function(index, item){
              arr.push({
                name: item.properties.name,
                adcode: item.properties.adcode,
              })
            })
          var option = {
          tooltip: {
            formatter: function (params) {
                var info = '<p style="font-size:12px">' + params.name + '</p>'
                // <p style="font-size:14px">这里可以写一些，想展示在页面上的别的信息</p>'
                return info;
            },
            // backgroundColor: "#ff7f50",//提示标签背景颜色
            // textStyle: { color: "#fff" } //提示标签字体颜色
          },
          series: [
            {
              name: '市',
              type: 'map',
              mapType: 'area',
              selectedMode: 'multiple',
              label: {
                  normal: {
                      show: true,//显示省份标签
                      textStyle:{color:"#fff"}//省份标签字体颜色
                  },
                  emphasis: {
                      show: true,//对应的鼠标悬浮效果
                      textStyle:{color:"#fff"}
                  }
              },
              itemStyle: {
                  normal: {
                    label:{
                      show:false, // 显示省份名称
                    },
                    borderWidth: 1,//区域边框宽度
                    borderColor: '#00A0E8',//区域边框颜色
                    areaColor:"#121D39",//区域颜色
                  },
                  emphasis: { // 选中部分
                    
                    borderWidth: .5,
                    borderColor: '#4b0082',
                    areaColor: "#00A0E8",
                    textStyle:{color:"#fff"}
                  }
              },
              data: arr
            }
          ]
        };

        var myChart = echarts.init(document.getElementById('area'));
        myChart.setOption(option);
        })
      };


      

      /*
        空气指数趋势
      */
      air();
      function air(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('air'));
        option = {
          title: {
              text: ''
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'cross',
                  label: {
                      backgroundColor: '#6a7985'
                  }
              }
          },
          legend: {
            left:'left',
            textStyle: {
              color: '#fff',
              fontSize: 12
            },
              data: [
                'O3标准值', 'O3均值', 'RPM10标准值', 'RPM10均值', 
                'RPM2.5标准值', 'RPM2.5均值','CO标准值', 'CO均值',
                'NO2标准值', 'NO2均值','SO2标准值', 'SO2均值',
              ],
              icon:'circle', // 改变图标形状
          },
          toolbox: {
              feature: {
                  saveAsImage: {}
              }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['0', '6', '12', '18', '24',],
              axisLine:{
                lineStyle:{
                  type:'solid',
                  color: '#3E7798',//左边线的颜色
                  width:'2'//坐标线的宽度
                }
              },
              splitLine: {
                  show: true, // 网格线是否显示
                  lineStyle:{
                    color: '#3E7798',
                    width: 1,
                    type: 'solid'
                }
          　　}
            }
          ],
          yAxis: [
              {
                  type: 'value',
                  axisLine:{
                    lineStyle:{
                      type:'solid',
                      color: '#3E7798',//左边线的颜色
                      width:'2'//坐标线的宽度
                    },
                },
                splitLine: {
                  show: true, // 网格线是否显示
                  lineStyle:{
                    color: '#3E7798',
                    width: 1,
                    type: 'solid'
                  }
        　　    }
              }
          ],
          series: [
            
              {
                  name: 'O3标准值',
                  type: 'line',
                  stack: '总量',
                  areaStyle: {},
                  data: [120, 132, 101, 134, 90],
                  itemStyle:{
                    normal:{
                      color:'#35C6FF', // 拆线点的颜色
                      lineStyle:{
                        color:'#35C6FF', // 折线颜色
                      }
                    }
                  },
                  // areaStyle:{
                  //   normal:{color:'#35C6FF'}
                  // }
              },
              {
                  name: 'O3均值',
                  type: 'line',
                  stack: '总量',
                  areaStyle: {},
                  data: [220, 182, 191, 234, 290],
                  itemStyle:{
                    normal:{
                      color:'#2D6AFC', // 拆线点的颜色
                      lineStyle:{
                        color:'#2D6AFC', // 折线颜色
                      }
                    }
                  },
                  // areaStyle:{
                  //   normal:{color:'#2D6AFC'}
                  // }
              },
              {
                  name: 'RPM10标准值',
                  type: 'line',
                  stack: '总量',
                  areaStyle: {},
                  data: [150, 232, 201, 154, 190],
                  itemStyle:{
                    normal:{
                      color:'#8976FE', // 拆线点的颜色
                      lineStyle:{
                        color:'#8976FE', // 折线颜色
                      }
                    }
                  },
              },
              {
                name: 'RPM10均值',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                data: [320, 332, 301, 334, 390],
                itemStyle:{
                  normal:{
                    color:'#BD00FF', // 拆线点的颜色
                    lineStyle:{
                      color:'#BD00FF', // 折线颜色
                    }
                  }
                },
              },
              {
                  name: 'RPM2.5标准值',
                  type: 'line',
                  stack: '总量',
                  label: {
                      normal: {
                          show: true,
                          position: 'top'
                      }
                  },
                  areaStyle: {},
                  data: [820, 932, 901, 934, 1290],
                  itemStyle:{
                    normal:{
                      color:'#FFDA65', // 拆线点的颜色
                      lineStyle:{
                        color:'#FFDA65', // 折线颜色
                      }
                    }
                  },
              },
              {
                  name: 'RPM2.5均值',
                  type: 'line',
                  stack: '总量',
                  areaStyle: {},
                  data: [820, 932, 901, 934, 1290],
                  itemStyle:{
                    normal:{
                      color:'#FF7926', // 拆线点的颜色
                      lineStyle:{
                        color:'#FF7926', // 折线颜色
                      }
                    }
                  },
              },
              {
                  name: 'CO标准值',
                  type: 'line',
                  stack: '总量',
                  areaStyle: {},
                  data: [820, 932, 901, 934, 1290],
                  itemStyle:{
                    normal:{
                      color:'#C7FF36', // 拆线点的颜色
                      lineStyle:{
                        color:'#C7FF36', // 折线颜色
                      }
                    }
                  },
              },
              {
                  name: 'CO均值',
                  type: 'line',
                  stack: '总量',
                  areaStyle: {},
                  data: [820, 932, 901, 934, 1290],
                  itemStyle:{
                    normal:{
                      color:'#00FF51', // 拆线点的颜色
                      lineStyle:{
                        color:'#00FF51', // 折线颜色
                      }
                    }
                  },
              },
              {
                  name: 'NO2标准值',
                  type: 'line',
                  stack: '总量',
                  areaStyle: {},
                  data: [870, 932, 701, 734, 1790],
                  itemStyle:{
                    normal:{
                      color:'#FF8FBC', // 拆线点的颜色
                      lineStyle:{
                        color:'#FF8FBC', // 折线颜色
                      }
                    }
                  },
              },
              {
                  name: 'NO2均值',
                  type: 'line',
                  stack: '总量',
                  areaStyle: {},
                  data: [920, 992, 991, 994, 1990],
                  itemStyle:{
                    normal:{
                      color:'#FF1400', // 拆线点的颜色
                      lineStyle:{
                        color:'#FF1400', // 折线颜色
                      }
                    }
                  },
              },
              {
                  name: 'SO2标准值',
                  type: 'line',
                  stack: '总量',
                  areaStyle: {},
                  data: [820, 832, 801, 834, 1890],
                  itemStyle:{
                    normal:{
                      color:'#00E289', // 拆线点的颜色
                      lineStyle:{
                        color:'#00E289', // 折线颜色
                      }
                    }
                  },
              },
              {
                  name: 'SO2均值',
                  type: 'line',
                  stack: '总量',
                  areaStyle: {},
                  data: [620, 632, 601, 634, 1690],
                  itemStyle:{
                    normal:{
                      color:'#00EADA', // 拆线点的颜色
                      lineStyle:{
                        color:'#00EADA', // 折线颜色
                      }
                    }
                  },
              },
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }; 

      /*
        客户数量
      */
      
      /*
        客户信息
      */
      customerInfo()
      function customerInfo(){
        var myChart = echarts.init(document.getElementById('customer_info'));
        option = {
          title: {
            text: '',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            // orient: 'vertical',
            // top: 'middle',
            textStyle: { //图例文字的样式
              color: '#fff',
              fontSize: 12
            },
            bottom: 10,
            left: 'center',
            data: [
                '半导体', '政府大楼', '学校', '医药食品', 
                '医院', '地铁', '机场火车站', '住宅'
                ]
          },
          color:[
          '#FF9854','#FFE500','#00EACB','#00EACB',
          '#01B3FF','#2140DC','#7E30FF','#CC4DFE','#F33732'
          ],
          series: [
            {
              type: 'pie',
              radius: ['50%','70%'],
              center: ['50%', '50%'],
              selectedMode: 'single',
              data: [
                {value: 535, name: '半导体'},
                {value: 510, name: '政府大楼'},
                {value: 634, name: '学校'},
                {value: 735, name: '医药食品'},
                {value: 735, name: '医院'},
                {value: 735, name: '地铁'},
                {value: 735, name: '机场火车站'},
                {value: 735, name: '住宅'},
              ],
              
              
            }
          ]
        };
        myChart.setOption(option)
      }

    </script>
  </body>
</html>

 

tx_xiaobai
关注
Echarts3之全国地图和省市地图二合一整合
2401_84048205的博客
04-14 847
看完美团、字节、腾讯这三家的一二三面试问题，是不是感觉问的特别多，可能咱们真的又得开启面试造火箭、工作拧螺丝的模式去准备下一次的面试了。开篇有提及我可是足足背下了Java互联网工程师面试1000题，多少还是有点用的呢，换汤不换药，不管面试官怎么问你，抓住本质即可！能读到此处的都是真爱Java互联网工程师面试1000题。
echarts全国省市三级地图联动
12-14
echarts全国省市三级地图联动，点击中国地图切换到省的地图，点击省的地图切换到是的地图
echarts 省市区联动地图
热门推荐
terry711的专栏
03-31 1万+
地图效果 省地图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>地图</title> <link rel="stylesheet" type="text/css" href="static/css/main.css"> <scrip...
利用 ECharts 地图：实现纹理和图像的效果（上海json）
最新发布
2401_87192537的博客
09-06 251
注:shanghaiGeoJSON 换为你需要的区域json。
Vue（十八）：echarts地图省市区联动
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
07-30 772
echarts地图省市区联动
echarts数据地图实现省市联动点击
09-21
一个echarts数据地图的案例，展示全国省市的数据，以及点击省份下钻到市级的数据展示效果。
Echarts地图省市联动
yhlhelloworld的博客
05-29 332
因为我的需求是只需要下钻到省份，所以只写了省份的逻辑，若还要下转市或者区县可自行更改，或我参考我提供的思路。南海群岛太大，占用了地图很大的空间，想替换未缩略图。3. 直接复制我封装好的组件即可运行。2. 引入中国地图JSON数据。（复制JSON链接下载下来）1.安装echarts。
echarts地图省市区三级下钻联动
04-06
在本文中，我们将深入探讨如何在Vue.js项目中实现基于ECharts的地图省市区三级下钻联动功能。ECharts是一款由百度开发的开源JavaScript可视化库，它提供了丰富的图表类型和强大的交互性，支持自定义地图，非常适合...
echarts地图下钻省市区展示，vue版
03-06
在本文中，我们将深入探讨如何使用Echarts地图组件在Vue.js环境下实现省市区的下钻展示功能。Echarts是一款强大的、基于JavaScript的数据可视化库，它提供了丰富的图表类型和灵活的交互方式。Vue.js则是一种轻量级的...
echarts插件实现的省市区三级离线地图
09-03
（特别提醒：由于要获取json...）利用echarts插件实现的中国省市区三级地图切换。主要采用单击进入下级地图，双击或者右键点击“返回上一级”地图。资源里面包括详细的实现源码，和全国大多数省市区的json地图文件。
Echarts 地图 三级联动 钻省市区
weixin_50587417的博客
06-15 945
Echarts 地图 三级联动 钻省市区
Echarts地图省级联动，动态加载数据，右键返回，并附有省市json地图。
10-29
Echarts地图省级联动，动态加载数据，实现右键返回。有源码，简单易懂，并附有省市js和json地图。
echarts扩展全国-省-市三级联动，有demo
01-17
echarts扩展全国，省市，区县三级联动，里面包含2个demo
基于react省市区联动 map echarts dome
09-05
基于react省市区联动 map echarts dome。
echarts 绘制的全国地图三级联动 点击放大效果 省县乡更新过后的最新地名
07-03
echarts 绘制的全国地图三级联动 点击放大效果 省县乡更新过后的最新地名 ，运行请不要直接打开index.html文件 请用本地服务器启动
echarts三级联动地图
11-30
该插件是我写的“echarts地图三级联动”中用到的，请谨慎下载。
HTML引入 Echarts实现地图的联动效果，默认展示省下所有市，点击某市会跳到本市下所有县的效果
@Grapefruit的博客
03-31 1798
要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮) 首先我们要先画一个省级的地图，展示出这个省下面对应的所有市，这里柚子选择的是安徽省 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
echarts地图三级联动
IT_xiaocao的博客
11-30 5875
全国地图 var province = [ {name: '北京', selected:false}, {name: '天津', selected:false}, {name: '上海', selected:false}, {name: '重庆
Echarts+Vue实现国省市级地图
分享、进步、收获！！！
05-21 3966
echarts+vue实现国省市级地图
echarts实现省市区地图下钻功能详解
资源摘要信息:"echarts地图下钻省市区展示，js版" 知识点: 1. ECharts简介：ECharts是一个使用JavaScript实现的开源可视化库，它可以在网页中展示各种类型的数据图表。它由百度开源团队维护，具有易于使用、跨...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值