效果展示![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/39d103e8c37e45f21d0bfcbc94c910c4.png)
代码
<template>
<div>
<div ref="main" id="main"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import chinaMap from "@/assets/zhej.json";
export default {
data() {
return {
map: null,
//复制 name与json文件里的name对应后就可以显示value
seriesData: [
{ name: "淳安县", value: 70},
{ name: "临安区", value: 60 },
{ name: "建德市", value: 80 },
{ name: "桐庐县", value: 90 },
{ name: "富阳区", value: 68 },
{ name: "余杭区", value: 65},
{ name: "萧山区", value: 55 },
{ name: "钱塘新区", value: 60 },
{ name: "主城区", value: 61 },
{ name: "西湖区", value: 10 },
],
};
},
mounted() {
this.init();
},
methods: {
//初始化
init() {
this.map = echarts.init(this.$refs.main);
echarts.registerMap("chinaMap", chinaMap);
var option = {
geo: {
map: "chinaMap",
itemStyle: {
borderColor: "rgba(196,223,255,1)",
borderWidth: 2,
shadowColor: "rgba(196,223,255,.8)",
shadowBlur: 20,
shadowOffsetX: 4,
shadowOffsetY: 4,
},
},
visualMap: {
type: "piecewise",
splitNumber: 3,
min:60 ,
max: 89,
align: "left",
right: 20,
bottom: 20,
itemWidth: 60,
itemHeight: 20,
itemGap: 5,
// itemSymbol: 'circle',
orient: "vertical",
//区域颜色
color: ["#0044ff","#00b1ff","#00eaf3"],
//区域颜色范范围
pieces: [
{min: 60, max: 69},
{min: 70, max: 79},
{min: 80, max: 89}
],
textStyle: {
color: "#fff",
fontSize: 14
},
},
series: [
{
map: "chinaMap",
type: "map",
label: {
normal: {
color: "rgba(255,255,255,1)",
show: true,
color: "#fff",
textShadowColor: "rgba(0,0,0,0.5)",
textShadowBlur: 4,
textShadowOffsetX: 0,
textShadowOffsetY: 1,
fontWeight: "normal",
formatter(params) {
// console.log(params)
//seriesData 里面没有的区会显示NaN demo写的不严谨 无所谓了 初始化显示名称
return params.name+params.value
},
},
},
itemStyle: {
borderColor: "rgba(196,223,255,1)",
borderWidth: 2,
areaColor: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(102,172,191,1)",
},
{
offset: 1,
color: "rgba(21,118,145,1)",
},
],
global: false,
},
},
zlevel: 1,
data:this.seriesData
},
],
};
this.map.setOption(option);
},
},
};
</script>
<style scoped>
#main {
width: 800px;
height: 600px;
margin: 0 auto;
background: red;
}
</style>