Skip to content

R
risk-monitor
提交 63a21e28 authored 作者: huhuiqing's avatar huhuiqing
浏览文件
操作

博弈专题分析

上级 ecc199e4
隐藏空白字符变更
内嵌 并排
正在显示 包含 1048 行增加 和 0 行删除
src/views/overView/component/ResourceSupport.vue 0 → 100644
浏览文件 @ 63a21e28
<!-- 中M博弈概览页 -->
<template>
<div class="thematic-box">
<div class="title-text">中美博弈专题分析</div>
<img class="title-img" src="@/assets/images/bg/概览页模块标题.png"></img>
<div class="thematic-content">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">对华打压历程</div>
<div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
数据来源：美国某某局</div>
</div>
<div class="item-header-divider"></div>
<div style="display: flex;height: calc(100% - 60px);">
<div class="thematic-btn-left" @click="changeBtn('timwLine', 'left')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-left.png"></img>
</div>
<div class="timeLine-box">
<div style="height: calc(50% - 8px);display: flex">
<div v-for="(item, index) in timeLineOddIndexItems" class="time-item-box">
{{ item.titlle }}
</div>
</div>
<img style=" width: 100%; height: 10px;" src="@/assets/images/bg/time-line.png"></img>
<div style="height: calc(50% - 8px);display: flex;">
<div v-for="(item, index) in timeLineIndexItems" class="time-item-box">
{{ item.titlle }}
</div>
</div>
</div>
<div class="thematic-btn-right" @click="changeBtn('right')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-right.png"></img>
</div>
</div>
</div>
<div class="thematic-content" style="margin-top: 20px;height: 350px;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">打压遏制手段分布</div>
</div>
<div class="item-header-divider"></div>
<div style="display: flex;height: calc(100% - 60px);">
<div class="thematic-btn-left" @click="changeBtn('timwLine', 'left')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-left.png"></img>
</div>
<div class="cup-box" style="display: flex;">
<div v-for="item in distribution" class="cup-item-box" :style="{
color: item.borderColor
}">
<div class="cup-title">
{{ item.titlle }}
</div>
<div class="cup" :style="{
borderColor: item.bgColor1,
outlineColor: item.bgColor1,
}">
<!-- 水位 -->
<div class="water" :style="{
'--percent': item.value,
'--c1': item.bgColor1,
'--c2': item.bgColor2,
}"></div>
<!-- 文字 -->
<span class="txt" :style="{ color: item.borderColor, }">{{ item.text }}</span>
</div>
<div style="margin-top: 20px;">
{{ item.change }}
</div>
</div>
</div>
<div class="thematic-btn-right" @click="changeBtn('right')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-right.png"></img>
</div>
</div>
</div>
<div style="margin-top: 20px;height: 450px;display: flex;">
<div class="thematic-content" style="width: 45%; display: block;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">打压遏制强度变化</div>
<div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
数据来源：美国某某局</div>
</div>
<div class="item-header-divider"></div>
<div style="display: flex;height: calc(100% - 60px);" id="chart1">
</div>
</div>
<div class="thematic-content" style="width: 45%;margin-left: 5%;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">打压遏制强度变化</div>
<div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
数据来源：美国某某局</div>
</div>
<div class="item-header-divider"></div>
<div style="display: flex;height: calc(100% - 60px);" id="char2">
</div>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import getBarChart from '../js/barChart.js'
import radarChart from '../js/radarChart.js'
const timeLine = ref([
{
time: '2025年1月',
titlle: '《AI扩散暂行最终规则》发布0',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
},
{
time: '2025年1月',
titlle: '《AI扩散暂行最终规则》发布1',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
},
{
time: '2025年1月',
titlle: '特朗普签署EO 143202',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
},
{
time: '2025年1月',
titlle: '《AI扩散暂行最终规则》发布3',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
},
{
time: '2025年7月23日',
titlle: '《AI扩散暂行最终规则》发布4',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
},
])
// 过滤出奇数下标（1,3,5...）
const timeLineOddIndexItems = computed(() =>
timeLine.value.filter((_, idx) => idx % 2 === 1)
)
// 过滤出偶数下标（1,3,5...）
const timeLineIndexItems = computed(() =>
timeLine.value.filter((_, idx) => idx % 2 === 0)
)
const distribution = ref([
{
titlle: '法案',
value: 80,
text: '1626个',
change: '较上个月+3',
bgColor1: '#E6F4FF',//浅色
bgColor2: '#91CAFF',//深色
borderColor: '#0958D9',
}, {
titlle: '法案',
value: 20,
text: '1626个',
change: '较上个月+3',
bgColor1: '#FFFBE6',//浅色
bgColor2: '#FDE19A',//深色
borderColor: '#D48806',
}, {
titlle: '法案',
value: 10,
text: '1626个',
change: '较上个月+3',
bgColor1: '#E6F4FF',//浅色
bgColor2: '#91CAFF',//深色
borderColor: '#0958D9',
}, {
titlle: '法案',
value: 40,
text: '1626个',
change: '较上个月+3',
bgColor1: '#E6F4FF',//浅色
bgColor2: '#91CAFF',//深色
borderColor: '#0958D9',
}, {
titlle: '法案',
value: 50,
text: '1626个',
change: '较上个月+3',
bgColor1: '#E6F4FF',//浅色
bgColor2: '#91CAFF',//深色
borderColor: '#0958D9',
}
])
const timeIndex = ref(0)
//时间轴及遏制手段分布按钮
function changeBtn(data, type) {
if (type === 'left') {
timeIndex.value === 0 ? '' : timeIndex.value = timeIndex.value - 1
} else {
(timeIndex.value.length - timeIndex.value <= 4) ? '' : timeIndex.value = timeIndex.value + 1
}
}
const chart1Data = ref({
name: [
"2024-12",
"2025-1",
"2025-2", "2025-3", "2025-4", "2025-5", "2025-6", "2025-7",
],
value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79],
});
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
console.log(chartDom, 'chartDomchartDomchartDom')
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
onMounted(() => {
let char1 = getBarChart(chart1Data.value.name, chart1Data.value.value, true);
setChart(char1, "chart1");
let char2 = radarChart()
setChart(char2, "char2");
});
</script>
<style lang="scss" scoped>
.cup-box {
overflow-x: auto;
.cup-item-box {
width: 220px;
text-align: center;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---, 10px);
margin: 20px;
padding: 20px;
.cup-title {
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: center;
margin-bottom: 20px;
}
}
}
/* 杯子：正圆 */
.cup {
position: relative;
width: 130px;
height: 130px;
/* 本身高度设为 0，内容靠子元素或绝对定位 */
border-radius: 50%;
border: 4px #2196f3 solid;
overflow: hidden;
/* 关键：把超出部分裁掉 */
display: flex;
align-items: flex-end;
/* 水永远贴底 */
justify-content: center;
border: 4px solid #2196f3;
/* 内圈实线 */
outline: 4px solid #2196f3;
/* 外圈实线 */
outline-offset: 4px;
/* 两线间距，想再宽调大即可 */
}
/* 水位层 */
.water {
width: 100%;
height: calc(var(--percent) * 1%);
/* 0~100 对应 0~100% */
background: linear-gradient(to top, var(--c1), var(--c2));
position: relative;
animation: wave 3s linear infinite;
}
/* 波浪 */
.water::before,
.water::after {
content: '';
position: absolute;
width: 400px;
height: 400px;
top: -350px;
/* 把圆心顶到上面去 */
left: 50%;
border-radius: 45%;
transform: translate(-50%, 0);
background: rgba(255, 255, 255, .4);
animation: rotate 7s linear infinite;
}
.water::after {
top: -370px;
border-radius: 40%;
opacity: .7;
animation-duration: 9s;
animation-direction: reverse;
}
/* 旋转动画 */
@keyframes rotate {
to {
transform: translate(-50%, 0) rotate(360deg);
}
}
/* 百分比文字 */
.txt {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font: 24px/1 sans-serif;
color: #0d47a1;
z-index: 2;
}
.thematic-box {
height: 1500px;
}
.title-text {
font-size: 32px;
font-weight: 700;
line-height: 42px;
margin: 40px;
text-align: center;
}
.title-img {
width: 100%;
height: 42px;
}
.thematic-content {
/* 容器 480 */
width: 100%;
height: 450px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---, 10px);
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.item-header {
height: 48px;
width: 100%;
display: flex;
.item-header-icon {
width: 20px;
height: 20px;
margin: 15px;
}
.item-header-text {
width: 250px;
font-size: 20px;
font-weight: 700;
line-height: 26px;
background: rgba(255, 255, 255, 0.65);
color: #055FC2;
font-family: Microsoft YaHei;
font-size: 20px;
line-height: 48px;
text-align: left;
}
.item-header-right {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
line-height: 48px;
text-align: right;
width: calc(100% - 350px);
.item-header-right-icon {
/* 容器 704 */
width: 14px;
height: 16px;
}
}
}
.timeLine-box {
height: 100%;
width: calc(100% - 50px);
.time-item-box {
width: 30%;
height: 165px;
}
}
.item-header-divider {
/* 矩形 249 */
width: 100%;
height: 1px;
background: #eaecee;
}
.thematic-btn-left {
height: 100%;
width: 24px;
}
.thematic-btn-right {
height: 100%;
width: 24px;
}
.thematic-btn-icon {
height: 48px;
width: 100%;
margin-top: calc(50% - 24px);
}
}
</style>
src/views/overView/component/Thematicanalysis.vue 0 → 100644
浏览文件 @ 63a21e28
<!-- 中M博弈概览页 -->
<template>
<div class="thematic-box">
<div class="title-text">中美博弈专题分析</div>
<img class="title-img" src="@/assets/images/bg/概览页模块标题.png"></img>
<div class="thematic-content">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">对华打压历程</div>
<div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
数据来源：美国某某局</div>
</div>
<div class="item-header-divider"></div>
<div style="display: flex;height: calc(100% - 60px);">
<div class="thematic-btn-left" @click="changeBtn('timwLine', 'left')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-left.png"></img>
</div>
<div class="timeLine-box">
<div style="height: calc(50% - 8px);display: flex">
<div v-for="(item, index) in timeLineOddIndexItems" class="time-item-box">
{{ item.titlle }}
</div>
</div>
<img style=" width: 100%; height: 10px;" src="@/assets/images/bg/time-line.png"></img>
<div style="height: calc(50% - 8px);display: flex;">
<div v-for="(item, index) in timeLineIndexItems" class="time-item-box">
{{ item.titlle }}
</div>
</div>
</div>
<div class="thematic-btn-right" @click="changeBtn('right')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-right.png"></img>
</div>
</div>
</div>
<div class="thematic-content" style="margin-top: 20px;height: 350px;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">打压遏制手段分布</div>
</div>
<div class="item-header-divider"></div>
<div style="display: flex;height: calc(100% - 60px);">
<div class="thematic-btn-left" @click="changeBtn('timwLine', 'left')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-left.png"></img>
</div>
<div class="cup-box" style="display: flex;">
<div v-for="item in distribution" class="cup-item-box" :style="{
color: item.borderColor
}">
<div class="cup-title">
{{ item.titlle }}
</div>
<div class="cup" :style="{
borderColor: item.bgColor1,
outlineColor: item.bgColor1,
}">
<!-- 水位 -->
<div class="water" :style="{
'--percent': item.value,
'--c1': item.bgColor1,
'--c2': item.bgColor2,
}"></div>
<!-- 文字 -->
<span class="txt" :style="{ color: item.borderColor, }">{{ item.text }}</span>
</div>
<div style="margin-top: 20px;">
{{ item.change }}
</div>
</div>
</div>
<div class="thematic-btn-right" @click="changeBtn('right')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-right.png"></img>
</div>
</div>
</div>
<div style="margin-top: 20px;height: 450px;display: flex;">
<div class="thematic-content" style="width: 45%; display: block;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">打压遏制强度变化</div>
<div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
数据来源：美国某某局</div>
</div>
<div class="item-header-divider"></div>
<div style="display: flex;height: calc(100% - 60px);" id="chart1">
</div>
</div>
<div class="thematic-content" style="width: 45%;margin-left: 5%;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">打压遏制强度变化</div>
<div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
数据来源：美国某某局</div>
</div>
<div class="item-header-divider"></div>
<div style="display: flex;height: calc(100% - 60px);" id="char2">
</div>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import getBarChart from '../js/barChart.js'
import radarChart from '../js/radarChart.js'
const timeLine = ref([
{
time: '2025年1月',
titlle: '《AI扩散暂行最终规则》发布0',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
},
{
time: '2025年1月',
titlle: '《AI扩散暂行最终规则》发布1',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
},
{
time: '2025年1月',
titlle: '特朗普签署EO 143202',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
},
{
time: '2025年1月',
titlle: '《AI扩散暂行最终规则》发布3',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
},
{
time: '2025年7月23日',
titlle: '《AI扩散暂行最终规则》发布4',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
},
])
// 过滤出奇数下标（1,3,5...）
const timeLineOddIndexItems = computed(() =>
timeLine.value.filter((_, idx) => idx % 2 === 1)
)
// 过滤出偶数下标（1,3,5...）
const timeLineIndexItems = computed(() =>
timeLine.value.filter((_, idx) => idx % 2 === 0)
)
const distribution = ref([
{
titlle: '法案',
value: 80,
text: '1626个',
change: '较上个月+3',
bgColor1: '#E6F4FF',//浅色
bgColor2: '#91CAFF',//深色
borderColor: '#0958D9',
}, {
titlle: '法案',
value: 20,
text: '1626个',
change: '较上个月+3',
bgColor1: '#FFFBE6',//浅色
bgColor2: '#FDE19A',//深色
borderColor: '#D48806',
}, {
titlle: '法案',
value: 10,
text: '1626个',
change: '较上个月+3',
bgColor1: '#E6F4FF',//浅色
bgColor2: '#91CAFF',//深色
borderColor: '#0958D9',
}, {
titlle: '法案',
value: 40,
text: '1626个',
change: '较上个月+3',
bgColor1: '#E6F4FF',//浅色
bgColor2: '#91CAFF',//深色
borderColor: '#0958D9',
}, {
titlle: '法案',
value: 50,
text: '1626个',
change: '较上个月+3',
bgColor1: '#E6F4FF',//浅色
bgColor2: '#91CAFF',//深色
borderColor: '#0958D9',
}
])
const timeIndex = ref(0)
//时间轴及遏制手段分布按钮
function changeBtn(data, type) {
if (type === 'left') {
timeIndex.value === 0 ? '' : timeIndex.value = timeIndex.value - 1
} else {
(timeIndex.value.length - timeIndex.value <= 4) ? '' : timeIndex.value = timeIndex.value + 1
}
}
const chart1Data = ref({
name: [
"2024-12",
"2025-1",
"2025-2", "2025-3", "2025-4", "2025-5", "2025-6", "2025-7",
],
value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79],
});
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
console.log(chartDom, 'chartDomchartDomchartDom')
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
onMounted(() => {
let char1 = getBarChart(chart1Data.value.name, chart1Data.value.value, true);
setChart(char1, "chart1");
let char2 = radarChart()
setChart(char2, "char2");
});
</script>
<style lang="scss" scoped>
.cup-box {
overflow-x: auto;
.cup-item-box {
width: 220px;
text-align: center;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---, 10px);
margin: 20px;
padding: 20px;
.cup-title {
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: center;
margin-bottom: 20px;
}
}
}
/* 杯子：正圆 */
.cup {
position: relative;
width: 130px;
height: 130px;
/* 本身高度设为 0，内容靠子元素或绝对定位 */
border-radius: 50%;
border: 4px #2196f3 solid;
overflow: hidden;
/* 关键：把超出部分裁掉 */
display: flex;
align-items: flex-end;
/* 水永远贴底 */
justify-content: center;
border: 4px solid #2196f3;
/* 内圈实线 */
outline: 4px solid #2196f3;
/* 外圈实线 */
outline-offset: 4px;
/* 两线间距，想再宽调大即可 */
}
/* 水位层 */
.water {
width: 100%;
height: calc(var(--percent) * 1%);
/* 0~100 对应 0~100% */
background: linear-gradient(to top, var(--c1), var(--c2));
position: relative;
animation: wave 3s linear infinite;
}
/* 波浪 */
.water::before,
.water::after {
content: '';
position: absolute;
width: 400px;
height: 400px;
top: -350px;
/* 把圆心顶到上面去 */
left: 50%;
border-radius: 45%;
transform: translate(-50%, 0);
background: rgba(255, 255, 255, .4);
animation: rotate 7s linear infinite;
}
.water::after {
top: -370px;
border-radius: 40%;
opacity: .7;
animation-duration: 9s;
animation-direction: reverse;
}
/* 旋转动画 */
@keyframes rotate {
to {
transform: translate(-50%, 0) rotate(360deg);
}
}
/* 百分比文字 */
.txt {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font: 24px/1 sans-serif;
color: #0d47a1;
z-index: 2;
}
.thematic-box {
height: 1500px;
}
.title-text {
font-size: 32px;
font-weight: 700;
line-height: 42px;
margin: 40px;
text-align: center;
}
.title-img {
width: 100%;
height: 42px;
}
.thematic-content {
/* 容器 480 */
width: 100%;
height: 450px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---, 10px);
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.item-header {
height: 48px;
width: 100%;
display: flex;
.item-header-icon {
width: 20px;
height: 20px;
margin: 15px;
}
.item-header-text {
width: 250px;
font-size: 20px;
font-weight: 700;
line-height: 26px;
background: rgba(255, 255, 255, 0.65);
color: #055FC2;
font-family: Microsoft YaHei;
font-size: 20px;
line-height: 48px;
text-align: left;
}
.item-header-right {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
line-height: 48px;
text-align: right;
width: calc(100% - 350px);
.item-header-right-icon {
/* 容器 704 */
width: 14px;
height: 16px;
}
}
}
.timeLine-box {
height: 100%;
width: calc(100% - 50px);
.time-item-box {
width: 30%;
height: 165px;
}
}
.item-header-divider {
/* 矩形 249 */
width: 100%;
height: 1px;
background: #eaecee;
}
.thematic-btn-left {
height: 100%;
width: 24px;
}
.thematic-btn-right {
height: 100%;
width: 24px;
}
.thematic-btn-icon {
height: 48px;
width: 100%;
margin-top: calc(50% - 24px);
}
}
</style>
src/views/overView/js/barChart.js 0 → 100644
浏览文件 @ 63a21e28
import * as echarts from "echarts";
const getColumnChart = (nameList, valueList, isPer) => {
const colorList = ['#0958D9', '#0958D9']
return {
tooltip: {},
grid: { top: '10%', right: '3%', bottom: '15%', left: '3%', containLabel: true },
color: colorList,
xAxis: {
type: 'category',
data: nameList,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
show: true,
rotate: 45, // ① 文字 45°
color: '#666',
fontSize: 12
}
},
yAxis: {
type: 'value',
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: true, color: '#666' }, // ② Y 轴文字
splitLine: { // ③ 横向参考线
show: true,
lineStyle: { color: '#ebebeb', width: 1 }
}
},
series: [{
type: 'bar',
data: valueList.map((v, i) => ({
value: v,
label: { show: false, position: 'top', color: i < 3 ? colorList[0] : colorList[1] }
})),
barWidth: 16,
itemStyle: {
borderRadius: [8, 8, 0, 0],
color: params => {
const colors = params.dataIndex < 3
? [colorList[0], 'rgba(255,255,255,0)']
: [colorList[1], 'rgba(255,255,255,0)']
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[0] },
{ offset: 1, color: colors[1] }
])
}
},
label: {
show: true,
position: 'top',
formatter: v => (isPer ? v.value + '%' : v.value)
}
}]
}
}
export default getColumnChart
\ No newline at end of file
src/views/overView/js/radarChart.js 0 → 100644
浏览文件 @ 63a21e28
import * as echarts from "echarts";
const getBarChart = (nameList, valueList, isPer) => {
const option = {
title: {
text: ""
},
// grid: {
// top: 100
// },
legend: {
top: 0,
icon: "circle",
data: ["能源", "集成电路", "人工智能", '通信网络', '量子科技', '生物科技']
},
radar: {
// shape: 'circle',
indicator: [
{ name: "能源", max: 6500 },
{ name: "集成电路", max: 16000 },
{ name: "人工智能", max: 30000 },
{ name: "通信网络", max: 38000 },
{ name: "量子科技", max: 52000 },
{ name: "生物科技", max: 25000 }
],
axisName: {
formatter: "{value}",
color: "rgba(59, 65, 75, 1)",
fontSize: 16,
fontWeight: 700
}
},
series: [
{
name: "Budget vs spending",
type: "radar",
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: "法案",
areaStyle: {
color: "rgba(10, 87, 166, 0.2)"
}
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: "行政令",
areaStyle: {
color: "rgba(206, 79, 81, 0.2)"
}
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: "科技智库",
areaStyle: {
color: "rgba(250, 140, 22, 0.2)"
}
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: "出口管制",
areaStyle: {
color: "rgba(250, 140, 22, 0.2)"
}
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: "投融资限制",
areaStyle: {
color: "rgba(250, 140, 22, 0.2)"
}
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: "市场准入",
areaStyle: {
color: "rgba(250, 140, 22, 0.2)"
}
}
]
}
]
}
return option
}
export default getBarChart
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论