echarts 提示框异步获取数据 —— formatter 异步回调函数的使用

简介: echarts 提示框异步获取数据 —— formatter 异步回调函数的使用

核心代码

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

目录
相关文章
|
23天前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
105 1
|
6月前
|
前端开发 算法 数据可视化
怎么在echarts图上左右滑动切换数据区间
怎么在echarts图上左右滑动切换数据区间
216 0
|
2月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
125 23
echarts地图数据信息流向图效果
|
26天前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
48 2
|
23天前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
322 0
|
3月前
|
JavaScript 数据可视化 BI
echarts的使用 超好用的报表制作、数据的图形化展示
您提供的链接是关于echarts使用的博客文章,它介绍了如何使用echarts进行数据的图形化展示,包括制作报表和图表。echarts是一个强大的数据可视化工具,能够创建折线图、柱状图、饼图等多种图表类型。文章还提供了一个Demo演示和项目结构的图片,以及官网链接供读者参考。
echarts的使用 超好用的报表制作、数据的图形化展示
|
3月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
3月前
|
前端开发 数据可视化 JavaScript
【揭秘神器】如何用Pyecharts轻松召唤出Echarts?只需几行Python代码,让你的数据瞬间生动起来!
【8月更文挑战第21天】Pyecharts是一款基于Python的图表生成库,利用Echarts强大的JavaScript可视化能力,让开发者无需编写前端代码即可在Python环境中创建美观图表。本文通过实例演示如何安装Pyecharts并生成一个展示城市气温分布的柱状图,包括基本图表生成及自定义样式设置,如颜色调整、图例显示等,最终将图表嵌入HTML文件展示,适合各水平开发者快速掌握数据可视化技能。
50 0
|
5月前
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts进行一周跑步数据分析,通过雷达图展示多维度指标(如距离、速度、时间),颜色对比体现个人与平均表现。折线图则清晰显示每日里程趋势,代码示例展示了自定义的`radar`和`line`图表配置。图表交互性强,支持点击高亮,动画流畅,提供完整代码资源。#ECharts #跑步数据 #数据可视化
144 3
ECharts综合案例一:近七天跑步数据
|
5月前
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts展示近七天跑步数据,结合雷达图和折线图揭示运动表现。雷达图多维度呈现全程距离、速度和时间,对比平均指标;折线图清晰展示里程趋势。图表具有交互性和动画效果,通过[代码地址](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454698)可获取详情。#ECharts #跑步数据 #数据可视化 #雷达图 #折线图
81 3
ECharts综合案例一:近七天跑步数据