Vue环境下用ECharts绘制中国地图，并实现拖动

//标题组件

title: {

show: true,

text: ‘全国各省份旅游景点(已评级)数量’,

subtext: ‘截至到2021年12月’,

left: “center”,

top: 16,

},

//提示框组件

tooltip: {

show: true,

//触发类型：数据项图形触发

trigger: ‘item’,

padding: 10,

borderWidth: 1,

borderColor: ‘#409eff’,

backgroundColor: ‘rgba(255,255,255,0.4)’,

textStyle: {

color: ‘#000000’,

fontSize: 12

},

//提示框内容格式器

formatter: (e) => {

let data = e.data;

//此处将各等级景点数量表示为0-10内的随机整数

data.five = Math.random() * 10 | 0;

data.four = Math.random() * 10 | 0;

data.three = Math.random() * 10 | 0;

data.two = Math.random() * 10 | 0;

data.one = Math.random() * 10 | 0;

//景点数量 - 五个等级之和

data.number = data.five + data.four + data.three + data.two + data.one;

//字符串模板

let context = `

${data.name}

景点数量 : ${data.number}处

5A级 : ${data.five}处

4A级 : ${data.four}处

3A级 : ${data.three}处

2A级 : ${data.two}处

1A级 : ${data.one}处

`;

return context;

}

},

//视觉映射组件(左下角)

visualMap: {

show: true,

left: 26,

bottom: 40,

showLabel: true,

// 是否显示拖拽用的手柄