eChart 中柱状图、地图、AntDesign 的滚动条表格、highChart 的（venn）韦恩图

划空破云烟

已于 2022-10-20 16:36:58 修改

阅读量1.3k

点赞数 1

于 2022-10-20 16:09:36 首次发布

本文链接：https://blog.csdn.net/qq_45494569/article/details/127428896

版权

一、echarts 的准备工作

1.下载依赖包

// 项目中下载 依赖
npm install echarts -s

2.引入配置

// 1. main.js 中引入 全局使用 （通过this.$echarts就可以获取到对象）
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;

// 2、在组件里面局部引用
import echarts from 'echarts'; // 这个引入有可能报错 
import * as echarts from 'echarts';  // 这个是新版本的引入方式

3.基本使用

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:600px;margin:auto;border:1px solid red"></div>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {}    

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

4.柱状图（详细）

<template>
	<div class="echart-house-count" style="width: 1000px;height:600px;"> </div>
</template>
<script lang="ts" setup>
    // 数据
    let HouseCountData = ref<any[]>([
        ['product', '住建安全排查', '消防安全排查', '公安排查'],
        ['排查中', '556', '336', '225'],
        ['已排查', '86', '65.2', '82.5'],
    ]);
    // 解决路由跳转后  echarts 不刷新视图
  function initHouseCount() {
    const domMap = document.querySelector('.echart-house-count') as HTMLElement;
    // 解决 切换路由 图标不出来的问题
    domMap.removeAttribute('_echarts_instance_');
    const charts = echarts.init(domMap);
    window.onresize = function () {
      charts.resize();
    };
    charts.setOption({
      // 柱状图的标题  
      title: {
        // text: '房屋栋数统计',
        // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom',
      },
      // 图表的背景颜色
      backgroundColor: '#fff',
      tooltop: {
        trigger: 'axis',
      },
       // 上方按钮 到 顶部的 距离 
      legend: { top: '0%' },
      tooltip: {},
      // 上方按钮 的 颜色
      color: ['#5DF3FF', '#4BBFFD', '#458EB7'],
      // 图表到容器 的 距离
      grid: [{ bottom: '10%' }, { top: '10%' }],  
      dataset: {
        // 柱状图 的 数据
        source: data.HouseCountData,
      },
      xAxis: { type: 'category' },
      // yAxis: [
      //   {
      //     type: 'value',
      //     name: '千个',
      //     axisLabel: {
      //       formatter: function (a) {
      //         a = +a;
      //         return isFinite(a) ? echarts.format.addCommas(+a / 1000) : '';
      //       },
      //     },
      //   },
      // ],
      // y 轴的配置
      yAxis: [
        {
          type: 'value',
          name: '万个',
          position: 'left',
          alignTicks: true,
          axisLine: {
            show: true, // 是否显示 y轴
            lineStyle: { // y轴字体颜色
              color: '#000',
            },
          },
          axisLabel: {
            // formatter: '{value} °C',
            // formatter: '{value}',
            // 自定义 y 轴  (100000  =>  10 万)
            formatter: function (a) {
              a = +a;
              return isFinite(a) ? echarts.format.addCommas(+a / 10000) : '';
            },
          },
        },
      ],
      // 配置图标的类型
      series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
    });
  }
</script>

5.地图 - 支持 - 图例切换（详细）

<template>
	<div class="echart-map-bj" style="width: 1000px;height:600px;"> </div>
