Echart 地图 单独显示某个选中效果,高亮
最开始看网上说设置数据中的selected: true,但发现无效,然后下图是修改后代码,设置数据中的selected: true, 原本选中样式是写在geo里,然后coordinateSystem: ‘geo’, 这样引用,导致无法生效。事件名称() {let self = this;let myChart = echarts.init(this.$refs.myEchart); //这里是为了
·
最开始看网上说设置数据中的selected: true,但发现无效,
然后下图是修改后代码,设置数据中的selected: true, 原本选中样式是写在geo里,然后coordinateSystem: ‘geo’, 这样引用,导致无法生效。
事件名称() {
let self = this;
let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
let mapName = pinyin.getFullChars(this.provinceName).toLowerCase()
let provinceName = ‘地图json文件’// 地图json文件
echarts.registerMap('china', provinceName);
let options = {
series: [{
type: 'map',
geoIndex: 0,
showLegendSymbol: false, // 存在legend时显示
data:[
{name: '广州市', selected: true, value: 100 }
],
zlevel: 1,
map: 'china', // 表示中国地图
center: [中心经纬度],
roam: true,
scaleLimit:{min:1,max:5},
zoom: 2,
label: {
normal: {
show: false, // 是否显示对应地名
},
emphasis: {
show : true,
textStyle : {
color : 'rgba(0,0,0,1)'
}
}
},
// 关键代码
itemStyle: {
normal: {
areaColor: '#fdefdd',
shadowBlur: 1,
borderWidth: 0.5,//设置外层边框
borderColor: '#347b68',//轮廓颜色
shadowColor: '#a9c5c5'//轮廓阴影颜色
},
emphasis: {
areaColor: '#f7f4ed',
shadowBlur: 10,
}
}
}]
};
myChart.setOption(options);
},
更多推荐
已为社区贡献1条内容
所有评论(0)