这篇博客展示了如何在vue应用中利用echarts库，特别是vue-echarts组件，来创建一个动态更新的中国地图。通过监听dataMap属性的变化，实时更新地图上各个省份的值，同时设置视觉映射来突出数据的差异。地图样式定制包括区域颜色、边框颜色等，并对特定省份设定了初始值为0。
.echarts{
width: 100%;
height: 100%;
}
export default {
watch: {
dataMap(newVal, oldVal) {
if (newVal !== oldVal) {
let finSeriesData = []
for (let i = 0; i < newVal.data.length; i++) {
finSeriesData.push({ 'name': newVal.data[i].province, 'value': newVal.data[i].provinum })
}
this.option.series[0].data = finSeriesData
this.option.visualMap.max = finSeriesData[0].value
// console.log(this.option)
}
}
},
props: ['dataMap'],
data: function() {
return {
option: {
tooltip: {
trigger: 'item'
},
position: ['0%', '100%'],
g
最低0.47元/天 解锁文章
扫一扫
330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
