百度echarts如何做一个3D地图线路流向图

如何利用百度echarts做一个3D地图线路流向图，下面web建站小编给大家详细介绍一下实现代码！

实现代码如下：

var svg = `点击下载svg`;

echarts.registerMap('organ_diagram', { svg: svg });

const random = (lower, upper) => {
  lower = +lower || 0
  upper = +upper || 0
  return Math.random() * (upper - lower) + lower
}

const provinces = [
  {
    city: true,
    name: '太原',
    coord: [1383.6, 759.1]
  },
  {
    name: '古交市',
    coord: [1287.7, 755.4]
  },
  {
    name: '清徐县',
    coord: [1322.5, 855]
  },
  {
    name: '娄烦县',
    coord: [1165.4, 708.5]
  },
  {
    name: '小店县',
    coord: [1388.5, 804.2]
  },
  {
    name: '万柏林区',
    coord: [1337.3, 783.6]
  },
  {
    city: true,
    name: '忻州',
    coord: [1544, 638]
  },
  {
    name: '保德县',
    coord: [1120, 436]
  },
  {
    name: '河曲县',
    coord: [1236, 359]
  },
  {
    name: '静乐县',
    coord: [1317, 611]
  },
  {
    name: '宁武县',
    coord: [1546.2, 501.7]
  },
  {
    name: '原平市',
    coord: [1638, 547]
  },
  {
    name: '五台县',
    coord: [1861, 624]
  },
  {
    city: true,
    name: '朔州',
    coord: [1604, 391]
  },
  {
    name: '朔城区',
    coord: [1612.6, 430.6]
  },
  {
    name: '怀仁市',
    coord: [1898, 334]
  },
  {
    name: '应县',
    coord: [1920, 414]
  },
  {
    name: '山阴县',
    coord: [1732, 361]
  },
  {
    name: '右玉县',
    coord: [1711, 218]
  },
  {
    name: '平鲁区',
    coord: [1538.6, 332.6]
  },
  {
    city: true,
    name: '大同',
    coord: [2102, 256]
  },
  {
    name: '左云县',
    coord: [1826.7, 262.3]
  },
  {
    name: '浑源县',
    coord: [2140.5, 436.7]
  },
  {
    name: '新荣区',
    coord: [2028.5, 215.6]
  },
  {
    name: '云冈区',
    coord: [2015.9, 281]
  },
  {
    name: '云州区',
    coord: [2195.8, 316.2]
  },
  {
    city: true,
    name: '阳泉',
    coord: [1769.6, 861.7]
  },
  {
    name: '盂县',
    coord: [1759.3, 766.8]
  },
  {
    name: '平定县',
    coord: [1808, 881.4]
  },
  {
    name: '郊区',
    coord: [1760.2, 825.6]
  },
  {
    name: '矿区',
    coord: [1728, 844.8]
  },
  {
    city: true,
    name: '吕梁',
    coord: [943, 804]
  },
  {
    name: '孝义市',
    coord: [1013.2, 910.5]
  },
  {
    name: '临县',
    coord: [876.3, 625]
  },
  {
    name: '岚县',
    coord: [1115.2, 608.6]
  },
  {
    name: '兴县',
    coord: [990.9, 561.8]
  },
  {
    name: '方山县',
    coord: [997.1, 707.3]
  },
  {
    name: '中阳县',
    coord: [883, 862.8]
  },
  {
    name: '柳林县',
    coord: [791.7, 766.8]
  },
  {
    name: '文水县',
    coord: [1191, 864.9]
  },
  {
    name: '交城县',
    coord: [1171.1, 821]
  },
  {
    name: '交口县',
    coord: [818.5, 927.2]
  },
  {
    name: '离石县',
    coord: [942.5, 876.7]
  },
  {
    city: true,
    name: '晋中',
    coord: [1459, 905]
  },
  {
    name: '介休市',
    coord: [1063.3, 975.5]
  },
  {
    name: '寿阳县',
    coord: [1620.6, 839.3]
  },
  {
    name: '昔阳县',
    coord: [1760.1, 966]
  },
  {
    name: '平遥县',
    coord: [1177.5, 954.1]
  },
  {
    name: '灵石县',
    coord: [967, 1010.2]
  },
  {
    name: '左权县',
    coord: [1598.3, 1051.3]
  },
  {
    name: '和顺县',
    coord: [1686.1, 1019]
  },
  {
    name: '榆次区',
    coord: [1482.7, 922.4]
  },
  {
    city: true,
    name: '临汾',
    coord: [808, 1162]
  },
  {
    name: '霍州市',
    coord: [946.3, 1095.4]
  },
  {
    name: '古县',
    coord: [988.5, 1161.9]
  },
  {
    name: '吉县',
    coord: [496.5, 1113]
  },
  {
    name: '隰县',
    coord: [725.3, 1025.3]
  },
  {
    name: '蒲县',
    coord: [666.3, 1136.4]
  },
  {
    name: '翼城县',
    coord: [825.2, 1269.7]
  },
  {
    name: '洪洞县',
    coord: [871.2, 1137.9]
  },
  {
    name: '安泽县',
    coord: [1060.5, 1210.3]
  },
  {
    name: '乡宁县',
    coord: [537.8, 1165.9]
  },
  {
    name: '尧都县',
    coord: [815.1, 1202.5]
  },
  {
    city: true,
    name: '长治',
    coord: [1336.6, 1222.4]
  },
  {
    name: '长子县',
    coord: [1251, 1256.2]
  },
  {
    name: '沁源县',
    coord: [1133.1, 1121.2]
  },
  {
    name: '武乡县',
    coord: [1353, 1094.8]
  },
  {
    name: '襄垣县',
    coord: [1398.1, 1142.4]
  },
  {
    name: '壶关县',
    coord: [1435.8, 1282.8]
  },
  {
    name: '屯留县',
    coord: [1258.3, 1155.4]
  },
  {
    name: '潞州区',
    coord: [1371.2, 1212.7]
  },
  {
    name: '潞城区',
    coord: [1405.4, 1197.7]
  },
  {
    name: '上党区',
    coord: [1303.9, 1310.6]
  },
  {
    city: true,
    name: '运城',
    coord: [492, 1367]
  },
  {
    name: '河津市',
    coord: [410.9, 1249.3]
  },
  {
    city: true,
    name: '晋城',
    coord: [1137, 1376]
  },
  {
    name: '高平市',
    coord: [1186.7, 1326.3]
  },
  {
    name: '泽州县',
    coord: [1185.2, 1390.3]
  },
  {
    name: '沁水县',
    coord: [917.3, 1348.7]
  },
  {
    name: '阳城县',
    coord: [986.3, 1394.9]
  },
  {
    name: '陵川县',
    coord: [1346.6, 1407.8]
  }
]

