核心代码
let that = this;
// 提示框 tooltip: { // 触发事件 triggerOn: "click", backgroundColor: "transparent", formatter: function(params, ticket, callback) { that.$http({ method: "get", url: "http://jsonplaceholder.typicode.com/users", params: { // 1到10的随机整数 id: Math.ceil(Math.random() * 10) || 1, }, }) .then((res) => { let context = `${params.name}的负责人是${res.data[0].name}</p>`; callback(ticket, context); }); return "数据查询中……"; }, },
最终效果
完整范例代码
<template> <div style="height: 100%;width: 100%" ref="myChart"></div> </template> <script> import echarts from "echarts"; import "./chinaMapOutline.js"; import "./china.js"; export default { methods: { initEchartMap() { let myChart = echarts.init(this.$refs.myChart); let that = this; let options = { // 提示框 tooltip: { // 触发事件 triggerOn: "click", backgroundColor: "transparent", formatter: function(params, ticket, callback) { that.$http({ method: "get", url: "http://jsonplaceholder.typicode.com/users", params: { // 1到10的随机整数 id: Math.ceil(Math.random() * 10) || 1, }, }) .then((res) => { let context = `${params.name}的负责人是${res.data[0].name}</p>`; callback(ticket, context); }); return "数据查询中……"; }, }, series: [ // 中国地图-外轮廓 { type: "map", map: "chinaMapOutline", // 不响应鼠标交互 silent: true, //调整以下3个配置项与页面地图重合 aspectScale: 0.75, // 地图的长宽比 center: [104.2, 35.9], //设置可见中心坐标,以此坐标来放大和缩小 zoom: 1.13, //放大级别 itemStyle: { normal: { // 地图底色 areaColor: "#112B9B", // 高亮边缘+阴影样式 borderWidth: 3, borderColor: "#36E5FE", shadowBlur: 6, shadowColor: "#3484F5", shadowOffsetX: -3, shadowOffsetY: 4, }, }, }, // 中国地图 { type: "map", map: "china", zoom: 1.2, aspectScale: 0.75, label: { // 默认文本标签样式 normal: { color: "white", show: true, }, // 高亮文本标签样式 emphasis: { color: "yellow", fontSize: 22, fontWeight: "bold", }, }, itemStyle: { // 默认区域样式 normal: { // 区域背景透明 areaColor: "transparent", borderColor: "rgba(39,211,233, 1)", borderWidth: 1, }, // 高亮区域样式 emphasis: { // 高亮区域背景色 areaColor: "#01ADF2", }, }, }, ], }; myChart.setOption(options); // 添加窗口大小改变监听事件,当窗口大小改变时,图表会重新绘制,自适应窗口大小 window.addEventListener("resize", function() { myChart.resize(); }); }, }, mounted() { this.$nextTick(() => { this.initEchartMap(); }); }, }; </script>
本范例基于高亮中国地图轮廓范例开发,配套文件下载和组件使用方式详见我的博客
https://blog.csdn.net/weixin_41192489/article/details/120023432