vue echarts 离线datav地图使用
DATAV.GeoAtlas:http://datav.aliyun.com/tools/atlas/index.html下载完成后引入:import guizhou from '../../public/mapJson/贵州省.json'初始化组件:const that = thissetTimeout(() => {var echarts = require('echarts')that
·
DATAV.GeoAtlas:http://datav.aliyun.com/tools/atlas/index.html
下载完成后引入:
import guizhou from '../../public/mapJson/贵州省.json'
初始化组件:
const that = this
setTimeout(() => {
var echarts = require('echarts')
that.graph = echarts.init(document.getElementById('div_graph'))
echarts.registerMap('guizhou', guizhou) // 地图注册
var option = {
tooltip: {
trigger: 'item'
},
// 左下角视觉映射组件
visualMap: {
min: 0, // 最小值
max: 18000, // 最大值
text: ['多', '少'],
realtime: false,
calculable: true,
inRange: {
color: ['#fff', 'yellow', 'orangered']
},
textStyle: {
color: 'rgba(255,255,255,0.8)' //图例文字颜色,大小等配置
},
left: '1%'
},
series: [
{
name: '分布图',
type: 'map',
mapType: 'guizhou',
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
borderColor: '#000'
},
// emphasis: {
// areaColor: '#07caa9'
// }
},
data: this.data,
nameMap: {// 映射名
'遵义市': '遵义',
'铜仁市': '铜仁',
'毕节市': '毕节',
'六盘水市': '六盘水',
'贵阳市': '贵阳',
'安顺市': '安顺',
'黔西南布依族苗族自治州': '黔西南',
'黔东南苗族侗族自治州': '黔东南',
'黔南布依族苗族自治州': '黔南'
}
}
]
}
that.graph.setOption(option,true)
window.addEventListener('resize', () => { that.graphInit() })
// 设置鼠标移入指定省份颜色不变的效果
// that.graph.on('mouseover', function (params) {
// if (params.data.value !== undefined) {
// that.graph.dispatchAction({
// type: 'downplay'
// })
// }
// })
})
效果图:
更多推荐
已为社区贡献1条内容
所有评论(0)