// 项目中下载 依赖
npm install echarts -s
// 1. main.js 中引入 全局使用 (通过this.$echarts就可以获取到对象)
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;
// 2、在组件里面局部引用
import echarts from 'echarts'; // 这个引入有可能报错
import * as echarts from 'echarts'; // 这个是新版本的引入方式
<!-- 为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);
<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>
<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>
<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>
<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>
<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>
// 准备工作 (下载依赖包)
npm install highcharts-vue
npm install highcharts --save
<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>