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

一、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 (
            '
' +
            data.seriesName +
            ':' +
            data.name +
            '
已排查：' +
            data.value +
            '
'
);
},
},
// 下方的映射（通过数量区间，显示不同的地图区域）
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 (
                    //   '//   data.name +
                    //   '">
' +
                    //   data.seriesName +
                    //   ':' +
                    //   data.name +
                    //   '
现有确诊：' +
                    //   data.value +
                    //   ''
// );
// 2.params 路由跳转
cityData.value = data;
return `

${data.seriesName}:${data.name}
排查进度：${data.value}
`;
},
},
// 下方的映射
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 '
' + data.name + '
现有确诊：' + data.value + '
';
          return (
            '
' +
            '区县' +
            ':' +
            routerParams.value.name +
            '
排查进度：' +
            routerParams.value.value +
            '
'
);
},
},
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 (
            '+
            this.point.color +
            '">标题： ' +
            this.point.sets.join(',') +
            '
' +
            '+
            this.point.color +
            '">交集数据： ' +
            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>