<div id="myChartChina" style="width: 100vw; height: 100vh; margin: auto"></div>
import '@/api/china.js' //导入中国地图
export default {
created() {
this.echarts.init(document.getElementById('myChartChina'))
window.onresize = myChart.resize
myChart.setOption({ // 进行相关配置
backgroundColor: '#02AFDB',
tooltip: {}, // 鼠标移到图里面的浮动提示框
dataRange: {
show: false,
min: 0,
max: 10699111,
text: ['High', 'Low'],
realtime: true,
calculable: true,
color: ['red', 'green', 'pink'],
},
geo: {
// 这个是重点配置区
map: 'china', // 表示中国地图
roam: true, //是否允许缩放
label: {
normal: {
show: true, // 是否显示对应地名
textStyle: {
color: 'rgba(0,0,0,0.4)',
},
},
},
itemStyle: {
normal: {
color: 'rgba(51, 69, 89, .5)', //地图板块默认背景色
borderColor: 'rgba(0, 0, 0, 0.2)',//省市边界线
},
emphasis: {
// color: 'rgba(37, 43, 61, .5)' ,//悬浮背景
areaColor: 'yellow', //地图模块点击后背景色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo', // 对应上方配置
},
{
name: '启动次数', // 浮动框的标题
type: 'map',
geoIndex: 0,
data: [
{ name: '北京', value: 599, },
],
},
],
})
},
},
}
