vue3echarts展示
import {
defineComponent,
toRefs,
reactive,
getCurrentInstance,
ref,
onMounted,
markRaw,
} from "vue";
import * as echarts from "echarts";
onMounted(() => {
getMap();
createRegion();
});
const createRegion = () => {
let mapChartInstance = null;
// 获取地图容器
let mapChart = document.getElementById("user_region");
mapChartInstance = markRaw(
echarts.init(mapChart, undefined, { devicePixelRatio: 2, renderer: "svg" })
);
// 注册地图
echarts.registerMap("China", China);
setTimeout(() => {
mapChartInstance.setOption(options.value);
}, 800);
};
const options = ref({
title: {
left: 10,
top: 10,
textStyle: {
color: "#000",
fontSize: 16,
},
},
visualMap: {
show: false,
min: 0,
max: 10000,
type: "piecewise",
right: 50,
bottom: 20,
inRange: {
//控制颜色深浅
opacity: 0.35,
},
pieces: [
// 自定义每一段的范围，以及每一段的文字
// { gte: 50, color: "#17459e" },
// { gte: 20, lte: 50, color: "#3886e1" },
// { gte: 10, lte: 20, color: "#73b3f3" },
// { gte: 1, lte: 10, color: "#c0ddf9" },
// { lte: 1, color: "#ebedf0" },
],
},
series: [
{
name: "景区",
type: "map",
map: "China",
geoIndex: 0,
//假数据
// data: [
// {
// name: "那曲市",
// value: 1,
// type: [{ name: "2222", value: 1111 }],
// },
// { name: "阿里地区", value: 2, type: [{ name: "42", value: 1231 }] },
// { name: "日喀则市", value: 3, type: [{ name: "5124", value: 333 }] },
// { name: "拉萨市", value: 4, type: [{ name: "345345", value: 3 }] },
// { name: "昌都市", value: 5, type: [{ name: "25435", value: 4 }] },
// { name: "山南市", value: 5, type: [] },
// ],
data: [],
label: {
show: true,
},
},
],
tooltip: {
// 自定义弹窗
// 鼠标引入省份,不断触发.params 对象.当前省份的信息.
formatter: function (params) {
console.log(params, "9999999999999");
let ZRtitle = ``;
let ZRtitletwo = ``;
if (params && params.data) {
if (params.data.type && params.data.type.length > 0) {
params.data.type.forEach((item) => {
console.log(item, "8888");
ZRtitle += `${item.name}:${item.value}件
`;
});
}
if (params.data.level && params.data.level.length > 0) {
params.data.level.forEach((item) => {
console.log(item, "8888");
ZRtitletwo += `${item.name}:${item.value}件
`;
});
}
}
return (
params.name +
"
" +
"事件类型" +
"
" +
ZRtitle +
"事件级别" +
"
" +
ZRtitletwo
);
},
},
geo: {
// 使用地图
map: "China",
label: {
//显示地域标签
show: true,
//标签字体颜色
color: "#ffffff",
},
roam: true,
zoom: 1,
layoutCenter: ["50%", "50%"],
//地图尺寸
layoutSize: "90%",
// 缩放
aspectScale: 1,
itemStyle: {
//区域边框宽度
borderWidth: 0.5,
//区域边框颜色
borderColor: "#d1d1d1",
//区域颜色
areaColor: "#eeeeee",
},
emphasis: {
//高亮状态下的多边形和标签样式
// 控制地图滑过后的颜色
label: {
color: "#fff",
fontSize: 12,
},
itemStyle: {
areaColor: "#1bc1ad",
borderColor: "blue",
},
},
},
});
数据:
const getMap = async () => {
let res = await getCityCount({});
if (res.code == 200) {
options.value.series[0].data = res.data;
}
};