如何在vue脚手架里面使用echarts 组件显示中国地图---亲测
网上查阅好多资料 在 vue里面 有推荐引用
1,引入 China.js文件
import echarts from 'echarts'; import 'echarts/lib/chart/map'; import 'echarts/map/js/china.js';推荐这样使用 但是做出来的效果是缩成一团的 (我已经使用百分比适应屏幕了,所以不存在没有设置宽高的问题)
2,网络请求引入 china.json 效果是出来了 但是一刷新就会报错找不到registerMap方法
3,最终实现方式
按需引入js
// 按需引入基本模板
let echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar'); // 引入柱状图组件
require('echarts/lib/chart/pie'); // 引入饼状图组件
require('echarts/map/js/china.js'); // 引入中国地图组件
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
之后网络请求china.json
request
.get('../../static/js/china.json')
.end((err,res)=>{
if(!err){
echarts.registerMap('china', res.body);
var option = {}
....................
就可以啦
最终效果图