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>

你可能感兴趣的:(echarts,javascript,vue.js,前端)