效果展示
代码
json怎么下载可以看之前的echarts map文章 代码中里面图片路径需要自己修改<template><div><div ref="main" id="main"></div></div></template><script>import * as echarts from "echarts";import chinaMap from "@/assets/hangzhou.json";export default {data() {return {map: null,//复制 name与json文件里的name对应后就可以显示valueseriesData: [{ name: "淳安县", value: 1 },{ name: "临安区", value: 1 },{ name: "建德市", value: 2 },{ name: "桐庐县", value: 3 },{ name: "富阳区", value: 1 },{ name: "余杭区", value: 0 },{ name: "萧山区", value: 0 },{ name: "钱塘新区", value: 1 },{ name: "主城区", value: 1000 },{ name: "西湖区", value: 1000 },],};},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,},},series: [{map: "chinaMap",type: "map",label: {show: true,width: 90,height: 25,color: "#1DF9FC",backgroundColor: { image: require('@/assets/map_tip.png') },fontSize: 18,padding: [10, 50, 20, 40],lineHeight: 20,rich: {txt: { align: "left", padding: [40, 0, 0, 10] },sort1: { width: 24, height: 36, color: "#fff", align: "left", padding: [0, 0, 0, 15], verticalAlign: "top", borderRadius: 4, backgroundColor: "#56b279" },txt1: { height: 24, align: "left", verticalAlign: "bottom", color: "#333333" },txt2: { height: 24, width: 30, align: "center", verticalAlign: "bottom", color: "white", padding: [0, 0, 27, 10] },txt3: { height: 24, verticalAlign: "bottom", color: "white", padding: [0, 0, 27, 5] },},formatter(params) {let { dataIndex, data } = params;console.log( dataIndex, data )if (data && data.value) {return `{txt|${data.name}}\n{txt2|${data.value? data.value : '-'}}{txt3|${'|'}}{txt2|${data.value? data.value : '-'}}{txt3|${'|'}}{txt2|${data.value? data.value : '-'}}`}return '2'},},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;}</style>