</template>
<script lang="ts" setup>
    // 引入 echarts
    import * as echarts from 'echarts';
    // 引入地图的json
    import './bjMap';
    function initCharts() {
    let gaChartsData = data.gaList;
    let zjChartsData = data.zjList;
    let xfChartsData = data.xfList;
    const domMap = document.querySelector('.echart-map-bj') as HTMLElement;
    // 解决 切换路由 图标不出来的问题
    domMap.removeAttribute('_echarts_instance_');
    const charts = echarts.init(domMap);
    // 随着屏幕变化。重置图表
    window.onresize = function () {
      charts.resize();
    };
    charts.setOption({
      backgroundColor: '#fff',
      title: [
        { text: '北京市排查进度统计', left: 'center', top: 10, textStyle: { color: '#000' } },
      ],
      // 图例 （可点击切换）
      legend: {
        top: '20',
        orient: 'vertical',
        left: 'left',
        data: ['住建', '公安', '消防'],
        selectedMode: 'single',
      },
      // 地图 提示框的配置
      tooltip: {
        triggerOn: 'click', // 点击触发
        enterable: true,
        formatter(data) {
          // console.log('#@data', data);
          // console.log('#@data-name', data.name);
          return (
            '<div><p>' +
            data.seriesName +
            ':' +
            data.name +
            '</p><p>已排查：' +
            data.value +
            '</p></div>'
          );
        },
      },
      // 下方的映射（通过数量区间，显示不同的地图区域）
      visualMap: [
        {
          min: 0,
          max: 200000,
          right: 20,
          bottom: 20,
          showLabel: !0,
          text: ['房屋数量 （数量/栋）'],
          backgroundColor: 'rgba(111 ,108 ,108 ,.2)',
          pieces: [
            {
              gte: 20001,
              lte: 200000,
              label: '20001 - 200000',
              color: '#068D98',
            },
            {
              gte: 10001,
              lte: 20000,
              label: '10001 - 20000',
              color: '#54B1B8',
            },
            {
              gte: 5001,
              lte: 10000,
              label: '5001 - 10000',
              color: '#72BEC5',
            },
            {
              gte: 3001,
              lte: 5000,
              label: '3001 - 5000',
              color: '#90CCD1',
            },
            {
              gte: 1001,
              lte: 3000,
              label: '1001 - 3000',
              color: '#9BD1D6',
            },
            {
              gte: 501,
              lte: 1000,
              label: '501 - 1000',
              color: '#C1E2E5',
            },
            {
              gte: 0,
              lte: 500,
              label: '0 - 500',
              color: '#E6F3F4',
            },
          ],
          show: !0,
        },
        // 可以使用 lt（小于，little than），gt（大于，greater than），lte（小于等于 lettle than or equals），gte
        // {
        //   // 映射-颜色值
        //   left: 90,
        //   orient: 'vertical', // 分段方向:horizontal水平
        //   type: 'piecewise', // 分段
        //   backgroundColor: 'rgba(111 ,108 ,108 ,.2)',
        //   padding: [50, 20, 20, 20],
        //   pieces: [
        //     // 配置颜色区间
        //     { min: 0, max: 50, color: '#E6F3F4' },
        //     { min: 51, max: 100, color: '#C1E2E5' },
        //     { min: 101, max: 150, color: '#9BD1D6' },
        //     { min: 151, max: 200, color: '#90CCD1' },
        //     { min: 201, max: 250, color: '#72BEC5' },
        //     { min: 251, max: 300, color: '#54B1B8' },
        //     { min: 301, max: 350, color: '#068D98' },
        //   ],
        // },
      ],
      // 设置 图例（点击的按钮） 的 颜色
      color: ['#008A96', '#91CC75', '#FAC858'],
      series: [
        {
          name: '住建',
          type: 'map',
          map: 'bj',
          top: '10%',
          roam: false, // 是否放大缩小
          zoom: 1, // 视图比例
          aspectScale: 0.75,
          label: {
            // normal: {
            show: true,
            // textStyle: {
            fontSize: 12, // 地图上的字体大小
            color: 'rgba(0,0,0,0.4)',
            // },
            // },
          },
          itemStyle: {
            // normal: {
            // 颜色值 、边框值
            areaColor: '#fff', // 默认的区域颜色
            borderColor: 'rgba(0,0,0,0.2)', // 默认的边框颜色
            // },
            // 选中后的配置
            emphasis: {
              itemStyle: {
                areaColor: 'rgba(225,180,0,0.8)', // 选中后的区域颜色
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)', // 选中后的阴影颜色
              },
            },
          },
          // data: gaChartsData,
          data: [
            { name: '海淀区', value: 50 },
            { name: '昌平区', value: 193 },
          ],
        },
        {
          name: '公安',
          type: 'map',
          map: 'bj',
          top: '20%',
          roam: false, // 是否放大缩小
          zoom: 1.2, // 视图比例
          aspectScale: 0.75,
          label: {
            // normal: {
            show: true,
            // textStyle: {
            fontSize: 12, // 地图上的字体大小
            color: 'rgba(0,0,0,0.4)',
            // },
            // },
          },
          itemStyle: {
            // normal: {
            // 颜色值 、边框值
            areaColor: '#fff', // 默认的区域颜色
            borderColor: 'rgba(0,0,0,0.2)', // 默认的边框颜色
            // },
            // 选中后的配置
            emphasis: {
              itemStyle: {
                areaColor: 'rgba(225,180,0,0.8)', // 选中后的区域颜色
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)', // 选中后的阴影颜色
              },
            },
          },
          // data: zjChartsData,
           data: [
            { name: '顺义区', value: 300 },
             { name: '石景山区', value: 326 },
          ],
        },
        {
          name: '消防',
          type: 'map',
          map: 'bj',
          top: '20%',
          roam: false, // 是否放大缩小
          zoom: 1.2, // 视图比例
          aspectScale: 0.75,
          label: {
            // normal: {
            show: true,
            // textStyle: {
            fontSize: 12, // 地图上的字体大小
            color: 'rgba(0,0,0,0.4)',
            // },
            // },
          },
          itemStyle: {
            // normal: {
            // 颜色值 、边框值
            areaColor: '#fff', // 默认的区域颜色
            borderColor: 'rgba(0,0,0,0.2)', // 默认的边框颜色
            // },
            // 选中后的配置
            emphasis: {
              itemStyle: {
                areaColor: 'rgba(225,180,0,0.8)', // 选中后的区域颜色
                shadowOffsetX: 0,s
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)', // 选中后的阴影颜色
              },
            },
          },
          //  data: xfChartsData,
           data: [
             { name: '东城区', value: 193 },
             { name: '西城区', value: 303 },
          ],
        },
      ],
    });
    // charts.on('click', function (params: any) {
    //   console.log('@click222', params);
    // });
  }
