提交 4baedea7 authored 作者: 李智林's avatar 李智林

update

上级 5c8cf7a1
差异被折叠。
...@@ -10,18 +10,17 @@ const getMultiLineChart = (data) => { ...@@ -10,18 +10,17 @@ const getMultiLineChart = (data) => {
const echartsSeries = series.map((item, index) => ({ const echartsSeries = series.map((item, index) => ({
name: item.name, name: item.name,
type: 'line', type: 'line',
// areaStyle: { symbol: 'circle',
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ symbolSize: 8,
// { itemStyle: {
// offset: 0, color: '#fff', // 图表圆点内部为白色
// color: item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)` // 随机颜色 borderColor: item.color, // 圆点边框为系列颜色
// }, borderWidth: 2
// { },
// offset: 1, lineStyle: {
// color: item.color ? `${item.color.replace('0.7', '0')}` : `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0)` // 随机颜色 width: 2,
// } color: item.color
// ]) },
// },
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
...@@ -29,38 +28,84 @@ const getMultiLineChart = (data) => { ...@@ -29,38 +28,84 @@ const getMultiLineChart = (data) => {
})); }));
return { return {
color: series.map(item => item.color),
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { backgroundColor: 'rgba(255, 255, 255, 0.9)',
type: 'cross', textStyle: {
label: { color: '#666'
backgroundColor: '#6a7985' },
} extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 4px;'
}
}, },
grid: { grid: {
top: '15%', top: '15%',
right: '1%', right: '2%',
bottom: '0%', bottom: '5%',
left: '1%', left: '2%',
containLabel: true containLabel: true
}, },
legend: { legend: {
show: true, show: true,
top: 10, top: 0,
left: 'center' left: 'center',
icon: 'circle',
itemWidth: 12,
itemHeight: 12,
data: series.map(item => ({
name: item.name,
itemStyle: {
color: item.color, // 强制图例使用实心系列颜色
borderWidth: 0
}
})),
textStyle: {
fontFamily: 'Microsoft YaHei',
fontSize: 16,
fontWeight: 400,
lineHeight: 24,
color: 'rgb(95, 101, 108)'
}
}, },
color: series.map(item => item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)`), // 动态颜色
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: title data: title,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#999',
fontSize: 12,
margin: 15
}
} }
], ],
yAxis: [ yAxis: [
{ {
type: 'value' type: 'value',
min: 0,
max: 100,
interval: 20,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#999',
fontSize: 12
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#E0E6F1'
}
}
} }
], ],
series: echartsSeries series: echartsSeries
......
...@@ -559,7 +559,7 @@ onMounted(() => { ...@@ -559,7 +559,7 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.content-wrapper { .content-wrapper {
width: 1666px; width: 1666px;
height: 2132px; height: 1076px;
// background: orange; // background: orange;
.header { .header {
width: 1664px; width: 1664px;
...@@ -567,6 +567,7 @@ onMounted(() => { ...@@ -567,6 +567,7 @@ onMounted(() => {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 16px; gap: 16px;
margin: 0 auto;
position: relative; position: relative;
.header-arrow-left { .header-arrow-left {
position: absolute; position: absolute;
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<AllGovernment v-if="activeNav === '全政府'" /> <AllGovernment v-if="activeNav === '全政府'" />
<AddDomain v-if="activeNav === '全领域'" /> <AddDomain v-if="activeNav === '全领域'" />
<AllUnion v-if="activeNav === '全联盟'" /> <AllUnion v-if="activeNav === '全联盟'" />
<AllElement v-if="activeNav === '全要素'" /> <AllElement v-if="activeNav === '全要素'" />
</div> </div>
</template> </template>
...@@ -48,7 +48,7 @@ const handleNavClick = name => { ...@@ -48,7 +48,7 @@ const handleNavClick = name => {
.content-wrapper { .content-wrapper {
// width: 1601px; // width: 1601px;
width: 1601px; width: 1601px;
height: 2203px; height: auto;
margin: 0 auto; margin: 0 auto;
.main-nav { .main-nav {
width: 1601px; width: 1601px;
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</div> </div>
<div style="display: flex; height: 650px; width: 100%"> <div style="display: flex; height: 650px; width: 100%">
<div style="width: 50%"> <div style="width: 50%">
<div style="display: flex; justify-content: space-between; margin-right: 50px; ine-height: 32px;align-items: center;" > <div style="display: flex; justify-content: space-between; margin-right: 50px; line-height: 32px;align-items: center;" >
<div style="display: flex; margin-left: 50px"> <div style="display: flex; margin-left: 50px">
数据来源: 数据来源:
<el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px"> <el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px">
...@@ -61,9 +61,9 @@ ...@@ -61,9 +61,9 @@
<div v-for="(value, index) in btnList" class="btn-item" :style="{ <div v-for="(value, index) in btnList" class="btn-item" :style="{
background: value.background background: value.background
}"> }">
<img :src="`/public/icon/ZM/btn-icon-${index}.png`" style="width: 22px; height: 19px;margin:0 22px" /> <img :src="`/public/icon/ZM/btn-icon-${index}.png`" style="width: 22px; height: 19px; margin: 0 22px" />
{{ value.text }} {{ value.text }}
<img :src="`/public/icon/ZM/btn-icon-arrow.png`" style="margin-right: 22px; width: 22px; height: 19px" /> <img :src="`/public/icon/ZM/btn-icon-arrow.png`" style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" />
</div> </div>
</div> </div>
</div> </div>
...@@ -263,7 +263,7 @@ const btnList = ref([ ...@@ -263,7 +263,7 @@ const btnList = ref([
<style lang="scss" scoped> <style lang="scss" scoped>
.content-wrapper { .content-wrapper {
width: 1601px; width: 1600px;
height: 1600px; height: 1600px;
margin: 0 auto; margin: 0 auto;
.card-box { .card-box {
...@@ -277,7 +277,7 @@ const btnList = ref([ ...@@ -277,7 +277,7 @@ const btnList = ref([
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.card-title { .card-title {
width: 1602px; width: 100%;
height: 48px; height: 48px;
display: flex; display: flex;
...@@ -412,7 +412,7 @@ const btnList = ref([ ...@@ -412,7 +412,7 @@ const btnList = ref([
.btn-box { .btn-box {
margin-top: 16px; margin-top: 16px;
width: 1601px; width: 100%;
height: auto; height: auto;
/* 高度自适应内容 */ /* 高度自适应内容 */
display: flex; display: flex;
...@@ -420,7 +420,7 @@ const btnList = ref([ ...@@ -420,7 +420,7 @@ const btnList = ref([
/* 行方向布局 */ /* 行方向布局 */
flex-wrap: wrap; flex-wrap: wrap;
/* 允许换行 */ /* 允许换行 */
justify-content: space-between; justify-content: flex-start;
align-items: stretch; align-items: stretch;
/* 使所有按钮高度一致 */ /* 使所有按钮高度一致 */
gap: 16px 16px; gap: 16px 16px;
...@@ -430,8 +430,7 @@ const btnList = ref([ ...@@ -430,8 +430,7 @@ const btnList = ref([
} }
.btn-item { .btn-item {
width: calc(20% - 16px); width: 307px;
/* 宽度为容器宽度的20%减去一个间隙的宽度 */
height: 60px; height: 60px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
...@@ -442,7 +441,7 @@ const btnList = ref([ ...@@ -442,7 +441,7 @@ const btnList = ref([
display: flex; display: flex;
/* 使用flex布局 */ /* 使用flex布局 */
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
justify-content: space-between; justify-content: flex-start;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-style: Bold; font-style: Bold;
font-size: 16px; font-size: 16px;
......
...@@ -493,6 +493,7 @@ onMounted(() => { ...@@ -493,6 +493,7 @@ onMounted(() => {
.risk-signals { .risk-signals {
width: 769px; width: 769px;
height: 470px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
box-sizing: border-box; box-sizing: border-box;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论