vue 用echarts做中国地图

最新推荐文章于 2025-08-08 13:24:28 发布

zjnkkl

最新推荐文章于 2025-08-08 13:24:28 发布

阅读量385

点赞数

CC 4.0 BY-SA版权

文章标签： echarts vue

本文链接：https://blog.csdn.net/zjnkkl/article/details/120348537

本博客介绍如何在Vue项目中结合Echarts 4.9.0版本绘制中国地图。首先，通过npm安装合适的echarts版本，避免因版本过高缺少地图数据。接着，在main.js全局引入echarts。然后，在具体组件中导入并使用'echarts/map/json/china.json'文件。最后，编写相关代码完成地图展示。

1.npm 下载一个4.9.0版本的echarts，如果下的版本过高，没有地图的json数据
2.在main.js里引入echarts

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import echarts from 'echarts'
import china from 'echarts/map/json/china.json'
echarts.registerMap('china',china)
// const map=require('./view/js/map');

Vue.config.productionTip = false
Vue.prototype.$echarts = echarts
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3.在你需要的界面里引入china.json
require(“echarts/map/json/china.json”);
4.完善代码


drawLine() {
      var myChartContainer = document.getElementById("myChartChina");
      var resizeMyChartContainer = function () {
        myChartContainer.style.width = 100 + "%";
        myChartContainer.style.height = window.innerHeight * 0.7 + "px";
      };
      resizeMyChartContainer();
      var myChartChina = this.$echa