fix【能源场景】:修复碳排放使用全局主题导致BUG

This commit is contained in:
Free-sss 2025-09-04 22:17:56 +08:00
parent e407f06c66
commit 3b2cd10bf1
2 changed files with 53 additions and 71 deletions

View File

@ -5,35 +5,48 @@ import { graphic } from 'echarts/core'
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
import { fontStyle } from 'html2canvas/dist/types/css/property-descriptors/font-style'
export const includes = [ 'xAxis', 'yAxis', 'grid']
export const includes = ['xAxis', 'yAxis']
const option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '15%',
containLabel: true
},
legend: {
show: true,
top:'20',
right:'50',
itemStyle:{
top: '20',
right: '50',
itemStyle: {
borderType: 'dotted'
},
lineStyle: {
type:'dashed',
cap:'round',
opacity:0.9,
type: 'dashed',
cap: 'round',
opacity: 0.9,
},
// icon: 'rect',
data:[{
data: [{
name: '电',
// 强制设置图形为圆。
icon: 'rect',
itemStyle:{
itemStyle: {
color: 'rgba(12, 109, 196,1)'
}, textStyle: {
color: '#eee'
},
},{
}, {
name: '燃气',
textStyle: {
color: '#eee'
},
// 强制设置图形为圆。
icon: 'rect',
itemStyle:{
itemStyle: {
color: 'rgba(48, 189, 104,1)'
},
}],
@ -53,21 +66,22 @@ const option = {
show: true,
type: 'value',
name: '单位:万/kwh',
nameGap:30,
axisLine:{
nameGap: 30,
axisLine: {
show: false
},
splitLine:{
splitLine: {
show: true,
lineStyle:{
lineStyle: {
type: 'dashed',
opacity:0.5
opacity: 0.5
}
}
},
dataset: { ...dataJson },
series: [
{
type: 'line',
smooth: true,
symbolSize: 0, //设定实心点的大小

View File

@ -1,73 +1,41 @@
<template>
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData"></global-setting>
<CollapseItem
v-for="(item, index) in seriesList"
:key="index"
name="单折线面积图"
:expanded="true"
>
<CollapseItem v-for="(item, index) in seriesList" :key="index" name="单折线面积图" :expanded="true">
<SettingItemBox name="线条">
<SettingItem name="宽度">
<n-input-number
v-model:value="item.lineStyle.width"
:min="1"
size="small"
placeholder="自动计算"
></n-input-number>
<n-input-number v-model:value="item.lineStyle.width" :min="1" size="small" placeholder="自动计算"></n-input-number>
</SettingItem>
<SettingItem name="类型">
<n-select
v-model:value="item.lineStyle.type"
size="small"
:options="lineConf.lineStyle.type"
></n-select>
<n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="实心点">
<SettingItem name="大小">
<n-input-number
v-model:value="item.symbolSize"
:min="1"
:max="100"
size="small"
placeholder="自动计算"
></n-input-number>
<n-input-number v-model:value="item.symbolSize" :min="1" :max="100" size="small"
placeholder="自动计算"></n-input-number>
</SettingItem>
</SettingItemBox>
<setting-item-box name="标签">
<setting-item>
<Setting-item-box name="标签">
<Setting-item>
<n-space>
<n-switch v-model:value="item.label.show" size="small" />
<n-text>展示标签</n-text>
</n-space>
</setting-item>
<setting-item name="大小">
<n-input-number
v-model:value="item.label.fontSize"
size="small"
:min="1"
></n-input-number>
</setting-item>
<setting-item name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="item.label.color"
></n-color-picker>
</setting-item>
<setting-item name="位置">
<n-select
v-model:value="item.label.position"
:options="[
{ label: 'top', value: 'top' },
{ label: 'left', value: 'left' },
{ label: 'right', value: 'right' },
{ label: 'bottom', value: 'bottom' },
]"
/>
</setting-item>
</setting-item-box>
</Setting-item>
<Setting-item name="大小">
<n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
</Setting-item>
<Setting-item name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
</Setting-item>
<Setting-item name="位置">
<n-select v-model:value="item.label.position" :options="[
{ label: 'top', value: 'top' },
{ label: 'left', value: 'left' },
{ label: 'right', value: 'right' },
{ label: 'bottom', value: 'bottom' },
]" />
</Setting-item>
</Setting-item-box>
</CollapseItem>
</template>