const datas = {
  from: [1381.1, 766.7],
  to: provinces.filter(item => item.city === true).map((item, index) => {
    item.value = index % 2 === 0 ? 1 : 10
    if (item.coord[0] < 1380) {
      item.lineStyle = {
        curveness: -0.3
      }
    }
    return item
  }),
  other: provinces.filter(item => item.city === undefined)
};

console.log(datas)

option = {
  backgroundColor: '#040b1c',
  tooltip: {
    show: false,
    trigger: 'item',
    backgroundColor: 'rgba(166, 200, 76, 0.82)',
    borderColor: '#FFFFCC',
    showDelay: 0,
    hideDelay: 0,
    enterable: true,
    transitionDuration: 0,
    extraCssText: 'z-index:100',
    formatter: function (params, ticket, callback) {
      console.log(params);
      //根据业务自己拓展要显示的内容
      var res = '';
      var name = params.name;
      var value = params.value[params.seriesIndex + 1] || params.value;
      res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value;
      return res;
    },
  },
  visualMap: {
    //图例值控制
    min: 1,
    max: 10,
    calculable: true,
    show: false,
    color: ['#f44336', '#00eaff'],
    textStyle: {
      color: '#fff',
    },
  },
  geo: {
    left: 10,
    right: 10,
    map: 'organ_diagram',
    itemStyle: {
      borderWidth: 0,
    },
    emphasis: {
      focus: 'none',
      itemStyle: {
        areaColor: '#ffffff',
      },
      label: {
        show: false,
      },
    },
    regions: [
      {
        name: 'map11',
        itemStyle: {
          areaColor: 'red',
          color: 'red',
        },
      },
    ],
  },
  series: [
    {
      type: 'lines',
      coordinateSystem: 'geo',
      z: 1,
      zlevel: 2,
      animation: false,
      effect: {
        show: true,
        period: 6,
        trailLength: 0.6,
        symbolSize: 10,
        symbol: 'pin',
        loop: true,
      },
      lineStyle: {
        width: 1,
        curveness: 0.3,
      },

      data: datas.to.map((item) => {
        return {
          lineStyle: item.lineStyle || {},
          coords: [datas.from, item.coord],
          name: item.name,
          value: item.value,
        };
      }),
    },
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: {
        //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4, //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        show: false,
        position: 'right', //显示位置
        offset: [5, 0], //偏移设置
        formatter: function (params) {
          //圆环显示文字
          return params.data.name;
        },
        fontSize: 13,
      },
      emphasis: {
        show: true,
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 5; //圆环大小
      },
      itemStyle: {
        show: false,
        color: '#f00',
      },
      data: datas.to.map(function (item) {
        return {
          name: item.name,
          value: [...item.coord, item.value],
        };
      }),
      tooltip: {
        formatter: (params) => {
          return params.name;
        },
      },
    },
    //被攻击点
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: {
        //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4, //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        show: false,
        position: 'right',
        //offset:[5, 0],
        color: '#0f0',
        formatter: '{b}',
        textStyle: {
          color: '#0f0',
        },
      },
      emphasis: {
        show: true,
        color: '#f60',
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 5; //圆环大小
      },
      data: [
        {
          name: '平阳',
          value: [...datas.from, 10],
        },
      ],
      tooltip: {
        formatter: (params) => {
          return params.name;
        },
      },
    },
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 3,
      rippleEffect: {
        //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 1, //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        show: false,
        position: 'right',
        //offset:[5, 0],
        color: '#0f0',
        formatter: '{b}',
        textStyle: {
          color: '#0f0',
        },
      },
      emphasis: {
        show: true,
        color: '#f60',
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 5; //圆环大小
      },
      data: datas.other.map(function (item, index) {
        const color = index % 2 === 0 ? 'red' : 'yellow'
        return {
          name: item.name,
          value: [...item.coord, 1],
          itemStyle: {
            color
          }
        };
      }),
      tooltip: {
        formatter: (params) => {
          return params.name;
        },
      },
    },
  ],
};

myChart.setOption(option);

myChart.on('click', function (event) {
  console.log(event);
  myChart.dispatchAction({
  type: 'highlight',
  geoIndex: 0,
  name: event.name,
  });
});

百度echarts雷达图radar根据分数点显示每个不同颜色

百度ECharts文档官网介绍

百度echarts柱状图设置不同颜色（每根柱子一种颜色）

百度echarts图表数据为空如何展示"暂无数据"

百度echarts柱状图/折线图x轴显示全部文本（太长自动换行）

标签： 3d地图, 百度echarts

上面是“百度echarts如何做一个3D地图线路流向图”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2885.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！