Vue專案中echarts地圖渲染各個省市級
阿新 • • 發佈:2021-07-13
首先先從下面的網址拿到想要地區的json資料
Vue程式碼
<template> <div class="container" style="height: 100%" ref="container"></div> </template> <script> const echarts = require("echarts"); import "@/utils/guangdong"; //城市json資料 export default { name: "WuxiMap", mounted() {this.initCharts(); }, methods: { initCharts() { const myChart = echarts.init(this.$refs.container); const option = { title: { text: "佛山", }, series: [ { type: "map", map: "佛山", }, ], }; myChart.setOption(option); }, }, };</script> <style lang="scss" scoped> </style>
城市js檔案
(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['exports', 'echarts'], factory); } else if (typeof exports === 'object' && typeofexports.nodeName !== 'string') { // CommonJS factory(exports, require('echarts')); } else { // Browser globals factory({}, root.echarts); } }(this, function (exports, echarts) { var log = function (msg) { if (typeof console !== 'undefined') { console && console.error && console.error(msg); } } if (!echarts) { log('ECharts is not Loaded'); return; } if (!echarts.registerMap) { log('ECharts Map is not loaded') return; } echarts.registerMap('佛山', 城市JSON)}));