Echarts 地图区域线路图

echarts yekong 1924℃

Echarts 地图区域线路图

    drawLine() {
      var that = this
      window.addEventListener('resize', this.drawLine)
      var myChart = this.$echarts.init(this.$refs.echarts)
      this.$echarts.registerMap('js', jiaxing)
      var fData = [];
      var geoCoordMap = {
        "桐乡市": [120.584193, 30.630593],
        "海宁市": [120.687714, 30.507719],
        "平湖市": [121.009352, 30.67752],
        "海盐县": [120.957618, 30.533117],
        "嘉善县": [120.945159, 30.839851],
        "秀洲区": [120.775801, 30.766483],
        "南湖区": [120.783284, 30.750802],
      };
      for (var key in geoCoordMap) {
        for (var key1 in geoCoordMap) {
          if (key1 != key) {
            fData.push({
              coords: [
                geoCoordMap[key],
                geoCoordMap[key1],
              ],
              fromName: key,
              toName: key1,
            });
            break;
          }
        }

      }
      var mapdata = [
        {
          name: '嘉善县',
          value: 100
        }, {
          name: '南湖区',
          value: 10
        }, {
          name: '平湖市',
          value: 20
        }, {
          name: '桐乡市',
          value: 100
        }, {
          name: '海盐县',
          value: 100
        }, {
          name: '海宁市',
          value: 20
        }, {
          name: '通化市',
          value: 61
        }, {
          name: '秀洲区',
          value: 61
        }
      ]
      var option = {
        visualMap: {
          show: false,
          max: 100,
          pieces: [
            {
              max: 15,
              min: 0,
              label: '安全',
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 1,
                colorStops: [{
                  offset: 0,
                  color: '#A0EDFF' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#A0EDFF' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            },
            {
              max: 90,
              min: 20,
              label: '安全',
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 1,
                colorStops: [{
                  offset: 0,
                  color: '#00DFFF' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#00DFFF' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            },
            {
              min: 100,
              label: '危险',
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 1,
                colorStops: [{
                  offset: 0,
                  color: '#00BCFF' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#00BCFF' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            },
          ]
        },
        tooltip: {
          trigger: 'item',
          showDelay: 0,
          transitionDuration: 0.2,
          borderWidth: 0,
          padding: [5, 10, 5, 10],
          show: true,
          formatter: function (params) {
            return params.name
          }
        },
        geo: [
          {
            map: 'js',
            roam: false, //是否允许缩放
            zoom: 1.1, //默认显示级别
            scaleLimit: {
              min: 0,
              max: 3
            }, //缩放级别
            itemStyle: {
              normal: {
                areaColor: '#00BCFF',
                shadowColor: '#00BCFF',
                shadowBlur: 1,
                shadowOffsetX: 0,
                shadowOffsetY: 5,
              }
            },
          }],
        series: [
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            z: 5,
            data: [],
            symbolSize: 14,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return '{fline|地点:' + params.data.city + '}\n{tline|' + (params.data.info || '发生xx集件') + '}'
                },
                position: 'top',
                backgroundColor: '#00BCFF',
                padding: [0, 0],
                borderRadius: 3,
                lineHeight: 32,
                color: '#00BCFF',
                rich: {
                  fline: {
                    padding: [0, 10, 10, 10],
                    color: '#00BCFF'
                  },
                  tline: {
                    padding: [10, 10, 0, 10],
                    color: '#00BCFF'
                  }
                }
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              color: '#00BCFF',
            }
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            z: 5,
            data: [],
            symbolSize: 14,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return '{fline|地点:' + params.data.city + '}\n{tline|' + (params.data.info || '发生xx集件') + '}'
                },
                position: 'top',
                backgroundColor: '#00BCFF',
                padding: [0, 0],
                borderRadius: 3,
                lineHeight: 32,
                color: '#00BCFF',
                rich: {
                  fline: {
                    padding: [0, 10, 10, 10],
                    color: '#ffffff'
                  },
                  tline: {
                    padding: [10, 10, 0, 10],
                    color: '#ffffff'
                  }
                }
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              color: 'rgba(13, 38, 77, 1)',
            }
          },
          {
            type: 'map',
            mapType: 'js',
            geoIndex: -1,
            zoom: 1.1, //默认显示级别
            label: {
              show: true,
              color: 'rgba(13, 38, 77, 1)',
              emphasis: {
                color: 'white',
                show: false
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(13, 38, 77, 1)',
                borderWidth: 1
              },
              emphasis: {
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#00BCFF' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#00BCFF' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                },
                borderWidth: 0,
                color: 'green'
              }
            },
            data: mapdata
          },
          {
            type: 'lines',
            zlevel: 3,
            effect: {
              show: true,
              period: 4, //箭头指向速度,值越小速度越快
              trailLength: 0.1, //特效尾迹长度[0,1]值越大,尾迹越长重
              symbol: 'arrow', //箭头图标
              symbolSize: 4, //图标大小
            },
            lineStyle: {
              normal: {
                color: "#F46E36",
                width: 0.5, //尾迹线条宽度
                opacity: 0.5, //尾迹线条透明度
                curveness: 0.3 //尾迹线条曲直度
              }
            },
            data: fData,
          },
        ]
      }
      myChart.resize()
      myChart.on('click', function (params) {
        console.log(params.name);
        that.list.forEach((type) => {
          if (params.name == type.title) {
            openLink(type.link, '_target')
          }
        });
      });
      myChart.setOption(option)
    }
喜欢 (0)