antd modal弹出框，渲染antv图表
弹出框的图标渲染获取不到dom，所以不能直接渲染，需要先判断Modal弹出框dom节点加载完成后，才能开始渲染。。。。。
快下班了，直接上全部代码，不解释了
<template>
<a-modal
v-model:visible="visible"
:destroyOnClose="true"
title="评估全景"
@ok="cancel"
@cancel=""
:maskClosable="false"
ok-text="关闭"
cancel-text=" "
class="Market24"
width="60%">
<div style="height: 600px;width: 100%;overflow: hidden;">
<div id="container" style="width: 100%;height: 100%;"></div>
</div>
</a-modal>
</template>
<script lang="ts">
import { defineComponent, ref, watch, nextTick } from 'vue';
import { Sunburst } from '@antv/g2plot';
export default defineComponent({
name: 'Icon2Modal',
components: { },
setup() {
const visible = ref(false);
watch(visible, (newValue, oldValue)=>{
if(newValue === true){
getChart();
}
});
const cancel = () => {
visible.value = false;
};
const showModal = () => {
visible.value = true;
};
// 旭日图
const getChart = () => {
let data={
"label": "root",
"children": [
{
"label": "制度保障力",
"children": [
{
"label": "制度完备性",
"children": [
{
"label": "是否出台数据产权相关条例",
"uv": 0,
"sum": 0.9,
"count": 0
},
{
"label": "是否出台数据流通相关条例",
"uv": 0,
"sum": 0.9,
"count": 0
},
{
"label": "是否出台收益分配相关条例",
"uv": 0,
"sum": 0.9,
"count": 0
},
{
"label": "是否出台安全治理相关条例",
"uv": 0,
"sum": 0.9,
"count": 0
},
{
"label": "是否出台数字经济十四五规划",
"uv": 0,
"sum": 0.6,
"count": 0
},
{
"label": "公共数据专项制度发布数量",
"uv": 0,
"sum": 0.9,
"count": 0
},
{
"label": "数据相关标准指南数量",
"uv": 0,
"sum": 0.9,
"count": 0
}],
"uv": 1,
"sum": 6,
"count": 0
},
{
"label": "制度创新性",
"children": [
{
"label": "国家级数相关试验区数量",
"uv": 0,
"sum": 0.9,
"count": 0
},
{
"label": "省级数据相关试验区数量",
"uv": 0,
"sum": 0.9,
"count": 0
},
{
"label": "数据产权制度创新举措",
"uv": 0,
"sum": 1.2,
"count": 0
},
{
"label": "数据流通制度创新举措",
"uv": 0,
"sum": 1.2,
"count": 0
},
{
"label": "收益分配制度创新举措",
"uv": 0,
"sum": 0.9,
"count": 0
},
{
"label": "安全治理制度创新举措",
"uv": 0,
"sum": 0.9,
"count": 0
}],
"uv": 1,
"sum": 6,
"count": 0
},
{
"label": "路线清晰度",
"children": [
{
"label": "是否拆分阶段性改革目标",
"uv": 0,
"sum": 0.5,
"count": 0
},
{
"label": "是否明确划分改革任务",
"uv": 0,
"sum": 0.5,
"count": 0
},
{
"label": "是否明确改革任务分工",
"uv": 0,
"sum": 0.5,
"count": 0
},
{
"label": "是否建立任务推进路线图",
"uv": 0,
"sum": 0.5,
"count": 0
}],
"uv": 1,
"sum": 2,
"count": 0
},
{
"label": "组织支撑度",
"children": [
{
"label": "是否有专项改革领导机构",
"uv": 1,
"sum": 0.9,
"count": 0
},
{
"label": "是否有常设改革领导机构",
"uv": 1,
"sum": 0.9,
"count": 0
},
{
"label": "改革领导机构级别",
"uv": 1,
"sum": 0.9,
"count": 0
},
{
"label": "是否成立数据运营机构",
"uv": 1,
"sum": 0.9,
"count": 0
},
{
"label": "数据运营机构是否有国资资本",
"uv": 1,
"sum": 0.6,
"count": 0
},
{
"label": "数据运营机构人员规模是否超过100",
"uv": 1,
"sum": 0.9,
"count": 0
},
{
"label": "数据运营机构注册资本是否超过1千万",
"uv": 1,
"sum": 0.9,
"count": 0
}],
"uv": 1,
"sum": 6,
"count": 0
}
],
"uv": 1,
"sum": 20,
"count": 0
},
{
"label": "数据供给力",
"children": [
{
"label": "数据基础设施支撑",
"children": [
{
"label": "万人5G基站建设情况",
"uv": 2,
"sum": 0.4,
"count": 0
},
{
"label": "千兆城市建设情况",
"uv": 2,
"sum": 0.4,
"count": 0
},
{
"label": "数据中心建设情况",
"uv": 2,
"sum": 0.4,
"count": 0
},
{
"label": "城市云计算发展水平",
"uv": 2,
"sum": 0.4,
"count": 0
},
{
"label": "工业互联网标识解析二级节点建设进展",
"uv": 2,
"sum": 0.4,
"count": 0
}],
"uv": 2,
"sum": 2,
"count": 0
},
{
"label": "公共数据整合归集",
"children": [
{
"label": "公共数据基础支撑平台建设情况",
"uv": 2,
"sum": 0.75,
"count": 0
},
{
"label": "公共数据汇聚情况",
"uv": 2,
"sum": 0.75,
"count": 0
},
{
"label": "城市便民服务APP建设情况",
"uv": 2,
"sum": 0.75,
"count": 0
},
{
"label": "社会数据集中采购情况",
"uv": 2,
"sum": 0.75,
"count": 0
}],
"uv": 2,
"sum": 3,
"count": 0
},
{
"label": "公共数据共享开放",
"children": [
{
"label": "公共数据开放平台建设情况",
"uv": 2,
"sum": 0.3,
"count": 0
},
{
"label": "公共数据开放单位数",
"uv": 2,
"sum": 0.3,
"count": 0
},
{
"label": "公共数据开放数据集",
"uv": 2,
"sum": 0.3,
"count": 0
},
{
"label": "公共数据开放接口数",
"uv": 2,
"sum": 0.3,
"count": 0
},
{
"label": "公共数据开放数据项",
"uv": 2,
"sum": 0.3,
"count": 0
},
{
"label": "公共数据开放目录数",
"uv": 2,
"sum": 0.3,
"count": 0
},
{
"label": "公共数据开放数据量",
"uv": 2,
"sum": 0.3,
"count": 0
},
{
"label": "公共数据开放下载量",
"uv": 2,
"sum": 0.3,
"count": 0
},
{
"label": "国家数据直达基层试点情况",
"uv": 2,
"sum": 0.3,
"count": 0
},
{
"label": "公共数据实时共享情况",
"uv": 2,
"sum": 0.3,
"count": 0
}],
"uv": 2,
"sum": 3,
"count": 0
},
{
"label": "社会数据供给就绪",
"children": [
{
"label": "常住人口数量（万人）",
"uv": 2,
"sum": 0.2,
"count": 0
},
{
"label": "城市市场登记主体数量（万户）",
"uv": 2,
"sum": 0.2,
"count": 0
},
{
"label": "每万人拥有规上工业企业数量",
"uv": 2,
"sum": 0.2,
"count": 0
},
{
"label": "城市金融科技发展情况",
"uv": 2,
"sum": 0.2,
"count": 0
},
{
"label": "国家电子商务示范城市建设情况",
"uv": 2,
"sum": 0.2,
"count": 0
},
{
"label": "DCMM贯标企业数量（各省）",
"uv": 2,
"sum": 0.2,
"count": 0
},
{
"label": "省级以上数字化转型促进中心建设情况",
"uv": 2,
"sum": 0.2,
"count": 0
},
{
"label": "国家双跨工业互联网平台建设情况",
"uv": 2,
"sum": 0.4,
"count": 0
},
{
"label": "国家级智能制造示范工厂揭榜单位",
"uv": 2,
"sum": 0.2,
"count": 0
}],
"uv": 2,
"sum": 2,
"count": 0
}
],
"uv": 2,
"sum": 10,
"count": 0
},
{
"label": "数据流通力",
"children": [
{
"label": "数据授权运营",
"children": [
{
"label": "政府数据治理机构建设情况",
"uv": 3,
"sum": 1.5,
"count": 0
},
{
"label": "城市数据运营公司成立情况",
"uv": 3,
"sum": 1.5,
"count": 0
},
{
"label": "公共数据授权进展情况",
"uv": 3,
"sum": 1.5,
"count": 0
},
{
"label": "个人数据授权进展情况",
"uv": 3,
"sum": 1.5,
"count": 0
}],
"uv": 3,
"sum": 6,
"count": 0
},
{
"label": "数据流通交易",
"children": [
{
"label": "数据交易所建设进展",
"uv": 3,
"sum": 1.6,
"count": 0
},
{
"label": "数据交易所活跃情况",
"uv": 3,
"sum": 1.6,
"count": 0
},
{
"label": "数据商和第三方专业服务机构培育进展",
"uv": 3,
"sum": 1.6,
"count": 0
},
{
"label": "数据产业联盟和行业协会成立情况",
"uv": 3,
"sum": 0.8,
"count": 0
},
{
"label": "数据争议仲裁机构组建情况",
"uv": 3,
"sum": 1.6,
"count": 0
},
{
"label": "数据专业智库建设情况",
"uv": 3,
"sum": 0.8,
"count": 0
}],
"uv": 3,
"sum": 8,
"count": 0
},{
"label": "数据跨境流动",
"children": [
{
"label": "国际互联网专用数据通道建设情况",
"uv": 3,
"sum": 0.6,
"count": 0
},
{
"label": "国家数据跨境传输安全管理试点情况",
"uv": 3,
"sum": 0.6,
"count": 0
},
{
"label": "数据商和第三方专业服务机构培育进展",
"uv": 3,
"sum": 0.6,
"count": 0
},
{
"label": "我国百强数据贸易企业拥有数量",
"uv": 3,
"sum": 0.6,
"count": 0
},
{
"label": "国家数字服务出口基地建设情况",
"uv": 3,
"sum": 0.6,
"count": 0
}],
"uv": 3,
"sum": 3,
"count": 0
},
{
"label": "数据资产化探索",
"children": [
{
"label": "数据登记体系建设情况",
"uv": 3,
"sum": 1.5,
"count": 0
},
{
"label": "数据资产评估试点情况",
"uv": 3,
"sum": 0.6,
"count": 0
},
{
"label": "数据资产评估平台建设情况",
"uv": 3,
"sum": 0.9,
"count": 0
}],
"uv": 3,
"sum": 3,
"count": 0
},
],
"uv": 3,
"sum": 20,
"count": 0
},
{
"label": "价值挖掘力",
"children": [
{
"label": "行业应用",
"children": [
{
"label": "一体化政务服务能力",
"uv": 4,
"sum": 1,
"count": 0
},
{
"label": "农产品数字化百强县",
"uv": 4,
"sum": 0.5,
"count": 0
},
{
"label": "全国“互联网+”农产品出村进城工程试点",
"uv": 4,
"sum": 0.5,
"count": 0
},{
"label": "国家级智能制造试点示范项目",
"uv": 4,
"sum": 0.5,
"count": 0
},
{
"label": "智能交通应用试点项目",
"uv": 4,
"sum": 0.5,
"count": 0
},
{
"label": "文化和旅游数字化创新实践",
"uv": 4,
"sum": 0.5,
"count": 0
},{
"label": "人工智能助推教师队伍建设试点",
"uv": 4,
"sum": 0.5,
"count": 0
},
{
"label": "智慧健康养老示范基地",
"uv": 4,
"sum": 0.5,
"count": 0
},
{
"label": "5G+医疗健康应用试点",
"uv": 4,
"sum": 0.5,
"count": 0
}],
"uv": 4,
"sum": 5,
"count": 0
},
{
"label": "创新支撑",
"children": [
{
"label": "大数据服务企业top150",
"uv": 4,
"sum": 0.25,
"count": 0
},
{
"label": "大数据产业发展试点示范项目",
"uv": 4,
"sum": 0.25,
"count": 0
},
{
"label": "人工智能企业典型应用案例",
"uv": 4,
"sum": 0.25,
"count": 0
},{
"label": "国家区块链创新应用试点",
"uv": 4,
"sum": 0.5,
"count": 0
},
{
"label": "智能网联汽车高精度地图应用试点",
"uv": 4,
"sum": 0.25,
"count": 0
},
{
"label": "国家数字乡村试点",
"uv": 4,
"sum": 0.5,
"count": 0
},{
"label": "国有企业数字化转型典型案例",
"uv": 4,
"sum": 0.25,
"count": 0
},
{
"label": "数字科技企业双化协同典型案例入选",
"uv": 4,
"sum": 0.25,
"count": 0
}],
"uv": 4,
"sum": 2.5,
"count": 0
},{
"label": "模式培育",
"children": [
{
"label": "是否为数字人民币试点城市",
"uv": 4,
"sum": 0.625,
"count": 0
},
{
"label": "工信部工业互联网平台创新领航应用案例",
"uv": 4,
"sum": 0.625,
"count": 0
},
{
"label": "国家智能社会治理实验基地入选名单",
"uv": 4,
"sum": 0.625,
"count": 0
},
{
"label": "是否为智慧城市基础设施与智能网联汽车协同发展试点城市",
"uv": 4,
"sum": 0.625,
"count": 0
}],
"uv": 4,
"sum": 2.5,
"count": 0
}
],
"uv": 4,
"sum": 10,
"count": 0
},
{
"label": "安全治理力",
"children": [
{
"label": "安全管理",
"children": [
{
"label": "数据安全工作方案出台情况",
"uv": 5,
"sum": 1.5,
"count": 0
},
{
"label": "数据安全标准规范出台情况",
"uv": 5,
"sum": 2,
"count": 0
},
{
"label": "数据安全培训学习情况",
"uv": 5,
"sum": 1.5,
"count": 0
}],
"uv": 5,
"sum": 5,
"count": 0
},
{
"label": "安全技术",
"children": [
{
"label": "中国互联网安全竞争力50强企业",
"uv": 5,
"sum": 1.25,
"count": 0
},
{
"label": "工业领域数据安全管理试点典型案例和成效突出地区",
"uv": 5,
"sum": 1.25,
"count": 0
},
{
"label": "数字城市网络安全指数排名",
"uv": 5,
"sum": 1.25,
"count": 0
},
{
"label": "网络安全技术应用试点示范项目",
"uv": 5,
"sum": 1.25,
"count": 0
}],
"uv": 5,
"sum": 5,
"count": 0
},
{
"label": "安全监测",
"children": [
{
"label": "数据安全事件监测情况",
"uv": 5,
"sum": 2,
"count": 0
},
{
"label": "APP数据安全检测情况",
"uv": 5,
"sum": 1.5,
"count": 0
},
{
"label": "工业互联网安全监测与态势感知平台建设情况",
"uv": 5,
"sum": 1.5,
"count": 0
}],
"uv": 5,
"sum": 5,
"count": 0
},
{
"label": "应急处置",
"children": [
{
"label": "定期开展应急演练情况",
"uv": 5,
"sum": 2.5,
"count": 0
},
{
"label": "数据安全应急预案制定情况",
"uv": 5,
"sum": 2.5,
"count": 0
}],
"uv": 5,
"sum": 5,
"count": 0
}
],
"uv": 5,
"sum": 20,
"count": 0
},
{
"label": "产业发展力",
"children": [
{
"label": "产业规模与质量",
"children": [
{
"label": "大数据企业数量",
"uv": 6,
"sum": 1.25,
"count": 0
},
{
"label": "上市大数据企业数量",
"uv": 6,
"sum": 1.25,
"count": 0
},
{
"label": "大数据独角兽企业数量",
"uv": 6,
"sum": 1.25,
"count": 0
},
{
"label": "大数据瞪羚企业数量",
"uv": 6,
"sum": 1.25,
"count": 0
}],
"uv": 6,
"sum": 5,
"count": 0
},
{
"label": "产业创新能力",
"children": [
{
"label": "城市科技支出费用总量",
"uv": 6,
"sum": 1.25,
"count": 0
},
{
"label": "城市科技支出占一般公共预算支出的比例",
"uv": 6,
"sum": 1.25,
"count": 0
},
{
"label": "专利数量",
"uv": 6,
"sum": 2.5,
"count": 0
}],
"uv": 6,
"sum": 5,
"count": 0
},
{
"label": "产业生态体系",
"children": [
{
"label": "资产评估机构数量",
"uv": 6,
"sum": 2.5,
"count": 0
},
{
"label": "律所数量",
"uv": 6,
"sum": 2.5,
"count": 0
}],
"uv": 6,
"sum": 5,
"count": 0
},
{
"label": "产业发展环境",
"children": [
{
"label": "大数据服务企业top150",
"uv": 6,
"sum": 0.5,
"count": 0
},
{
"label": "大数据产业发展试点示范项目",
"uv": 6,
"sum": 1,
"count": 0
},
{
"label": "大数据产业发展试点示范项目",
"uv": 6,
"sum": 1,
"count": 0
},
{
"label": "人工智能企业典型应用案例",
"uv": 6,
"sum": 0.5,
"count": 0
},{
"label": "国家区块链创新应用试点",
"uv": 6,
"sum": 0.5,
"count": 0
},
{
"label": "智能网联汽车高精度地图应用试点",
"uv": 6,
"sum": 1,
"count": 0
},
{
"label": "国家数字乡村试点",
"uv": 6,
"sum": 0.5,
"count": 0
}],
"uv": 6,
"sum": 5,
"count": 0
}
],
"uv": 6,
"sum": 20,
"count": 0
}
]
};
const colors = [
'#854AFF',
'#355BFF',
'#4075FF',
'#0094F0',
'#00BCD9',
'#00C4A5'
];
nextTick(() => {
const plot = new Sunburst('container', {
data,
innerRadius: 0.2,
radius: 0.95,
colorField: 'uv',
interactions: [{ type: 'element-active' }],
hierarchyConfig: {
field: 'sum',
},
label: {
// label layout: limit label in shape, which means the labels out of shape will be hide
layout: [{ type: 'limit-in-shape' }],
autoRotate: true,
rotate: 90
},
sunburstStyle: (data) => {
const nodeIndex = data.uv-1;
let color = colors[nodeIndex];
return {
fill: color,
stroke: '#fff',
lineWidth: 0.5,
};
},
});
plot.render();
});
};
return {
visible,
cancel,
showModal,
getChart,
};
},
});
</script>
<style lang="less" scoped>
.Market22 {
.mdcBtn {
display: inline-block;
font-size: 12px;
color: #2965A5 !important;
border: 1px solid #2965A5 !important;
&>span {
line-height: 22px !important;
vertical-align: top !important;
}
}
.mdcBtn:hover {
color: #024995 !important;
border: 1px solid #024995 !important;
}
}
</style>
<style lang="less">
// 弹出框标题居中
.ant-modal-title {
text-align: center;
}
.mdcBtn {
color: #024995 !important;
border: 1px solid #024995 !important;
}
.mdcBtn:hover {
color: #1D60A8 !important;
border: 1px solid #1D60A8 !important;
}
.ant-btn-primary, .ant-btn-primary ant-input-search-button,
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){
background: #024995 !important;
border-color: #024995 !important;
}
.Market22 .ant-modal-body {
padding: 0;
padding-top: 20px;
}
.Market22 .ant-form-inline .ant-form-item {
margin-bottom: 20px;
margin-left: 20px;
margin-right: 0;
}
</style>
