蓝色,白色echarts中国地图

668 阅读1分钟

let myChart = this.$echarts.init(document.getElementById("g_echarts05")); //这里是为了获得容器所在位置    
        window.onresize = myChart.resize;
        myChart.setOption({ // 进行相关配置
          // backgroundColor: "#02AFDB", 
          tooltip: {}, // 鼠标移到图里面的浮动提示框
          dataRange: {
            show: false,
            min: 0,
            max: 1000,
            text: ['High', 'Low'],
            realtime: true,
            calculable: true,
            color: ['orangered', 'yellow']
          },
          // 白色的中国地图
          geo: { // 这个是重点配置区
            map: 'china', // 表示中国地图
            roam: true,
            label: {
              normal: {
                show: false, // 是否显示对应地名
                textStyle: {
                  color: 'rgba(0,0,0,0.4)'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [
            // 蓝色的中国地图
        //     {
        //   name: "000",
        //   type: "map",
        //   mapType: "china",
        //   zoom: 1.2,
        //   zlevel: 2,
        //   roam: false,
        //   nameMap: 'china',
        //   label: {
        //     show: false
        //   },
        //   itemStyle: {
        //     normal: {
        //       //未选中状态
        //       borderWidth: 1, //边框大小
        //       borderColor: "#5596f9",
        //       areaColor: "rgba(12,75,159, .6)",
        //       label: {
        //         // show: country == "china" ? true : false, //显示名称
        //         show: false,
        //         fontSize: 14,
        //         color: "#fff"
        //       }
        //     },
        //     emphasis: {
        //       // 选中样式
        //       borderWidth: 1,
        //       borderColor: "#5596f9",
        //       areaColor: "#fff",
        //       label: {
        //         show: false,
        //         textStyle: {
        //           color: "#fff"
        //         }
        //       }
        //     }
        //   }
        //   // data: mydata,
        // }
        //白色
            {
              type: 'scatter',
              coordinateSystem: 'geo' // 对应上方配置

            },
            {
              name: '启动次数', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: [{
                "name": "北京",
                "value": 599
              },
              ]
            }
          ]
        })