Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

百度echarts全国飞行路线图

function randomData() {
  return Math.round(Math.random()*100);
}
var data = [
  {
    name: '齐齐哈尔'
  }, {
    name: '盐城'
  }, {
    name: '青岛'
  }, {
    name: '金昌'
  }, {
    name: '泉州'
  }, {
    name: '拉萨'
  }, {
    name: '上海浦东'
  }, {
    name: '攀枝花'
  }, {
    name: '威海'
  }, {
    name: '承德'
  }, {
    name: '汕尾'
  }, {
    name: '克拉玛依'
  }, {
    name: '重庆市'
  },{
    name: '北京市'
  }
];

var geoCoordMap = {
  '齐齐哈尔': [123.97, 47.33],
  '盐城': [120.13, 33.38],
  '青岛': [120.33, 36.07],
  '金昌': [102.188043, 38.520089],
  '泉州': [118.58, 24.93],
  '拉萨': [91.11, 29.97],
  '上海浦东': [121.48, 31.22],
  '攀枝花': [101.718637, 26.582347],
  '威海': [122.1, 37.5],
  '承德': [117.93, 40.97],
  '汕尾': [115.375279, 22.786211],
  '克拉玛依': [84.77, 45.59],
  '重庆市': [108.384366, 30.439702],
  '北京市': [116.4551,40.2539]
};

var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

var dataFrom = '北京市';

myChart.setOption({
  series: [{
    type: 'map',
    map: 'china'
  }]
});

var convertData = function(data) {
  var res = [];

  for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name];

    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value)
      });
    }
  }

  return res;
};

option = {
  visualMap: {
    min: 0,
    max: 100,
    left: 'left',
    top: 'bottom',
    text: ['高', '低'],
    calculable: true,
    inRange: {
      color: ['#ffffff', '#E0DAFF', '#ADBFFF', '#9CB4FF', '#6A9DFF', '#3889FF']
    }
  },
  geo: {
    map: 'china',
    zoom: 1.2,  
    label: {
	  normal: {
       show: true,
       textStyle: {
         color: "#fff",
         fontSize: 10,
         fontFamily: 'Gotham-Book'
       }
     },
     emphasis: { 
       color: '#fff',
     },
	},
    roam: true,
    itemStyle: {
      normal: {
        areaColor: '#1640D5',
        borderColor: '#1299EF',
        shadowColor: 'rgba(0,0,0,.3)', 
        shadowBlur: 10
      },
      emphasis: {
        areaColor: '#6AD9F7',					  }
	},
  },
  series: [
    {
    name: '北京市',
    type: 'lines',
    zlevel: 2,
    symbolSize: 10,
    effect: {
      show: true,
      period: 6,
      symbol: planePath,
      trailLength: 0,
      symbolSize: 15
       
    },
    lineStyle: {
      normal: {
        color:'#c60fff',
        width: 2,
        opacity:0.5,
        curveness:0.2
      }
    },
    data: data.map(function (dataItem) {
      return {
        fromName: dataFrom,
        toName: dataItem.name,
        coords: [
          geoCoordMap[dataFrom],
          geoCoordMap[dataItem.name]
        ]
      }
    })
  },{
    name: '供需占比',
    type: 'effectScatter',
    coordinateSystem: 'geo',
    data: convertData(data),
    symbolSize: 8,
    showEffectOn: 'render',
    rippleEffect: {
      scale: 5,
      brushType: 'stroke'
    },
    hoverAnimation: true,
    label: {
      normal: {
        formatter: '{b}',
        position: 'right',
        show: true
      },
      emphasis: {
        show: true
      }
    },
    itemStyle: {
      normal: {
        color: '#c60fff',
        shadowBlur: 20,
        shadowColor: '#333'
      }
    }
  }, {
    type: 'map',
    mapType: 'china',
    geoIndex: 0,
    label: {
      normal: {
        show: true
      },
      emphasis: {
        show: true
      }
    },
    data: [{
      name: '北京',
      value: randomData()
    }, {
      name: '天津',
      value: randomData()
    }, {
      name: '上海',
      value: randomData()
    }, {
      name: '重庆',
      value: randomData()
    }, {
      name: '河北',
      value: randomData()
    }, {
      name: '河南',
      value: randomData()
    }, {
      name: '云南',
      value: randomData()
    }, {
      name: '辽宁',
      value: randomData()
    }, {
      name: '黑龙江',
      value: randomData()
    }, {
      name: '湖南',
      value: randomData()
    }, {
      name: '安徽',
      value: randomData()
    }, {
      name: '山东',
      value: randomData()
    }, {
      name: '新疆',
      value: randomData()
    }, {
      name: '江苏',
      value: randomData()
    }, {
      name: '浙江',
      value: randomData()
    }, {
      name: '江西',
      value: randomData()
    }, {
      name: '湖北',
      value: randomData()
    }, {
      name: '广西',
      value: randomData()
    }, {
      name: '甘肃',
      value: randomData()
    }, {
      name: '山西',
      value: randomData()
    }, {
      name: '内蒙古',
      value: randomData()
    }, {
      name: '陕西',
      value: randomData()
    }, {
      name: '吉林',
      value: randomData()
    }, {
      name: '福建',
      value: randomData()
    }, {
      name: '贵州',
      value: randomData()
    }, {
      name: '广东',
      value: randomData()
    }, {
      name: '青海',
      value: randomData()
    }, {
      name: '西藏',
      value: randomData()
    }, {
      name: '四川',
      value: randomData()
    }, {
      name: '宁夏',
      value: randomData()
    }, {
      name: '海南',
      value: randomData()
    }, {
      name: '台湾',
      value: randomData()
    }, {
      name: '香港',
      value: randomData()
    }, {
      name: '澳门',
      value: randomData()
    }]
  }]
};

