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;

}

};

相关推荐
@PHARAOH1 分钟前
HOW - prefetch 二级页面实践
前端·javascript·react.js
EF@蛐蛐堂2 分钟前
WUJIE VS QIANKUN 微前端框架选型(一)
前端·vue.js·微服务·架构
咚咚咚小柒10 分钟前
【前端】用el-popover做通用悬停气泡(可设置弹框宽度)
前端·javascript·vue.js·elementui·html·scss
Ares-Wang11 分钟前
CSS3》》 transform、transition、translate、animation 区别
前端·css·css3
fsnine24 分钟前
Python Web框架对比与模型部署
开发语言·前端·python
广州华水科技41 分钟前
单北斗GNSS形变监测系统在桥梁安全中的应用与技术解析
前端
打小就很皮...1 小时前
ShowCountCard 功能迭代:新增周月对比属性,完善数据可视化场景
前端·react.js·信息可视化
IT_陈寒1 小时前
Redis性能翻倍的7个冷门技巧:从P5到P8都在偷偷用的优化策略!
前端·人工智能·后端
Moonbit1 小时前
MoonBit Meetup 丨 手把手带你走进 AI 编程新世代
前端·后端·程序员
携欢1 小时前
PortSwigger靶场之 CSRF where token is not tied to user session通关秘籍
前端·csrf