Skip to content

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

创新主体-领域布局接口对接

上级 ef1fa7e0
隐藏空白字符变更
内嵌 并排
正在显示 包含 477 行增加 和 445 行删除
src/api/innovationSubject/overview.js
浏览文件 @ f9544ee1
...@@ -40,4 +40,23 @@ export function getOverallRanking(params) { ...@@ -40,4 +40,23 @@ export function getOverallRanking(params) {
url: `/api/innovateSubject/overallRanking`, url: `/api/innovateSubject/overallRanking`,
params params
}) })
} }
\ No newline at end of file
//创新主体主页:领域布局
export function getResearchField(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/researchField`,
params
})
}
//创新主体主页:主体类型分类领域布局
export function getResearchFieldSubjectType(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/researchFieldSubjectType`,
params
})
}
src/views/innovationSubject/index.vue
浏览文件 @ f9544ee1
...@@ -240,7 +240,7 @@ ...@@ -240,7 +240,7 @@
</div> </div>
</div> </div>
<div class="select-box"> <div class="select-box">
<el-select v-model="releaseTime" placeholder="2022" style="width: 120px" <el-select v-model="releaseTime" pl aceholder="2022" style="width: 120px"
@change="handleGetOverallRanking"> @change="handleGetOverallRanking">
<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label" <el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label"
:value="item.value" /> :value="item.value" />
...@@ -308,7 +308,8 @@ ...@@ -308,7 +308,8 @@
</div> </div>
</div> </div>
<div class="select-box"> <div class="select-box">
<el-select v-model="releaseTime" placeholder="2022" style="width: 120px"> <el-select v-model="releaseTime" placeholder="2022" style="width: 120px"
@change="handleGetResearchField(), handleGetResearchFieldSubjectType()">
<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label" <el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label"
:value="item.value" /> :value="item.value" />
</el-select> </el-select>
...@@ -324,7 +325,7 @@ ...@@ -324,7 +325,7 @@
</div> </div>
<div class="center-footer-layout-content"> <div class="center-footer-layout-content">
<div class="center-footer-layout-content-item"> <div class="center-footer-layout-content-item">
<EChart :option="pieOption" autoresize :style="{ height: '370px', width: '750px' }" /> <EChart :option="pieOption(barOptionData)" autoresize :style="{ height: '370px', width: '750px' }" />
<div class="center-footer-elx-footer"> <div class="center-footer-elx-footer">
<img src="./assets/images/ai.png" alt="" /> <img src="./assets/images/ai.png" alt="" />
<div class="center-footer-elx-footer-text"> <div class="center-footer-elx-footer-text">
...@@ -335,7 +336,8 @@ ...@@ -335,7 +336,8 @@
</div> </div>
<div style="width: 1px;height: 432px;background: rgba(234, 236, 238, 1);"></div> <div style="width: 1px;height: 432px;background: rgba(234, 236, 238, 1);"></div>
<div class="center-footer-layout-content-item"> <div class="center-footer-layout-content-item">
<EChart :option="raderOption" autoresize :style="{ height: '370px', width: '750px' }" /> <EChart :option="raderOption(raderOptionData)" autoresize
:style="{ height: '370px', width: '750px' }" />
<div class="center-footer-elx-footer"> <div class="center-footer-elx-footer">
<img src="./assets/images/ai.png" alt="" /> <img src="./assets/images/ai.png" alt="" />
<div class="center-footer-elx-footer-text"> <div class="center-footer-elx-footer-text">
...@@ -413,7 +415,9 @@ import { ...@@ -413,7 +415,9 @@ import {
getCountSubjectType, getCountSubjectType,
getSubjectTypeList, getSubjectTypeList,
findListBySubjectTypeId, findListBySubjectTypeId,
getOverallRanking getOverallRanking,
getResearchField,
getResearchFieldSubjectType
} from "@/api/innovationSubject/overview.js"; } from "@/api/innovationSubject/overview.js";
import setChart from "@/utils/setChart"; import setChart from "@/utils/setChart";
...@@ -884,6 +888,43 @@ const releaseTimeList = ref([ ...@@ -884,6 +888,43 @@ const releaseTimeList = ref([
]); ]);
const categoryList = ref(["创新主体排名", "研究布局"]); const categoryList = ref(["创新主体排名", "研究布局"]);
const activeCate = ref("创新主体排名"); const activeCate = ref("创新主体排名");
//研究领域布局情况
const barOptionData = ref([])
const handleGetResearchField = async () => {
try {
let params = {
year: releaseTime.value,
}
const res = await getResearchField(params);
console.log("研究领域布局情况", res);
if (res.code === 200 && res.data) {
// 提取 names 和 values
const names = res.data.map(item => item.areaName);
const values = res.data.map(item => item.amount); // 或者使用 item.percent，根据需求选择
const total = res.data.reduce((sum, item) => sum + item.amount, 0);
barOptionData.value = {
names, values, total
}
}
} catch (error) {
console.error("获取研究领域布局情况error", error);
}
};
const raderOptionData = ref([])
const handleGetResearchFieldSubjectType = async () => {
try {
let params = {
year: releaseTime.value,
}
const res = await getResearchFieldSubjectType(params);
console.log("研究领域布局情况", res);
if (res.code === 200 && res.data) {
raderOptionData.value = res.data
}
} catch (error) {
console.error("获取研究领域布局情况error", error);
}
};
const areaList = ref([ const areaList = ref([
{ {
...@@ -965,6 +1006,8 @@ onMounted(async () => { ...@@ -965,6 +1006,8 @@ onMounted(async () => {
handleGetOverallRanking() handleGetOverallRanking()
handleFindListBySubjectTypeId() handleFindListBySubjectTypeId()
handleGetResearchField()
handleGetResearchFieldSubjectType()
let chart1 = getPieChart(chart1Data.value, colorList); let chart1 = getPieChart(chart1Data.value, colorList);
setChart(chart1, "chart1"); setChart(chart1, "chart1");
}); });
......
src/views/innovationSubject/utils/charts.js
浏览文件 @ f9544ee1
import * as echarts from "echarts"; import * as echarts from "echarts";
var data = [
{
name: "人工智能与信息技术",
value: 27
},
{
name: "生物医学与健康",
value: 22
},
{
name: "能源与环境技术",
value: 18
},
{
name: "先进制造与材料",
value: 15
},
{
name: "国家安全与国防",
value: 12
},
{
name: "航空航天",
value: 8
}
];
// 计算总和 // 计算总和
function getTotal(data) { function getTotal(data) {
return data.reduce((sum, item) => sum + item.value, 0); return data.reduce((sum, item) => sum + item.value, 0);
}; };
export const pieOption = (data) => {
export const pieOption = { console.log(data, 'datadatadata')
tooltip: { // 颜色数组
trigger: 'item' const colors = [
}, 'rgba(105, 177, 255, 1)',
legend: { 'rgba(255, 236, 61, 1)',
orient: 'vertical', 'rgba(135, 232, 222, 1)',
x: 'right', 'rgba(133, 165, 255, 1)',
y: 'center', 'rgba(255, 120, 117, 1)',
align: 'left', 'rgba(179, 127, 235, 1)',
left:'50%', 'rgba(255, 187, 120, 1)',
data: data.map(item => item.name), 'rgba(120, 255, 180, 1)',
textStyle: { // 图例字体样式 'rgba(255, 150, 150, 1)'
color: "rgba(59, 65, 75, 1)", ];
fontSize: 16 const seriesData = data.names.map((name, index) => ({
}, name,
formatter: function(name) { value: data.values[index],
var total = getTotal(data); itemStyle: { color: colors[index % colors.length] }
var item = data.find(item => item.name === name); }));
var percentage = ((item.value / total) * 100).toFixed(2); const option = {
return `${name} ${percentage}%`; tooltip: {
} trigger: 'item'
}, },
series: [ legend: {
{ orient: 'vertical',
name: '频度', x: 'right',
type: 'pie', y: 'center',
center: ['25%', '50%'], align: 'left',
radius: ['40%', '70%'], left: '50%',
avoidLabelOverlap: false, data: data.names,
label: { textStyle: { // 图例字体样式
show: false, color: "rgba(59, 65, 75, 1)",
position: 'center' fontSize: 16
},
labelLine: {
show: false
}, },
data: [ // formatter: function (name) {
{ // var total = data.total;
name: "人工智能与信息技术", // var item = data.find(item => item.name === name);
value: 27, // var percentage = ((item.value / total) * 100).toFixed(2);
itemStyle:{color: 'rgba(105, 177, 255, 1)'} // return `${name} ${percentage}%`;
}, // }
{ },
name: "生物医学与健康", series: [
value: 22, {
itemStyle:{color: 'rgba(255, 236, 61, 1)'} name: '频度',
}, type: 'pie',
{ center: ['25%', '50%'],
name: "能源与环境技术", radius: ['40%', '70%'],
value: 18, avoidLabelOverlap: false,
itemStyle:{color: 'rgba(135, 232, 222, 1)'} label: {
}, show: false,
{ position: 'center'
name: "先进制造与材料",
value: 15,
itemStyle:{color: 'rgba(133, 165, 255, 1)'}
}, },
{
name: "国家安全与国防", labelLine: {
value: 12, show: false
itemStyle:{color: 'rgba(255, 120, 117, 1)'}
}, },
{ data: seriesData
name: "航空航天", }
value: 8, ]
itemStyle:{color: 'rgba(179, 127, 235, 1)'} };
} return option
] }
}
]
};
var data1 = [ var data1 = [
{ {
...@@ -134,17 +98,17 @@ export const pieOption1 = { ...@@ -134,17 +98,17 @@ export const pieOption1 = {
x: 'right', x: 'right',
y: 'center', y: 'center',
align: 'left', align: 'left',
left:'60%', left: '60%',
data: data1.map(item => item.name), data: data1.map(item => item.name),
textStyle: { // 图例字体样式 textStyle: { // 图例字体样式
color: "rgba(59, 65, 75, 1)", color: "rgba(59, 65, 75, 1)",
fontSize: 16 fontSize: 16
}, },
formatter: function(name) { formatter: function (name) {
var total = getTotal(data1); var total = getTotal(data1);
var item = data1.find(item => item.name === name); var item = data1.find(item => item.name === name);
var percentage = ((item.value / total) * 100).toFixed(2); var percentage = ((item.value / total) * 100).toFixed(2);
return `${name} ${percentage}%`; return `${name} ${percentage}%`;
} }
}, },
series: [ series: [
...@@ -158,7 +122,7 @@ export const pieOption1 = { ...@@ -158,7 +122,7 @@ export const pieOption1 = {
show: false, show: false,
position: 'center' position: 'center'
}, },
labelLine: { labelLine: {
show: false show: false
}, },
...@@ -166,58 +130,84 @@ export const pieOption1 = { ...@@ -166,58 +130,84 @@ export const pieOption1 = {
{ {
name: "捐赠基金", name: "捐赠基金",
value: 27, value: 27,
itemStyle:{color: 'rgba(105, 177, 255, 1)'} itemStyle: { color: 'rgba(105, 177, 255, 1)' }
}, },
{ {
name: "政府拨款", name: "政府拨款",
value: 22, value: 22,
itemStyle:{color: 'rgba(255, 236, 61, 1)'} itemStyle: { color: 'rgba(255, 236, 61, 1)' }
}, },
{ {
name: "企业合作", name: "企业合作",
value: 18, value: 18,
itemStyle:{color: 'rgba(135, 232, 222, 1)'} itemStyle: { color: 'rgba(135, 232, 222, 1)' }
}, },
{ {
name: "学费收入", name: "学费收入",
value: 15, value: 15,
itemStyle:{color: 'rgba(133, 165, 255, 1)'} itemStyle: { color: 'rgba(133, 165, 255, 1)' }
}, },
{ {
name: "其他来源", name: "其他来源",
value: 12, value: 12,
itemStyle:{color: 'rgba(255, 120, 117, 1)'} itemStyle: { color: 'rgba(255, 120, 117, 1)' }
} }
] ]
} }
] ]
}; };
export const raderOption = (data) => {
// 提取所有可能的 areaName
const allAreaNames = new Set();
data.forEach(subject => {
subject.areaVoList.forEach(area => {
allAreaNames.add(area.areaName);
});
});
const indicatorNames = Array.from(allAreaNames);
// 定义雷达图的指标最大值（可以根据实际数据调整）
const indicatorMaxValues = {};
indicatorNames.forEach(name => {
indicatorMaxValues[name] = 5; // 假设每个指标的最大值为 5
});
export const raderOption = { // 生成雷达图的 indicator 配置
const radarIndicators = indicatorNames.map(name => ({
name,
max: indicatorMaxValues[name]
}));
// 为每个 subjectTypeName 生成雷达图数据
const radarSeriesData = data.map(subject => {
const values = indicatorNames.map(indicator => {
const area = subject.areaVoList.find(a => a.areaName === indicator);
return area ? area.amount : 0; // 如果存在该指标，取其 amount 值，否则为 0
});
return {
value: values,
name: subject.subjectTypeName,
areaStyle: { color: `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.2)` }
};
});
// 雷达图配置
const option = {
title: { text: '' }, title: { text: '' },
legend: { legend: {
icon: 'circle', icon: 'circle',
orient: 'vertical', // 纵向排列 orient: 'vertical',
right: 50, // 贴右边 right: 50,
top: 'center', // 垂直居中 top: 'center',
align: 'left', // 文字在图标左侧 align: 'left',
textStyle: { // 图例字体样式 textStyle: {
color: "rgba(59, 65, 75, 1)", color: "rgba(59, 65, 75, 1)",
fontSize: "16px" fontSize: "16px"
} }
}, },
radar: { radar: {
radius: '60%', // 关键：缩小整个雷达 radius: '60%',
indicator: [ indicator: radarIndicators,
{ name: '能源领域', max: 6500 },
{ name: '集成电路', max: 16000 },
{ name: '人工智能', max: 30000 },
{ name: '通信网络', max: 38000 },
{ name: '量子科技', max: 52000 },
{ name: '生物科技', max: 25000 }
],
axisName: { axisName: {
formatter: '{value}', formatter: '{value}',
color: 'rgba(59, 65, 75, 1)', color: 'rgba(59, 65, 75, 1)',
...@@ -229,358 +219,339 @@ export const raderOption = { ...@@ -229,358 +219,339 @@ export const raderOption = {
{ {
name: 'Budget vs spending', name: 'Budget vs spending',
type: 'radar', type: 'radar',
data: [ data: radarSeriesData
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '研究型大学',
areaStyle: { color: 'rgba(5, 95, 194, 0.2)' }
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: '国家实验室',
areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: '科技企业',
areaStyle: { color: 'rgba(179, 127, 235, 0.2)' }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: '国防承包商',
areaStyle: { color: 'rgba(33, 129, 57, 0.2)' }
}
]
} }
] ]
}; };
return option;
}
export const raderOption1 = { export const raderOption1 = {
grid: { grid: {
top: '3%', top: '3%',
right: '3%', right: '3%',
bottom: '1%', bottom: '1%',
left: '1%', left: '1%',
containLabel: true containLabel: true
}, },
radar: { radar: {
radius: '60%', // 关键：缩小整个雷达 radius: '60%', // 关键：缩小整个雷达
indicator: [ indicator: [
{ name: '能源领域', max: 6500 }, { name: '能源领域', max: 6500 },
{ name: '集成电路', max: 16000 }, { name: '集成电路', max: 16000 },
{ name: '人工智能', max: 30000 }, { name: '人工智能', max: 30000 },
{ name: '通信网络', max: 38000 }, { name: '通信网络', max: 38000 },
{ name: '量子科技', max: 52000 }, { name: '量子科技', max: 52000 },
{ name: '生物科技', max: 25000 } { name: '生物科技', max: 25000 }
], ],
axisName: { axisName: {
formatter: '{value}', formatter: '{value}',
color: 'rgba(59, 65, 75, 1)', color: 'rgba(59, 65, 75, 1)',
fontSize: 16, fontSize: 16,
fontWeight: 700 fontWeight: 700
} }
}, },
series: [ series: [
{ {
name: 'Budget vs spending', name: 'Budget vs spending',
type: 'radar', type: 'radar',
data: [ data: [
{ {
value: [4200, 3000, 20000, 35000, 50000, 18000], value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '哈佛大学', name: '哈佛大学',
areaStyle: { color: 'rgba(179, 127, 235, 0.1)' } areaStyle: { color: 'rgba(179, 127, 235, 0.1)' }
} }
] ]
} }
] ]
}; };
export const barOption = { export const barOption = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
type: "shadow" type: "shadow"
} }
},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
xAxis: [{
axisLine: {
lineStyle: {
width: 1,
color: "rgba(231, 243, 255, 1)"
}
}, },
grid: { axisTick:
top: '3%', { show: false },
right: '3%', type: "category",
bottom: '1%', boundaryGap: [100, 100],
left: '1%', axisLabel: {
containLabel: true color: "rgba(95, 101, 108, 1)",
// fontSize: 22,
// fontWeight: 400
}, },
data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
xAxis: [{ }],
axisLine: {
lineStyle: {
width: 1,
color: "rgba(231, 243, 255, 1)"
}
},
axisTick:
{ show: false },
type: "category",
boundaryGap: [100, 100],
axisLabel: {
color: "rgba(95, 101, 108, 1)",
// fontSize: 22,
// fontWeight: 400
},
data: ["2016","2017","2018","2019", "2020", "2021", "2022", "2023", "2024", "2025"],
}],
yAxis: {
type: "value",
axisLine: {
lineStyle: {
type: "dashed"
}
},
axisLabel: { yAxis: {
color: "rgba(95, 101, 108, 1)", type: "value",
// fontSize: 22, axisLine: {
// fontWeight: 400 lineStyle: {
}, type: "dashed"
splitNumber: 5, }
splitLine: { },
lineStyle: {
width: 1,
type: "dashed",
color: "rgba(231, 243, 255, 1)"
},
} axisLabel: {
color: "rgba(95, 101, 108, 1)",
// fontSize: 22,
// fontWeight: 400
}, },
series: [ splitNumber: 5,
{ splitLine: {
name: "专利数量", lineStyle: {
data: [80, 90, 110, 130, 140, 160, 200,250,300,340], width: 1,
type: "bar", type: "dashed",
barWidth: 20, color: "rgba(231, 243, 255, 1)"
itemStyle: { },
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(46, 165, 255, 1)" },
// { offset: 0.5, color: '#188df0' },
{ offset: 1, color: "rgba(46, 165, 255, 0)" }
])
// borderRadius: [6, 6, 0, 0]
},
label:{
show:false,
position:'top',
textStyle:{
fontSize:'20px',
fontWeight:400,
color:'rgba(255, 255, 255, 1)'
}
} }
},
series: [
{
name: "专利数量",
data: [80, 90, 110, 130, 140, 160, 200, 250, 300, 340],
type: "bar",
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(46, 165, 255, 1)" },
// { offset: 0.5, color: '#188df0' },
{ offset: 1, color: "rgba(46, 165, 255, 0)" }
])
// borderRadius: [6, 6, 0, 0]
},
label: {
show: false,
position: 'top',
textStyle: {
fontSize: '20px',
fontWeight: 400,
color: 'rgba(255, 255, 255, 1)'
} }
]
}
}
]
}; };
export const lineChart = { export const lineChart = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
type: "shadow" type: "shadow"
} }
},
grid: {
left: '2%',
top: '8%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: false
}, },
grid: { axisLine: {
left: '2%', show: false
top: '8%',
right: '2%',
bottom: '3%',
containLabel: true
}, },
xAxis: { data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
type: 'category', },
boundaryGap: false, yAxis: {
splitLine: { type: 'value',
show: false splitLine: {
}, show: true, lineStyle: {
axisLine: { type: "dashed",
show: false color: "#E7F3FF"
}, }
data: ["2016","2017","2018","2019", "2020", "2021", "2022", "2023", "2024", "2025"],
}, },
yAxis: { axisLine: {
type: 'value', show: false
splitLine: { },
show: true, lineStyle: {
type: "dashed", },
color: "#E7F3FF" color: ['rgba(255, 149, 77, 1)'],
} series: [
{
data: [50, 60, 80, 100, 110, 140, 180, 260, 280, 330],
type: 'line',
emphasis: {
focus: 'series'
}, },
axisLine: { areaStyle: {
show: false color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 149, 77, 0.5)' // 起始颜色：深色
}, {
offset: 1,
color: 'rgba(255, 149, 77, 0)' // 结束颜色：浅色且透明度降低
}])
}, },
}
]
},
color: ['rgba(255, 149, 77, 1)'],
series: [
{
data: [50,60,80,100,110,140,180,260,280,330],
type: 'line',
emphasis: {
focus: 'series'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 149, 77, 0.5)' // 起始颜色：深色
}, {
offset: 1,
color: 'rgba(255, 149, 77, 0)' // 结束颜色：浅色且透明度降低
}])
},
}
]
}; };
export const lineChart1 = { export const lineChart1 = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
type: "shadow" type: "shadow"
} }
},
grid: {
left: '2%',
top: '8%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: false
}, },
grid: { axisLine: {
left: '2%', show: false
top: '8%',
right: '2%',
bottom: '3%',
containLabel: true
}, },
xAxis: { data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
type: 'category', },
boundaryGap: false, yAxis: {
splitLine: { type: 'value',
show: false splitLine: {
}, show: true, lineStyle: {
axisLine: { type: "dashed",
show: false color: "#E7F3FF"
}, }
data: ["2016","2017","2018","2019", "2020", "2021", "2022", "2023", "2024", "2025"],
}, },
yAxis: { axisLine: {
type: 'value', show: false
splitLine: { },
show: true, lineStyle: {
type: "dashed", },
color: "#E7F3FF" color: ['rgba(33, 129, 57, 1)'],
} series: [
{
data: [50, 60, 80, 100, 110, 140, 180, 260, 280, 330],
type: 'line',
emphasis: {
focus: 'series'
}, },
axisLine: { areaStyle: {
show: false color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(33, 129, 57, 0.5)' // 起始颜色：深色
}, {
offset: 1,
color: 'rgba(33, 129, 57, 0)' // 结束颜色：浅色且透明度降低
}])
}, },
}
]
},
color: ['rgba(33, 129, 57, 1)'],
series: [
{
data: [50,60,80,100,110,140,180,260,280,330],
type: 'line',
emphasis: {
focus: 'series'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(33, 129, 57, 0.5)' // 起始颜色：深色
}, {
offset: 1,
color: 'rgba(33, 129, 57, 0)' // 结束颜色：浅色且透明度降低
}])
},
}
]
}; };
const nameList = ["教育学院","文理学院","法学院","商学院","工程学院","医学院"]; const nameList = ["教育学院", "文理学院", "法学院", "商学院", "工程学院", "医学院"];
const valueList = [21,21,25,79,95,109]; const valueList = [21, 21, 25, 79, 95, 109];
export const horizontalBaroption = { export const horizontalBaroption = {
grid: { grid: {
top: '0', top: '0',
right: '3%', right: '3%',
bottom: '1%', bottom: '1%',
left: '1%', left: '1%',
containLabel: true containLabel: true
},
color: ['#ce4f51', '#1778ff'],
xAxis: {
type: 'value',
splitLine: {
show: false
}, },
color: ['#ce4f51', '#1778ff'], show: false
xAxis: { },
type: 'value', yAxis: {
splitLine: { type: 'category',
show: false data: nameList,
}, splitLine: {
show: false show: false
}, },
yAxis: { axisTick: {
type: 'category', show: false
data: nameList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true
}
}, },
series: [{ axisLine: {
type: 'bar', show: false
data: valueList.map((item, index) => { },
return { axisLabel: {
value: item, show: true
label: { }
textStyle: { },
color: index < 3 ? '#1778ff' : '#ce4f51' series: [{
} type: 'bar',
} data: valueList.map((item, index) => {
}; return {
}), value: item,
label: { label: {
show: true, textStyle: {
position: [650, -2] color: index < 3 ? '#1778ff' : '#ce4f51'
}, }
barWidth: 8, }
itemStyle: { };
color: function (params) { }),
if (params.dataIndex < 3) { label: {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, show: true,
[{ position: [650, -2]
offset: 0, },
color: 'rgba(22, 119, 255, 0)' barWidth: 8,
}, itemStyle: {
{ color: function (params) {
offset: 1, if (params.dataIndex < 3) {
color: '#1778ff' return new echarts.graphic.LinearGradient(0, 0, 1, 0,
} [{
]); offset: 0,
} else { color: 'rgba(22, 119, 255, 0)'
return new echarts.graphic.LinearGradient(0, 0, 1, 0, },
[{ {
offset: 0, offset: 1,
color: 'rgba(206, 79, 81, 0)' color: '#1778ff'
}, }
{ ]);
offset: 1, } else {
color: '#ce4f51' return new echarts.graphic.LinearGradient(0, 0, 1, 0,
} [{
]); offset: 0,
} color: 'rgba(206, 79, 81, 0)'
}, },
barBorderRadius: 4, {
offset: 1,
color: '#ce4f51'
}
]);
} }
}]
}; },
\ No newline at end of file barBorderRadius: 4,
}
}]
};
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论