vue+echarts+json绘制地图“绝对干货”

不多说,直接干
在这里插入图片描述
该样式实现及其简单
跟着我做就好了
vue没安装的
回去看基础吧
echarts没安装的

 npm install echarts -s
 //安装echarts包
//main.js 中引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

废话好多,好烦

正儿八经的教程来了

地图下载地址
http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4

//引入页面
import echarts from 'echarts'
import JSON from './jiaxing.json'
//创建容器
<div class="left_center_map" id="main">
//代码最重要的地方
mounted () {
    this.leftCenterMap()
  },

  methods: {
    leftCenterMap () {
      var myChart = echarts.init(document.getElementById('main')) // 拿到一个实例
      echarts.registerMap('嘉兴市', JSON, {})//引入地图文件
      console.log(JSON)
      var option = {
        series: [
          {
            type: 'map',
            mapType: '嘉兴市'//地图名称

          }]
      }
      myChart.setOption(option)
    }
  }

就这么简单,样式还不会改的去官网看示例

关注我,不停地干货给你,我踩过的坑,你丫的少踩

Logo

前往低代码交流专区

更多推荐