echarts 绘制中国地图
**1.引入echarts**
npm install echarts
import echarts from 'echarts'
**2.引入地图china.js(网上自行搜索下载吧)**
**3.编写代码**
准备chart对象,dataMap数据
// dataMap: [
// { name: "北京", value: "100" },
// { name: "天津", value: this.randomData() },
// { name: "上海", value: this.randomData() },
// { name: "重庆", value: this.randomData() },
// { name: "河北", value: this.randomData() },
// { name: "河南", value: this.randomData() },
// { name: "云南", value: this.randomData() },
// { name: "辽宁", value: this.randomData() },
// { name: "黑龙江", value: this.randomData() },
// { name: "湖南", value: this.randomData() },
// { name: "安徽", value: this.randomData() },
// { name: "山东", value: this.randomData() },
// { name: "新疆", value: this.randomData() },
// { name: "江苏", value: this.randomData() },
// { name: "浙江", value: this.randomData() },
// { name: "江西", value: this.randomData() },
// { name: "湖北", value: this.randomData() },
// { name: "广西", value: this.randomData() },
// { name: "甘肃", value: this.randomData() },
// { name: "山西", value: this.randomData() },
// { name: "内蒙古", value: this.randomData() },
// { name: "陕西", value: this.randomData() },
// { name: "吉林", value: this.randomData() },
// { name: "福建", value: this.randomData() },
// { name: "贵州", value: this.randomData() },
// { name: "广东", value: this.randomData() },
// { name: "青海", value: this.randomData() },
// { name: "西藏", value: this.randomData() },
// { name: "四川", value: this.randomData() },
// { name: "宁夏", value: this.randomData() },
// { name: "海南", value: this.randomData() },
// { name: "台湾", value: this.randomData() },
// { name: "香港", value: this.randomData() },
// { name: "澳门", value: this.randomData() },
// { name: "南海诸岛", value: this.randomData() }
// ],
randomData() {
return Math.round(Math.random() * 500);
},
**4.渲染地图**
// 中国地图
drawChinaMap() {
this.chart = this.$echarts.init(document.getElementById("chinaMap"));
this.chart.setOption({
tooltip: {
trigger: 'item',
formatter: (params) => {
var info =
'<p style="font-size:16px">' +
params.name +
"<br/>" +
this.$t('public.number')+':' +
params.value;
return info;
},
textStyle: { color: "#fff" } //提示标签字体颜色
},
//左侧小导航图标
visualMap: {
show: true,
x: "left",
y: "bottom",
left: "left",
min: 0,
max: 100,
splitList: [
{ start: 40, end: 100 },
{ start: 30, end: 40 },
{ start: 20, end: 30 },
{ start: 10, end: 20 },
{ start: 0, end: 10 },
],
//左下角范围
inRange: {
color: ["#ffffff", "#e4736f"],
},
text: ["High", "Low"],
calculable: true,
// color: [
// "#5475f5",
// "#9feaa5",
// "#85daef",
// "#74e2ca",
// "#e6ac53",
// "#9fb5ea",
// ]
},
grid: {
right: 10,
top: "3%",
width: "20%"
},
series: [
{
// name: "中国",
type: "map",
aspectScale:1,
zoom:1.23,
mapType: "china",
itemStyle: {
normal: {
areaColor: 'lightblue',
borderColor: 'rgba(0, 0, 0, 0.2)'
}
},
label: {
normal: {
textStyle: {
fontSize: 11
},
//show: true //显示省份标签
},
emphasis: {
show: true //对应的鼠标悬浮效果
}
},
data: this.dataMap,
nameMap: this.nameMap,
nameProperty:'name'
}
],
geo: {
// roam: true,
map: "china",
right: "right",
left: "right",
// layoutSize: '80%',
label: {
emphasis: {
}
},
itemStyle: {
borderColor: 'rgba(0, 0, 0, 0.2)',
emphasis: {
// areaColor: "#fff464"
}
}
}
});
window.addEventListener("resize", this.resizeHandler, true);
},
**5.参数重点说明**
nameMap这个属性配置是用于中英文转换的:
①在中文情况下,不需要做处理
②在英文情况下,返回的数据是
因此需要一组与此对应的中文数据,放在nameMap中,实现中英文转换(此处对应的是name)。
情人节两更,估计也没啥人看,就当自己记笔记了。