vue3echarts展示

<div id="user_region" style="height: 600px; width: 100%"></div>

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}件<br/>`;

});

}

if (params.data.level && params.data.level.length > 0) {

params.data.level.forEach((item) => {

console.log(item, "8888");

ZRtitletwo += `{item.name}:{item.value}件<br/>`;

});

}

}

return (

params.name +

"<br>" +

"事件类型" +

"<br>" +

ZRtitle +

"事件级别" +

"<br>" +

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;

}

};

相关推荐
我是ed3 分钟前
# vue3 实现甘特图
前端
m0_6161884922 分钟前
el-table的隔行变色不影响row-class-name的背景色
前端·javascript·vue.js
zheshiyangyang23 分钟前
Vue3组件数据双向绑定
前端·javascript·vue.js
xw51 小时前
uni-app项目支付宝端Input不受控
前端·uni-app·支付宝
大翻哥哥1 小时前
Python上下文管理器进阶指南:不仅仅是with语句
前端·javascript·python
IT_陈寒1 小时前
React 性能优化必杀技:这5个Hook组合让你的应用提速50%!
前端·人工智能·后端
再吃一根胡萝卜2 小时前
Git 强制推送指南:新手必读的「危险操作」解析
前端
诚实可靠王大锤2 小时前
react-native项目通过华为OBS预签名url实现前端直传
前端·react native·华为
Monly212 小时前
Vue:下拉框多选影响行高
前端·javascript·vue.js
是罐装可乐2 小时前
前端架构知识体系:Source Map 的用法和全面解析
前端·映射·前端架构·代码安全·源码地图·source-map