Vue3使用Echarts和dataV地图模块

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、引入下载echarts
• 二、下载datav中国地图
• 总结

---

前言

Vue3使用Echarts和dataV地图模块

---

2.读入数据

代码如下（示例）：

<!--  -->
<template>
  <div id="charts" style="width: 600px;height:400px;"></div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import * as echarts from "echarts";
import axios from 'axios';
import zhongguo from "@/../../src/assets/map.json";

onMounted(() => {
  // 实例化对象
  let charts = document.getElementById("charts");
  //为了不是null
  if (!charts) {
    return
  }
  let myChart = echarts.init(charts)
  let option;
  axios({
    url: "xxx",
    method: "get",
  }).then((res2) => {
    res2 = res2.data.data.saleMap.map((item: any) => {
      return {
        name: item.areaName,
        value: item.saleNum,
      };
    });
    console.log(res2);
    myChart.showLoading();
    myChart.hideLoading();
    // 注册地图，China为地图名，chinaMap为地图的json数据
    echarts.registerMap("China", zhongguo);
    option = {
      title: {
        text: "全国销量分布图",
        left: "center",
        textStyle: {
          fontWeight: "normal",
          color: "#000",
        },
      },
      //点到显示文本
      tooltip: {
        //触发类型
        trigger: "item",
        //浮层显示的延迟
        showDelay: 0,
        //提示框浮层的移动动画过渡时间
        transitionDuration: 0.2,
        //背景颜色
        backgroundColor: "rgba(0,0,0,0.7)",
        //提示框浮层的边框宽。
        borderWidth: 0,
        //提示框浮层的文本样式
        textStyle: {
          color: "#fff",
          //文字超出宽度是否截断或者换行'truncate' 截断
          overflow: "truncate",
        },
        //提示框浮层内容格式器 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
        formatter: "{b} <br/> 销量：{c}",
      },
      //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）
      visualMap: {
        left: "left",
        min: 0,
        max: 1000000,
        //是否显示拖拽用的手柄（手柄能拖拽调整选中范围
        calculable: true,
        //定义 在选中范围中 的视觉元素。（用户可以和 visualMap 组件交互，用鼠标或触摸选择范围）
        inRange: {
          color: [
            "#fff",
            "#fcbcb5",
            "#fa8071",
            "#fd6238",
            "#e13c0e",
            "#bb3020",
            "#a52a2a",
          ],
        },
      },
      //树图主要用来可视化树形数据结构，是一种特殊的层次类型，具有唯一的根节点，左子树，和右子树
      series: [
        {
          name: "zhongguo",
          type: "map",
          roam: true,
          map: "China",
          emphasis: {
            label: {
              show: true,
            },
          },
          data: res2,
        },
      ],
    };
    myChart.setOption(option);

  })
  option && myChart.setOption(option);
})

</script>
<style lang='less' scoped>
</style>

该处使用的axios网络请求的数据。

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。