Vue使用Echarts 绘制地图散点

最新推荐文章于 2026-04-09 07:50:56 发布

原创

最新推荐文章于 2026-04-09 07:50:56 发布 · 3.3k 阅读

标签

#vue #html #数据可视化

收录于

//引入

import echarts from "echarts"

//html

 <div class="echarts">  
  <div :style="{height:'800px',width:'100%'}" ref="myEchart"></div>
   </div>

//js

 beforeDestroy() {    if (!this.chart) {      return;    }    this.chart.dispose();    this.chart = null;  },
chinaConfigure () {
  console.log(this.userJson)
  let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
  var data = [
    {name: '海门', value: 9},
    {name: '鄂尔多斯', value: 12},
    {name: '招远', value: 12},
    {name: '舟山', value: 12},
    {name: '齐齐哈尔', value: 14},
    {name: '盐城', value: 15},
    {name: '赤峰', value: 16},
    {name: '青岛', value: 18},
    {name: '乳山', value: 18},
  ]
  var geoCoordMap = {
    '海门':[121.15,31.89],
    '鄂尔多斯':[109.781327,39.608266],
    '招远':[120.38,37.35],
    '舟山':[122.207216,29.985295],
    '齐齐哈尔':[123.97,47.33],
    '盐城':[120.13,33.38],
    '赤峰':[118.87,42.28],
    '青岛':[120