</script>

6.滚动条表格（详细）

<template>
	 <div class="r-table">
        <a-table
          :columns="tableColumns"
          :dataSource="tableData"
          bordered
          :pagination="false"
          :scroll="{ y: tableHight }"
        />
      </div>
</template>
<script lang="ts" setup>
    let data = reactive<{ tableData: any[]; tableColumns: any[]; chartsData: any[] }>({
        // 表格数据
        tableData: [
            { key: 1, id: `1`, name: '海淀区', age: 23, address: `22`, address1: `12%` },
            { key: 2, id: `2`, name: '顺义区', age: 43, address: `45`, address1: `35%` },
            { key: 3, id: `3`, name: '朝阳区', age: 53, address: `55`, address1: `55%` },
            { key: 4, id: `4`, name: '石景山区', age: 23, address: `32`, address1: `72%` },
            { key: 5, id: `5`, name: '东城区', age: 66, address: `46`, address1: `86%` },
            { key: 6, id: `6`, name: '西城区', age: 78, address: `52`, address1: `92%` },
            { key: 7, id: `7`, name: '怀柔区', age: 23, address: `18`, address1: `48%` },
            { key: 8, id: `8`, name: '延庆区', age: 67, address: `66`, address1: `36%` },
            { key: 9, id: `9`, name: '密云区', age: 89, address: `33`, address1: `38%` },
            { key: 10, id: `10`, name: '昌平区', age: 23, address: `18`, address1: `48%` },
            { key: 11, id: `11`, name: '平谷区', age: 67, address: `66`, address1: `36%` },
            { key: 12, id: `12`, name: '门头沟区', age: 89, address: `33`, address1: `38%` },
            { key: 13, id: `13`, name: '丰台区', age: 89, address: `33`, address1: `38%` },
            { key: 14, id: `14`, name: '通州区', age: 89, address: `33`, address1: `38%` },
            { key: 15, id: `15`, name: '房山区', age: 89, address: `33`, address1: `38%` },
            { key: 16, id: `16`, name: '大兴区', age: 89, address: `33`, address1: `38%` },
        ],
        tableColumns: [
            { title: '序号', width: 70, dataIndex: 'id', key: 'id', fixed: 'left' },
            { title: '行政区', width: 90, dataIndex: 'name', key: 'name' },
            { title: '自建房', width: 80, dataIndex: 'age', key: 'age' },
            { title: '排查隐患', dataIndex: 'address', key: '1', width: 180 },
            { title: '消防安全', dataIndex: 'address', key: '2', width: 100 },
            { title: '已排查', dataIndex: 'address', key: '3', width: 100 },
            { title: '正确率', dataIndex: 'address1', key: '7', width: 80, fixed: 'right' },
        ]
    });
    let { tableData, tableColumns } = toRefs(data);
    const tableHight = ref<number>(560);
    // 获取 整容器的高度 再减去 表头、标题的高度就是 表格内容的高度
    function getDom() {
        const domMap = document.querySelector('.t-center') as HTMLElement;
        tableHight.value = domMap.scrollHeight - 88;
    }
    onMounted(() => {
        getDom()
    }
</script>

二、echarts 下钻到区

1.echart 下钻到区（params 路由跳转）

<template>
	<div class="echart-map-bj"></div>
</template>
<script setup lang="ts">
    import * as echarts from 'echarts';
    import './bjMap';
    function initCharts() {
        // let chartsData = data.chartsData;
        // console.log('@ooo', chartsData);
        const domMap = document.querySelector('.echart-map-bj') as HTMLElement;
        // 解决 切换路由 图表不出来的问题
        domMap.removeAttribute('_echarts_instance_');
        const charts = echarts.init(domMap);
        window.onresize = function () {
            charts.resize();
        };
        charts.setOption({
            backgroundColor: '#fff',
            title: [
                { text: '北京市排查进度统计', left: 'center', top: 10, textStyle: { color: '#000' } },
                // 设置标题的自定义样式
                {
                    text: ['{a|统计范围：}', `{b|${text1.value}}`].join(''),
                    top: 20,
                    left: 10,
                    textStyle: {
                        rich: {
                            a: {
                                color: '#000',
                                fontSize: '12',
                                fontWeight: 'bold',
                            },
                            b: {
                                color: '#000',
                            },
                        },
                    },
                },
                {
                    text: ['{a|隐患类型：}', `{b|${dangerType.value}}`].join(''),
                    top: 40,
                    left: 10,
                    textStyle: {
                        rich: {
                            a: {
                                color: '#000',
                                fontSize: '12',
                                fontWeight: 'bold',
                            },
                            b: {
                                color: '#000',
                            },
                        },
                    },
                },
                {
                    text: ['{a|隐患程度：}', `{b|${text3.value}}`].join(''),
                    top: 60,
                    left: 10,
                    textStyle: {
                        rich: {
                            a: {
                                color: '#000',
                                fontSize: '12',
                                fontWeight: 'bold',
                            },
                            b: {
                                color: '#000',
                            },
                        },
                    },
                },
            ],
            // 地图中的每一项（点击出现提示框）
            // 点击提示框 下钻到 区级
            tooltip: {
                triggerOn: 'click',
                enterable: true,
                formatter(data) {
                    // console.log('#@data', data);
                    // console.log('#@data-name', data.name);
                    // 1.a 标签 跳转
                    // return (
                    //   '<a href="#/danger/city/' +
                    //   data.name +
                    //   '"><div><p>' +
                    //   data.seriesName +
                    //   ':' +
                    //   data.name +
                    //   '</p><p>现有确诊：' +
                    //   data.value +
                    //   '</p></div></a>'
                    // );
                    
				   // 2.params  路由跳转
                    cityData.value = data;
                    return `<div οnclick="toCity('/danger/city')">
					<p>${data.seriesName}:${data.name}</p>
					<p>排查进度：${data.value}</p>
    				</div>`;
                },
            },
            // 下方的映射
            visualMap: [
                {
                    min: 0,
                    max: 1000,
                    right: 20,
                    bottom: 20,
                    showLabel: !0,
                    text: ['房屋数量 （数量/栋）'],
                    backgroundColor: 'rgba(111 ,108 ,108 ,.2)',
                    pieces: [
                        {
                            gte: 109,
                            lte: 124,
                            label: '109 - 124',
                            color: '#AC1D2B',
                        },
                        {
                            gte: 91,
                            lte: 108,
                            label: '91 - 108',
                            color: '#CF2B2B',
                        },
                        {
                            gte: 73,
                            lte: 90,
                            label: '73 - 90',
                            color: '#F0493E',
                        },
                        {
                            gte: 55,
                            lte: 72,
                            label: '55 - 72',
                            color: '#F5816A',
                        },
                        {
                            gte: 37,
                            lte: 54,
                            label: '37 - 54',
                            color: '#FBA489',
                        },
                        {
                            gte: 19,
                            lte: 36,
                            label: '19 - 36',
                            color: '#FCC9B0',
                        },
                        {
                            gte: 0,
                            lte: 18,
                            label: '0 - 18',
                            color: '#FDE6D8',
                        },
                    ],
                    show: !0,
                },
                // 可以使用 lt（小于，little than），gt（大于，greater than），lte（小于等于 lettle than or equals），gte
                // {
                //   // 映射-颜色值
                //   left: 90,
                //   orient: 'vertical', // 分段方向:horizontal水平
                //   type: 'piecewise', // 分段
                //   backgroundColor: 'rgba(111 ,108 ,108 ,.2)',
                //   padding: [50, 20, 20, 20],
                //   pieces: [
                //     // 配置颜色区间
                //     { min: 0, max: 50, color: '#E6F3F4' },
                //     { min: 51, max: 100, color: '#C1E2E5' },
                //     { min: 101, max: 150, color: '#9BD1D6' },
                //     { min: 151, max: 200, color: '#90CCD1' },
                //     { min: 201, max: 250, color: '#72BEC5' },
                //     { min: 251, max: 300, color: '#54B1B8' },
                //     { min: 301, max: 350, color: '#068D98' },
                //   ],
                // },
            ],
            color: ['#008A96', '#91CC75', '#FAC858'],
            series: [
                {
                    name: '住建',
                    type: 'map',
                    map: 'bj',
                    top: '10%',
                    roam: false, // 是否放大缩小
                    zoom: 1, // 视图比例
                    aspectScale: 0.75,
                    label: {
                        // normal: {
                        show: true,
                        // textStyle: {
                        fontSize: 10, // 地图上的字体大小
                        color: 'rgba(0,0,0,0.4)',
                        // },
                        // },
                    },
                    itemStyle: {
                        // normal: {
                        // 颜色值 、边框值
                        areaColor: '#fff', // 默认的区域颜色
                        borderColor: 'rgba(0,0,0,0.2)', // 默认的边框颜色
                        // },
                        // 选中后的配置
                        emphasis: {
                            itemStyle: {
                                areaColor: 'rgba(225,180,0,0.8)', // 选中后的区域颜色
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)', // 选中后的阴影颜色
                            },
                        },
                    },
                    // data: chartsData,
                    data: [
                        { name: '海淀区', value: 50 },
                        { name: '昌平区', value: 123 },
                    ],
                }
            ],
        });
        // charts.on('click', function (params: any) {
        //   console.log('@click222', params);
        // });
    }
    // 获取 路由
    function initRouter() {
        route.value = useRoute();
        router.value = useRouter();
        data.router = useRouter();
    }
    // 路由跳转的方法 ，
    // （tooltip 的 formatter 中配置了得挂到 window 上，不然不能执行）
    function toCity(url: any) {
        // console.log('@router', router.value);
        // 1.query 方式传参
        // router.value.push({ path: url, query: { city: cityData.value.name } });
        // 2.params 方式传参
        data.router.push({ name: 'city', params: { ...cityData.value } });
    }
    onMounted(() => {
        initCharts();
        initRouter();
        window.toCity = toCity; // echart 中 tooltip 设置点击事件
        // getCity();
    });
