Echarts公交路线

效果图：

安装：

安装echarts：
cnpm install echarts // 或者指定版本echarts@5.4.3

安装jQuery:
cnpm install jquery // 或者指定版本jquery@3.7.1

配置代理：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    // port: 80,
    // host: '0.0.0.0',
    proxy: {
      // 代理
      '/api': {
        target: 'https://echarts.apache.org/examples',
        changeOrigin: true,
        pathRewrite: { // 路径重写
          '^/api': '' // 选择忽略拦截器里面的内容
        }
      }
    }
  }
})

对应vue的代码：

<template>
  <div id="main" style="width: 100vw;height: 100vh;">
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts/extension/bmap/bmap'
import $ from 'jquery'
export default {
  name: 'my-earth',
  mounted () {
    this.initEchart()
  },
  methods: {
    initEchart () {
      // eslint-disable-next-line no-unused-vars
      const app = {}
      const chartDom = document.getElementById('main')
      const myChart = echarts.init(chartDom)
      let option
      $.get('/api/data/asset/data/lines-bus.json', function (data) {
        const hStep = 300 / (data.length - 1)
        const busLines = [].concat.apply(
          [],
          data.map(function (busLine, idx) {
            let prevPt = []
            const points = []
            for (let i = 0; i < busLine.length; i += 2) {
              let pt = [busLine[i], busLine[i + 1]]
              if (i > 0) {
                pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]]
              }
              prevPt = pt
              points.push([pt[0] / 1e4, pt[1] / 1e4])
            }
            return {
              coords: points,
              lineStyle: {
                normal: {
                  color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
                }
              }
            }
          })
        )
        myChart.setOption(
          (option = {
            bmap: {
              center: [116.46, 39.92],
              zoom: 10,
              roam: true,
              mapStyle: {
                styleJson: [
                  {
                    featureType: 'water',
                    elementType: 'all',
                    stylers: {
                      color: '#031628'
                    }
                  },
                  {
                    featureType: 'land',
                    elementType: 'geometry',
                    stylers: {
                      color: '#000102'
                    }
                  },
                  {
                    featureType: 'highway',
                    elementType: 'all',
                    stylers: {
                      visibility: 'off'
                    }
                  },
                  {
                    featureType: 'arterial',
                    elementType: 'geometry.fill',
                    stylers: {
                      color: '#000000'
                    }
                  },
                  {
                    featureType: 'arterial',
                    elementType: 'geometry.stroke',
                    stylers: {
                      color: '#0b3d51'
                    }
                  },
                  {
                    featureType: 'local',
                    elementType: 'geometry',
                    stylers: {
                      color: '#000000'
                    }
                  },
                  {
                    featureType: 'railway',
                    elementType: 'geometry.fill',
                    stylers: {
                      color: '#000000'
                    }
                  },
                  {
                    featureType: 'railway',
                    elementType: 'geometry.stroke',
                    stylers: {
                      color: '#08304b'
                    }
                  },
                  {
                    featureType: 'subway',
                    elementType: 'geometry',
                    stylers: {
                      lightness: -70
                    }
                  },
                  {
                    featureType: 'building',
                    elementType: 'geometry.fill',
                    stylers: {
                      color: '#000000'
                    }
                  },
                  {
                    featureType: 'all',
                    elementType: 'labels.text.fill',
                    stylers: {
                      color: '#857f7f'
                    }
                  },
                  {
                    featureType: 'all',
                    elementType: 'labels.text.stroke',
                    stylers: {
                      color: '#000000'
                    }
                  },
                  {
                    featureType: 'building',
                    elementType: 'geometry',
                    stylers: {
                      color: '#022338'
                    }
                  },
                  {
                    featureType: 'green',
                    elementType: 'geometry',
                    stylers: {
                      color: '#062032'
                    }
                  },
                  {
                    featureType: 'boundary',
                    elementType: 'all',
                    stylers: {
                      color: '#465b6c'
                    }
                  },
                  {
                    featureType: 'manmade',
                    elementType: 'all',
                    stylers: {
                      color: '#022338'
                    }
                  },
                  {
                    featureType: 'label',
                    elementType: 'all',
                    stylers: {
                      visibility: 'off'
                    }
                  }
                ]
              }
            },
            series: [
              {
                type: 'lines',
                coordinateSystem: 'bmap',
                polyline: true,
                data: busLines,
                silent: true,
                lineStyle: {
                  // color: '#c23531',
                  // color: 'rgb(200, 35, 45)',
                  opacity: 0.2,
                  width: 1
                },
                progressiveThreshold: 500,
                progressive: 200
              },
              {
                type: 'lines',
                coordinateSystem: 'bmap',
                polyline: true,
                data: busLines,
                lineStyle: {
                  width: 0
                },
                effect: {
                  constantSpeed: 20,
                  show: true,
                  trailLength: 0.1,
                  symbolSize: 1.5
                },
                zlevel: 1
              }
            ]
          })
        )
      })

      option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

注意：

此dome需要用百度在百度申请一个ak也就是秘钥，然后放在public的html文件当中，并且注意一点就是注意api?v=3.0，如果用百度的1.0是出不来的

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的ak"></script>