vue中使用echarts实现中国地图加城市定位功能
首先这个是承接上个博客中创建的china.json,并在main.js的注册一下.initCityDataPic () {let obj = darkthis.$echarts.registerTheme('dark', obj)//上面的两段是我自己设置的暗色系主题,不需要可以注释掉let...
·
首先这个是承接上个博客中创建的china.json,并在main.js的注册一下.
initCityDataPic () {
let obj = dark
this.$echarts.registerTheme('dark', obj)
//上面的两段是我自己设置的暗色系主题,不需要可以注释掉
let dom = this.$refs.cityDataPic
let myChart = this.$echarts.init(dom, dark) //没有主题就把dark删掉
// console.log(geo)
myChart.setOption({
geo: { //
map: 'china', //此处的china就是之前博客中全局注册的china地图
itemStyle: { // 定义样式
normal: { // 普通状态下的样式
areaColor: '#2D4455', //地图块的颜色
borderColor: '#243440'
},
emphasis: { // 高亮状态下的样式
areaColor: '#1DB47E',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
shadowColor: 'white'
}
}
},
tooltip: {},
legend: {
orient: 'vertical',
left: 'left',
data: ['']
},
selectedMode: 'single', //单选
series: [
{
name: '',
type: 'scatter', //散点系列
coordinateSystem: 'geo', //表明坐标系
center: [115.97, 29.71], /地图中心点
itemStyle: {
normal: {
color: '#1DB47E',
label: {
show: false,
formatter: '{b}',
position: 'right',
textStyle: {
color: "#fff"
}
}
},
emphasis: {
label: {
show: true
}
}
},
label: {
show: false
},
data: [
{ name: '北京', value: [116.46, 39.92, 666] }, //数据格式
{ name: '天津', value: [117.19, 39.08, 123] },
{ name: '上海', value: [121.47, 31.23, 333] },
{ name: '武汉市', value: [114.3, 30.5, 321] },
{ name: '唐山', value: [118.02, 39.63], }
]
}
]
})
}
更多推荐
已为社区贡献14条内容
所有评论(0)