</script>

2.params 跳转后（子组件接收，保证页面属性不丢失路由参数）

<template>
  <div class="box">
    <div class="title">
      <div>区县:{{ cityName }}</div>
      <div class="goBack">
        <a-button type="primary" @click="goBack()">返回</a-button>
      </div>
    </div>
    <div class="provinceCity" :style="{ height: height }"></div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import * as echarts from 'echarts';
  // 北京所有的区
  import './bjAreasJson/huairou';
  import './bjAreasJson/changping';
  import './bjAreasJson/chaoyang';
  import './bjAreasJson/daxing';
  import './bjAreasJson/dongcheng';
  import './bjAreasJson/fangshan';
  import './bjAreasJson/fengtai';
  import './bjAreasJson/haidian';
  import './bjAreasJson/huairou';
  import './bjAreasJson/mentougou';
  import './bjAreasJson/miyun';
  import './bjAreasJson/pinggu';
  import './bjAreasJson/shijingshan';
  import './bjAreasJson/shunyi';
  import './bjAreasJson/tongzhou';
  import './bjAreasJson/xicheng';
  import './bjAreasJson/yanqing';
  const router = ref<any>();
  const route = ref<any>();
  const height = ref<string>('');
  const cityName = ref<string>('');
  const routerParams = ref<null>(null);
  function initRouter() {
    route.value = useRoute();
    router.value = useRouter();
  }
  // 自适应设置 区级地图 容器的 高度
  function getDom() {
    const domMap = document.querySelector('.box') as HTMLElement;
    height.value = domMap.scrollHeight - 30 + 'px';
  }
  function initCharts() {
    const domMap = document.querySelector('.provinceCity') as HTMLElement;
    // 解决 切换路由 图标不出来的问题
    domMap.removeAttribute('_echarts_instance_');
    const charts = echarts.init(domMap);
    window.onresize = function () {
      charts.resize();
    };
    charts.setOption({
      backgroundColor: '#fff',
      // 设置标题
      tooltip: {
        triggerOn: 'click',
        enterable: true,

        formatter(data: any) {
          // return '<div><p>' + data.name + '</p><p>现有确诊：' + data.value + '</p></div>';
          return (
            '<div><p>' +
            '区县' +
            ':' +
            routerParams.value.name +
            '</p><p>排查进度：' +
            routerParams.value.value +
            '</p></div>'
          );
        },
      },
      series: [
        {
          type: 'map',
          map: routerParams.value.name,
          // map: routerParams.value.name || '昌平区',
          roam: false, // 是否放大缩小
          zoom: 1.2, // 视图比例
          aspectScale: 0.75,
          label: {
            // normal: {
            show: true,
            // textStyle: {
            fontSize: 12, // 地图上的字体大小
            color: 'rgba(0,0,0,0.4)',
            // },
            // },
          },
          itemStyle: {
            // normal: {
            // 颜色值 、边框值
            areaColor: 'rgba(0,255,236,0)', // 默认的区域颜色
            borderColor: 'rgba(0,0,0,0.2)', // 默认的边框颜色
            // },
            // 选中后的配置
            emphasis: {
              itemStyle: {
                areaColor: 'rgba(225,180,0,0.8)', // 选中后的区域颜色
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)', // 选中后的阴影颜色
              },
            },
          },
          data: [
            // { name: '东城区', value: 193, itemStyle: { areaColor: '#ff0000' } },
            // { name: '怀柔区', value: 193, itemStyle: { areaColor: '#ff0000' } },
            // { name: '石景山区', value: 193, itemStyle: { areaColor: '#ff0000' } },
          ],
        },
      ],
    });
    // 地图 每一个区域 的 点击事件
    // charts.on('click', function (params: any) {
    //   console.log('@click222', params);
    // });
  }
  // 存储 父级路由传过来的 params 参数
  function initParams() {
    // 1.判断缓存中有木有 params
    if (!localStorage.getItem('params')) {
      // 1.1 没有就存一下  params ，然后 给 routerParams 、cityName 赋值
      let params = useRoute().params;
      localStorage.setItem('params', JSON.stringify(params));
      routerParams.value = JSON.parse(localStorage.getItem('params'));
      cityName.value = routerParams.value.name;
      // console.log('@从 缓存中 给 routerParams.value赋值', routerParams.value);
    } else {
      // 2.如果已经存过了，就直接赋值 
      // 3.当前页面刷新，如果再存 就会是 {},（页面刷新后 params 就失效了）
      routerParams.value = JSON.parse(localStorage.getItem('params'));
      cityName.value = routerParams.value.name;
      // console.log('@获取到了，赋值', routerParams.value);
    }
  }
  function goBack() {
    router.value.go(-1);
  }
  onMounted(() => {
    getDom();
    initRouter();
    initParams();
    initCharts();
  });
  onBeforeUnmount(() => {
      // 离开页面后，删除 params 的缓存
    localStorage.removeItem('params');
  });
