label: {
normal: {
show: true,
formatter: function (params) {
var icon = params.data.value[1] ? 'up' : 'down';
var valueType = params.data.value[1] ? 'valueUp' : 'valueDown';
return params.name
+ '：{' + valueType + '|' + params.value + '} {' + icon + '|}';
},
position: 'inside',
backgroundColor: '#fff',
padding: [4, 5],
borderRadius: 3,
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.5)',
color: '#777',
rich: {
valueUp: {
color: '#019D2D',
fontSize: 14
},
valueDown: {
color: 'red',
fontSize: 14
},
up: {
height: 14,
align: 'center',
backgroundColor: {
image: weatherIcons.up
}
},
down: {
height: 14,
align: 'center',
backgroundColor: {
image: weatherIcons.down
}
}
}
},
emphasis: {
show: true
}
},// 在 webpack:// 这个域下可以看到可调式的 vue 文件。
let echarts = require('echarts')
// 一定要有这个引入，才能把中国地图画出来，不然只有右下角的小岛，好好笑。
require('echarts/map/js/china.js')
export default {
name: 'index',
data () {
return {
msg: 'abc'
}
},
mounted () {
this.renderChart()
},
methods: {
renderChart () {
// 基于准备好的dom，初始化echarts实例
let mapDom = this.$el.querySelector('#map')
// 或者也可以使用 html5 的 api
// let mapDom = document.getElementById('map')
let myChart = echarts.init(mapDom)
let option = {
backgroundColor: ' #cceeff',
title: {
show: true,
text: '123',
subtext: '内部数据请勿外传',
left: 'center',
textStyle: {
color: '#000'
},
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
},
tooltip: {
trigger: 'item'
},
// legend 表示不同 series 的 symbol，颜色和名字，可以通过点击 legend 决定哪些系列不显示
legend: {
orient: 'vertical',
left: 'left',
top: 'middle',
// data: ['成交数据'],
textStyle: {
color: '#fff'
},
animation: true
},
// 视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。实际上就是提供一个调节（throttle）本 chart 数据显示阈值的阀门。
visualMap: {
min: 0,
max: 2500,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
// 是否显示可调节手柄作为阀门
calculable: true
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: true},
restore: {show: true},
saveAsImage: {show: true},
magicType: {
// type: ['line', 'bar', 'stack', 'tiled']
}
}
},
geo: {
// type: 'map',
map: 'china',
roam: true,
nameMap: {
'China': '中国'
},
label: {
normal: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.4)'
}
}
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 1,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
animation: true,
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut',
series: [
{
name: '成交',
type: 'map',
roam: true,
// 这个配置是必须的
geoIndex: 0,
label: {
normal: {
show: true,
formatter: function (params) {
return params.name + ': ' + params.value
}
}
},
data: [
{name: '北京', value: 1},
{name: '天津', value: 5},
{name: '上海', value: 9},
{name: '重庆', value: 1},
{name: '河北', value: 10},
{name: '河南', value: 1},
{name: '云南', value: 1},
{name: '辽宁', value: 1},
{name: '黑龙江', value: 11},
{name: '湖南', value: 14},
{name: '安徽', value: 1},
{name: '山东', value: 1},
{name: '新疆', value: 1},
{name: '江苏', value: 1},
{name: '浙江', value: 1},
{name: '江西', value: 1},
{name: '湖北', value: 51},
{name: '广西', value: 1},
{name: '甘肃', value: 1},
{name: '山西', value: 101},
{name: '内蒙古', value: 1},
{name: '陕西', value: 1000},
{name: '吉林', value: 1},
{name: '福建', value: 1},
{name: '贵州', value: 12},
{name: '广东', value: 1},
{name: '青海', value: 1},
{name: '西藏', value: 1},
{name: '四川', value: 1},
{name: '宁夏', value: 1},
{name: '海南', value: 1},
{name: '台湾', value: 1},
{name: '香港', value: 1},
{name: '澳门', value: 1}
]
}
]
}
// 绘制图表
myChart.setOption(option, true)
}
}
} "echarts": "^4.0.2",
"vue": "^2.5.2",
One-line summary [问题简述]
在官方的 Gallery 中，有一个例子（Rich Text Labels on Map）把可以修改原图里省份的标签为富文本格式。
其中我读下来的关键配置是 series 的 label 标签：
我仿写了一个中国地图的例子，在一个 vue 组件中的内容如下：
程序完全可以正常运行，但无法改变各个省份上的名字，不知道错在哪里
webpack 中的 echart 版本呢和 vue 版本是：
浏览器是最新版本的MacOS 上最新版本的 chrome。