eChart 中 柱状图、地图、AntDesign 的 滚动条表格、highChart 的 （venn） 韦恩图
2024-05-14 06:48:09
一、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>// 引入 echartsimport * as echarts from 'echarts';// 引入地图的jsonimport './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,sshadowOffsetY: 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.判断缓存中有木有 paramsif (!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>
eChart 中 柱状图、地图、AntDesign 的 滚动条表格、highChart 的 （venn） 韦恩图相关推荐
- EChart中使用地图方式总结（转载）
EChart中使用地图方式总结 2018年02月06日 22:18:57 来源:https://blog.csdn.net/shaxiaozilove/article/details/79274772 ...
- EChart中使用地图方式总结
https://blog.csdn.net/shaxiaozilove/article/details/79274772
- Vue中使用echart实现中国地图统计图
Vue中使用echart实现中国地图统计图 前言 Echart版本的确定 全局导入或按需导入 在对应的页面调用echart 前后端数据交互注意事项 前言 在Vue2.x开发中,为了更好地展示某一个时间 ...
- vue - vue中使用echart实现柱状图和折线图
vue中使用echart实现柱状图和折线图,所用到的数据会放到最后面,在costRate.js里面: 1,先看效果图 一些重要注释我都写到代码里面了:第一个图柱状图,第二个是折线图 2,代码实现 &l ...
- python做excel表格柱状图_用python处理excel数据（八）实现excel表中柱状图功能
实现excel表中柱状图的功能,并按金额排序. 引入matplotlib.pyplot模块. 下面是用pandas画的图,excel中出现中文可能会出现报错. import pandas as pd ...
- 中高德地图只显示某一城市_小O地图 - 城市交通态势数据查询及下载
小O地图是一款互联网地图数据挖掘.分析.图表软件.具有专业.稳定.高效的特点.提供地图功能多达30余项,并持续更新中. 感兴趣的朋友可以登录官网下载使用 .www.GIS9.com [概述] 本文介绍 ...
- python画柱状图和折线图-Python读取Excel表格,并同时画折线图和柱状图的方法
今日给大家分享一个Python读取Excel表格,同时采用表格中的数值画图柱状图和折线图,这里只需要几行代码便可以实. 首先我们需要安装一个Excel操作的库xlrd,这个很简单,在安装Python后 ...
- python导入数据画折线图_Python读取Excel表格,并同时画折线图和柱状图的方法
今日给大家分享一个Python读取Excel表格,同时采用表格中的数值画图柱状图和折线图,这里只需要几行代码便可以实. 首先我们需要安装一个Excel操作的库xlrd,这个很简单,在安装Python后 ...
- Echart实现中国地图和地图打点
一.概述 首先ECharts 是一个使用 JavaScript 实现的开源可视化库.兼容当前绝大部分浏览器,而且提供大量可交互.可高度个性化定制的图表,满足开发者各种需求. 今天主要展示echarts ...
最新文章
- Kubernetes — 容器与镜像
- 关于用css实现的文字超出部分显示省略号
- python监控某个程序_9-30 python监控windows某个进程的变化(修正版)
- python 多进程multiprocessing 模块
- 端口扫描实验和Dos攻击实验
- 请问如何制作中国象棋对弈软件的界面部分?
- 5g是多大一勺_5g是多大一勺(5克的勺子有多大)
- ligerui的使用心得
- 解决方法：CC2640R2F从7x7改成5x5封装，主机连接失败
- Teardrop攻击 —— 创建虚假的IP数据包
- Revit二次开发环境平台的搭建
- 《趣味知识博文》小W与小L带你聊天式备考CDA Level Ⅰ（四）
- linux 连接 ftp 下载文件
- Python 数字转中文大写
- 西门子机床系统各时间数据查看
- Centos7搭建KVM虚拟化平台之基于OVS网桥
- c语言计时程序 纳秒,前端Tips#4 - 用 process.hrtime 获取纳秒级的计时精度
- idea查看java当前线程,IntelliJ IDEA多线程调试
- 超全的Matplotlib速查表，打包下载
- 牛腩新闻发布系统——制作母板页