</script>
<style lang="less" scoped>
  .box {
    height: 100%;
    width: 100%;
  }
  .title {
    display: flex;
    height: 30px;
    line-height: 30px;
    justify-content: space-between;
  }
  .provinceCity {
    width: 100%;
    height: calc(100% - 30px);
    // height: v-bind(height.value);
  }
  .goBack {
    /* background-color: #008a96;
    width: 40px;
    height: 20px; */
  }
</style>

三.highChart （韦恩图）venn

1.准备工作

// 准备工作 (下载依赖包)
npm install highcharts-vue
npm install highcharts --save

2.详细代码

<template>        
	<div class="right-top">
    	<div id="container" style="width: 100%; height: 100%"></div>
    </div>
</template>
<script setup lang="ts">
  import { ref, reactive, toRefs, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { iParams } from './types/params';
  import { iTableData, iTableColumns, iGaList, iXfList, iZjList } from './types/table';
  //  按需引入 highchart （也可以在 main.js 中全局引入）
  import Highcharts from 'highcharts/highstock';
  import HighchartsMore from 'highcharts/highcharts-more';
  import HighchartsDrilldown from 'highcharts/modules/drilldown';
  import Highcharts3D from 'highcharts/highcharts-3d';
  import Venn from 'highcharts/modules/venn';

  HighchartsMore(Highcharts);
  HighchartsDrilldown(Highcharts);
  Highcharts3D(Highcharts);
  Venn(Highcharts);
    
  // 点击动态改变  隐患类型 
  const dangerType = ref<string>('建筑解构隐患、消防安全隐患');
  const text3 = ref<string>('严重');
  function veenChart(){
      Highcharts.chart('container', {
      chart: {
        style: {
          // fontWeight: 'bold', // 容器字体加粗
          // border: '1px solid red', // 容器边框
        },
      },
      title: {
        text: '有严重隐患的房屋数 （数量/栋）',
        style: {
          fontWeight: 900,
          // color: 'red',
        },
      },
      tooltip: {
        backgroundColor: '#F8F8F8', // 鼠标悬停 饼图提示 的 背景颜色
        // borderColor: 'red', // 鼠标悬停 饼图提示 的 边框颜色
        borderRadius: 10, // 鼠标悬停 饼图提示 的 边框圆角
        borderWidth: 1, //鼠标悬停 饼图提示 的 边框宽度
        shadow: false, // 是否显示阴影
        animation: true, // 鼠标划过 是否启用动画效果
        stickyTracking: false,
        style: {
          // 文字内容相关样式
          // color: '#ff0000',
          fontSize: '12px',
          fontWeight: 'blod',
          fontFamily: 'Courir new',
        },
        // 1. 提示框的 格式化函数（通过 this 拿到 series 中配置的数据）
        formatter(this) {
          // console.log('@@@111', this.point);
          // console.log('title', this.point.sets.join(','));
          return (
            '<span style="color: ' +
            this.point.color +
            '">标题：</span> ' +
            this.point.sets.join(',') +
            '<br/>' +
            '<span style="color: ' +
            this.point.color +
            '">交集数据：</span> ' +
            this.point.value
          );
        },
      },
      // 2.韦恩图的点击事件( 配置点击事件 )
      plotOptions: {
        venn: {
          innerSize: 100,
          depth: 45,
          events: {
            click: function (e) {
              // console.log(e);
              // pieClick(e);
              console.log('@韦恩图名字', e.point.sets.join('、'));
              // 2.1 点击的时候给隐患类型赋值
              dangerType.value = e.point.sets.join('、');
              // 2.2 重新调 echarts 刷新页面
              initCharts();
              // console.log('@点击 - 韦恩图的名字', dangerType.value);
              // console.log('@点击 - 韦恩图的数据', e.point.value);
            },
          },
        },
      },
      // 每一个区域的颜色
      colors: ['#FFA64B', '#FFA64C', '#FFA64C', '#F44A3D', '#F44A3D', '#F44A3D', '#8B2D78'],
      series: [
        {
          type: 'venn',
          // 鼠标划过 显示的 title
          // name: '鼠标悬停显示的title',
          data: [
            {
              sets: ['建筑结构隐患'],
              value: 523,
            },
            {
              sets: ['消防安全隐患'],
              value: 523,
            },
            {
              sets: ['综合整治隐患'],
              value: 523,
            },
            {
              sets: ['建筑结构隐患', '消防安全隐患'],
              value: 124,
              // name: '建筑结构隐患 & 消防安全隐患 ',
              name: '124',
            },
            {
              sets: ['建筑结构隐患', '综合整治隐患'],
              value: 124,
              // name: '建筑结构隐患 & 综合整治隐患',
              name: '124',
            },
            {
              sets: ['消防安全隐患', '综合整治隐患'],
              value: 124,
              // name: '消防安全隐患 & 综合整治隐患',
              name: '124',
            },
            {
              sets: ['消防安全隐患', '综合整治隐患', '建筑结构隐患'],
              value: 12,
              // name: '消防安全隐患  & 综合整治隐患 & 建筑结构隐患',
              name: '12',
            },
          ],
        },
      ],
      credits: {
        enabled: false, // 禁用版权信息
      },
    });
  }
</script>