myChart.setOption(option);

myChart.on('mouseover', function(params) {
  var city = params.name;

  if (city == '广东' || city == '广西' || city == '海南') {
    myChart.dispatchAction({
      type: 'highlight',
      name: "广东"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "广西"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "海南"
    });
  }

  if (city == '山东' || city == '江苏' || city == '浙江' || city == '安徽' || city == '福建' || city == '上海') {
    myChart.dispatchAction({
      type: 'highlight',
      name: "山东"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "江苏"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "浙江"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "安徽"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "福建"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "上海"
    });
  }

  if (city == '湖北' || city == '湖南' || city == '河南' || city == '江西') {
    myChart.dispatchAction({
      type: 'highlight',
      name: "湖北"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "湖南"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "河南"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "江西"
    });
  }

  if (city == '北京' || city == '天津' || city == '河北' || city == '山西' || city == '内蒙古') {
    myChart.dispatchAction({
      type: 'highlight',
      name: "北京"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "天津"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "河北"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "山西"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "内蒙古"
    });
  }

  if (city == '宁夏' || city == '新疆' || city == '青海' || city == '陕西' || city == '甘肃') {

    myChart.dispatchAction({
      type: 'highlight',
      name: "宁夏"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "新疆"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "青海"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "陕西"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "甘肃"
    });
  }

  if (city == '四川' || city == '云南' || city == '贵州' || city == '西藏' || city == '重庆') {
    myChart.dispatchAction({
      type: 'highlight',
      name: "四川"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "云南"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "贵州"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "西藏"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "重庆"
    });
  }

  if (city == '辽宁' || city == '吉林' || city == '黑龙江') {
    myChart.dispatchAction({
      type: 'highlight',
      name: "辽宁"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "吉林"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "黑龙江"
    });


  }
  if (city == '台湾' || city == '香港' || city == '澳门') {
    myChart.dispatchAction({
      type: 'highlight',
      name: "台湾"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "香港"
    });
    myChart.dispatchAction({
      type: 'highlight',
      name: "澳门"
    });
  }
});

myChart.on('mouseout', function(params) {
  var city = params.name;

  if (city == '广东' || city == '广西' || city == '海南') {
    myChart.dispatchAction({
      type: 'downplay',
      name: "广东"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "广西"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "海南"
    });
  }

  if (city == '山东' || city == '江苏' || city == '浙江' || city == '安徽' || city == '福建' || city == '上海') {
    myChart.dispatchAction({
      type: 'downplay',
      name: "山东"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "江苏"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "浙江"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "安徽"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "福建"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "上海"
    });
  }

  if (city == '湖北' || city == '湖南' || city == '河南' || city == '江西') {
    myChart.dispatchAction({
      type: 'downplay',
      name: "湖北"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "湖南"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "河南"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "江西"
    });
  }

  if (city == '北京' || city == '天津' || city == '河北' || city == '山西' || city == '内蒙古') {
    myChart.dispatchAction({
      type: 'downplay',
      name: "北京"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "天津"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "河北"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "山西"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "内蒙古"
    });
  }

  if (city == '宁夏' || city == '新疆' || city == '青海' || city == '陕西' || city == '甘肃') {
    myChart.dispatchAction({
      type: 'downplay',
      name: "宁夏"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "新疆"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "青海"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "陕西"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "甘肃"
    });
  }

  if (city == '四川' || city == '云南' || city == '贵州' || city == '西藏' || city == '重庆') {
    myChart.dispatchAction({
      type: 'downplay',
      name: "四川"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "云南"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "贵州"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "西藏"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "重庆"
    });
  }

  if (city == '辽宁' || city == '黑龙江' || city == '吉林') {
    myChart.dispatchAction({
      type: 'downplay',
      name: "辽宁"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "黑龙江"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "吉林"
    });
  }

  if (city == '台湾' || city == '香港' || city == '澳门') {
    myChart.dispatchAction({
      type: 'downplay',
      name: "台湾"
    });
    myChart.dispatchAction({
      type: 'downplay',
      name: "香港"
    });

    myChart.dispatchAction({
      type: 'downplay',
      name: "澳门"
    });
  }
});
点击展开全文

相关文章

  1. 百度Echarts设置geo地图位置(上下左右)
  2. vue3项目中如何搭建Echarts图表
  3. 北京西城区什刹海街道地图
  4. 百度Echarts饼图大小设置(附代码)
  5. 百度Echarts饼图中间显示文字