先看效果图
地图资源下载地址
// 引入资源
import * as echarts from "echarts";
// import geoJson from "../uilts/zhejiang.json";
import geoJson from "../uilts/china.json";
export default {
data() {
return {
setList: {
business: {
name: "业务量",
data: [
{
value: "110000",
name: "北京市",
province: "11",
},
{
value: "120000",
name: "天津市",
province: "12",
},
{
value: "130000",
name: "河北省",
province: "13",
},
{
value: "140000",
name: "山西省",
province: "14",
},
{
value: "150000",
name: "内蒙古自治区",
province: "15",
},
{
value: "210000",
name: "辽宁省",
province: "21",
},
{
value: "220000",
name: "吉林省",
province: "22",
},
{
value: "230000",
name: "黑龙江省",
province: "23",
},
{
value: "310000",
name: "上海市",
province: "31",
},
{
value: "320000",
name: "江苏省",
province: "32",
},
{
value: "330000",
name: "浙江省",
province: "33",
},
{
value: "340000",
name: "安徽省",
province: "34",
},
{
value: "350000",
name: "福建省",
province: "35",
},
{
value: "360000",
name: "江西省",
province: "36",
},
{
value: "370000",
name: "山东省",
province: "37",
},
{
value: "410000",
name: "河南省",
province: "41",
},
{
value: "420000",
name: "湖北省",
province: "42",
},
{
value: "430000",
name: "湖南省",
province: "43",
},
{
value: "440000",
name: "广东省",
province: "44",
},
{
value: "450000",
name: "广西壮族自治区",
province: "45",
},
{
value: "460000",
name: "海南省",
province: "46",
},
{
value: "500000",
name: "重庆市",
province: "50",
},
{
value: "510000",
name: "四川省",
province: "51",
},
{
value: "520000",
name: "贵州省",
province: "52",
},
{
value: "530000",
name: "云南省",
province: "53",
},
{
value: "540000",
name: "西藏自治区",
province: "54",
},
{
value: "610000",
name: "陕西省",
province: "61",
},
{
value: "620000",
name: "甘肃省",
province: "62",
},
{
value: "630000",
name: "青海省",
province: "63",
},
{
value: "640000",
name: "宁夏回族自治区",
province: "64",
},
{
value: "650000",
name: "新疆维吾尔自治区",
province: "65",
},
{
value: "710000",
name: "台湾省",
province: "71",
},
{
value: "810000",
name: "香港特别行政区",
province: "81",
},
{
value: "820000",
name: "澳门特别行政区",
province: "82",
},
],
},
},
};
},
computed: {
// 生成图表数据
series() {
return [
{
name: "业务量",
type: "map", // 图表类型
map: "china", // 已注册的地图
label: {
show: true, // 显示标注文本
},
data: this.setList.business.data,
},
{
name: "成功率",
type: "map", // 图表类型
map: "china", // 已注册的地图
data: this.setList.business.data,
},
{
name: "失败率",
type: "map", // 图表类型
map: "china", // 已注册的地图
data: this.setList.business.data,
},
];
},
},
methods: {
mapInit() {
// 画布初始化
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
// 隐藏数据刷新动画
myChart.hideLoading();
// 注册可用的地图
echarts.registerMap("china", geoJson);
myChart.setOption({
// 提示框组件
tooltip: {
trigger: "item",
formatter: "{b}<br/>{a}: {c}",
},
// 地理坐标系组件
geo: {
map: "china",
},
// 视觉映射组件（将数据映射到颜色等视觉元素）
visualMap: {
type: "piecewise", // 分段型
min: 0, // 最小值
max: 2000000, // 最大值
text: ["业务量"], // 两端的文本
splitNumber: 5, // 分段数量
maxOpen: true, // 显示 >max 部分
align: "left", // 图形在左，文字在右
showLabel: true, // 显示标注文字
orient: "horizontal", // 水平摆放
inRange: {
color: ["lightskyblue", "yellow", "orange"], //图元颜色区间（自动根据数据进行渐变）
},
},
series: this.series, // 图表数据
});
},
},
mounted() {
this.mapInit(); // 初始化加载
},
watch: {
dataset() {
this.mapInit(); // 自动刷新
},
},
};
自己看的
