915 lines
18 KiB
TypeScript
915 lines
18 KiB
TypeScript
import type { EChartsOption } from 'echarts'
|
||
import * as echarts from 'echarts'
|
||
import 'echarts-liquidfill'
|
||
import { getCSRDetail } from '@/api/daikin/base'
|
||
import { create } from 'naive-ui'
|
||
import { xAxisD, dataA, dataB } from './testData'
|
||
|
||
export const Content2 = [
|
||
{
|
||
key: '0',
|
||
label: '活动计划',
|
||
children: [
|
||
{
|
||
label: '调达本部HP',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: 'CSR-碳中和',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '中国地区连携强化 ',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
key: '1',
|
||
label: '活动成果',
|
||
children: [
|
||
{
|
||
label: 'Database推进',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '市况',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '汇率',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: 'BCP',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
export const Content3 = [
|
||
{
|
||
key: '0',
|
||
title: 'xx活动概要',
|
||
label: '活动计划',
|
||
children: [
|
||
{
|
||
label: '调达本部HP',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: 'CSR-碳中和',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '工作模式变更 ',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '差别化',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
key: '1',
|
||
label: '活动成果',
|
||
children: [
|
||
{
|
||
label: 'Database推进',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '全球连携强化',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '高品质高品位',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
key: '2',
|
||
title: 'xx活动概要',
|
||
label: '活动计划',
|
||
children: [
|
||
{
|
||
label: 'CSR-碳中和',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '工作模式变更 ',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '差别化',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
key: '3',
|
||
label: '活动成果',
|
||
children: [
|
||
{
|
||
label: 'Database推进',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '市况',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '全球连携强化',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '高品质高品位',
|
||
items: [
|
||
{
|
||
content:
|
||
'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
const form = ref({
|
||
lable1: {
|
||
name: '大金集团碳减排目标',
|
||
year: 'F25',
|
||
date: '14%',
|
||
title1: '',
|
||
title2: ''
|
||
},
|
||
lable2: {
|
||
name: 'CN调达本部碳减排目标',
|
||
year: 'F25',
|
||
date: '14%',
|
||
title1: '',
|
||
title2: ''
|
||
},
|
||
lable3: {
|
||
name: 'CN调达本部碳减排目标',
|
||
year: 'F23',
|
||
date: '14%',
|
||
title1: '',
|
||
title2: ''
|
||
},
|
||
lable4: {
|
||
name: '2020, 2021, 2022, 2023',
|
||
year: '120, 200, 150, 80',
|
||
date: '85, 45, 67, 80',
|
||
title1: 'DIS',
|
||
title2: 'DSZ'
|
||
},
|
||
lable14: {
|
||
name: '2020-1-25, 2021-12-12, 2022-11-14, 2023-14-5, 2024, 2025',
|
||
year: '120, 200, 150, 80, 70, 110',
|
||
date: '85, 45, 67, 80, 70, 110',
|
||
title1: 'DIS',
|
||
title2: 'DSZ'
|
||
},
|
||
lable5: {
|
||
name: '30%碳减排课题收集整体情况:',
|
||
year: '0.6',
|
||
date: '14%',
|
||
title1: '原材料: 15.5%',
|
||
title2: '能源消耗: 1.7%'
|
||
},
|
||
lable6: {
|
||
name: '30%碳减排课题收集整体情况:',
|
||
year: '0.6',
|
||
data: '',
|
||
title1: '原材料',
|
||
title2: '整体目标10%'
|
||
},
|
||
lable7: {
|
||
name: '',
|
||
data: '',
|
||
year: '0.6',
|
||
title1: '能源消耗',
|
||
title2: '整体目标5%'
|
||
},
|
||
lable8: {
|
||
name: '【FY20原材料构成数据】',
|
||
data: {
|
||
data1: {
|
||
name: 'Search Engine',
|
||
value: '1048'
|
||
},
|
||
data2: {
|
||
name: 'Direct',
|
||
value: '735'
|
||
},
|
||
data3: {
|
||
name: 'Email',
|
||
value: '580'
|
||
},
|
||
data4: {
|
||
name: '',
|
||
value: ''
|
||
},
|
||
data5: {
|
||
name: '',
|
||
value: ''
|
||
}
|
||
}
|
||
},
|
||
lable9: {
|
||
name: '【FY20能源消耗构成数据】',
|
||
data: {
|
||
data1: {
|
||
name: 'Search Engine',
|
||
value: '1048'
|
||
},
|
||
data2: {
|
||
name: 'Direct',
|
||
value: '735'
|
||
},
|
||
data3: {
|
||
name: 'Email',
|
||
value: '580'
|
||
},
|
||
data4: {
|
||
name: 'Union Ads',
|
||
value: '484'
|
||
},
|
||
data5: {
|
||
name: 'Video Ads',
|
||
value: '300'
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
async function getCSR() {
|
||
const {
|
||
data,
|
||
data: {
|
||
content: { form: ffff }
|
||
}
|
||
} = await getCSRDetail()
|
||
form.value = ffff
|
||
}
|
||
|
||
export function charData() {
|
||
const chartRef = ref()
|
||
const params = '15%'
|
||
|
||
const option = ref<EChartsOption>({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['DIS', 'DSZ'],
|
||
bottom: '0px'
|
||
// right:'50px'
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '10%',
|
||
containLabel: true
|
||
},
|
||
title: [{ text: '单位:千吨' }],
|
||
// color:['#58D9FC','red','#fff'],
|
||
// dataset: {
|
||
// // 提供一份数据。
|
||
// source: [
|
||
// ['2020实绩', 220, 0, 220],
|
||
// ['2021实绩', 182, 0, 182],
|
||
// ['2022实绩', 191, 0, 191],
|
||
// ['2023', 234, 43, 234],
|
||
// ['2024', 290, 23, 290],
|
||
// ['2025', 330, 65, 330],
|
||
// ]
|
||
// },
|
||
|
||
xAxis: { type: 'category', data: [] },
|
||
yAxis: {},
|
||
series: [
|
||
{
|
||
name: 'DIS',
|
||
type: 'bar',
|
||
barWidth: '30%',
|
||
data: [],
|
||
label: {
|
||
show: false
|
||
}
|
||
// emphasis: {
|
||
// // 高亮样式
|
||
// itemStyle: {
|
||
// color: 'red'
|
||
// }
|
||
// }
|
||
},
|
||
{
|
||
name: 'DSZ',
|
||
type: 'bar',
|
||
label: {
|
||
show: false,
|
||
position: 'inside',
|
||
formatter: '{c}%'
|
||
},
|
||
barWidth: '30%',
|
||
data: []
|
||
}
|
||
// { name: '预测/实绩用量', type: 'line' }
|
||
]
|
||
})
|
||
return { chartRef, option }
|
||
}
|
||
|
||
export function charData2() {
|
||
const chartRef = ref()
|
||
const params = '15%'
|
||
|
||
// const option = ref<EChartsOption>({
|
||
// tooltip: {
|
||
// trigger: 'axis',
|
||
// axisPointer: {
|
||
// type: 'shadow'
|
||
// }
|
||
// },
|
||
// legend: {
|
||
// data: ['DIS', 'DSZ'],
|
||
// top: '0px',
|
||
// right: '50px'
|
||
// },
|
||
|
||
// grid: {
|
||
// left: '3%',
|
||
// right: '4%',
|
||
|
||
// containLabel: true
|
||
// },
|
||
// title: [{ text: '单位:元/吨' }],
|
||
// // color:['#58D9FC','red','#fff'],
|
||
// // dataset: {
|
||
// // // 提供一份数据。
|
||
// // source: [
|
||
// // ['2020实绩', 220, 0, 220],
|
||
// // ['2021实绩', 182, 0, 182],
|
||
// // ['2022实绩', 191, 0, 191],
|
||
// // ['2023', 234, 43, 234],
|
||
// // ['2024', 290, 23, 290],
|
||
// // ['2025', 330, 65, 330],
|
||
// // ]
|
||
// // },
|
||
|
||
// xAxis: {
|
||
// type: 'category',
|
||
// data: form.value.lable14.name.split(','),
|
||
// axisLabel: {
|
||
// interval: 0, //隔几项显示一个标签
|
||
// rotate: '-90' //标签倾斜的角度，旋转的角度是-90到90度
|
||
// }
|
||
// },
|
||
// yAxis: {},
|
||
// series: [
|
||
// {
|
||
// name: 'DIS',
|
||
// type: 'line',
|
||
// data: form.value.lable14.year.split(',')
|
||
// },
|
||
// {
|
||
// name: 'DSZ',
|
||
// type: 'line',
|
||
// data: form.value.lable14.date.split(',')
|
||
// }
|
||
// // { name: '预测/实绩用量', type: 'line' }
|
||
// ]
|
||
// })
|
||
|
||
const option = ref<EChartsOption>({
|
||
// title: {
|
||
// text: 'SMM牌号低碳铝价格&价差',
|
||
// left: 'center'
|
||
// },
|
||
grid: {
|
||
bottom: 80
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
animation: false,
|
||
label: {
|
||
backgroundColor: '#505765'
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['低碳铝', '价差'],
|
||
right: 10
|
||
},
|
||
dataZoom: [
|
||
{
|
||
show: true,
|
||
startValue: '2022-06-01',
|
||
endValue: '2022-10-01'
|
||
},
|
||
{
|
||
type: 'inside'
|
||
// realtime: true,
|
||
// start: 65,
|
||
// end: 85
|
||
}
|
||
],
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
axisLine: { onZero: false },
|
||
// prettier-ignore
|
||
data: xAxisD
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
name: '单位：元',
|
||
type: 'value'
|
||
},
|
||
{
|
||
name: '单位：元/吨',
|
||
// nameLocation: 'start',
|
||
alignTicks: true,
|
||
type: 'value'
|
||
// inverse: true
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '低碳铝',
|
||
type: 'line',
|
||
smooth: true,
|
||
// areaStyle: {},
|
||
lineStyle: {
|
||
width: 3
|
||
// color: '#7030a0'
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
// prettier-ignore
|
||
data: dataA
|
||
},
|
||
{
|
||
name: '价差',
|
||
type: 'line',
|
||
smooth: true,
|
||
yAxisIndex: 1,
|
||
markLine: {
|
||
symbol: '', // 设置为空字符串，去除箭头
|
||
silent: true,
|
||
lineStyle: {
|
||
color: '#7030a0',
|
||
type: 'solid',
|
||
width: 3
|
||
},
|
||
data: [
|
||
{
|
||
yAxis: 700
|
||
}
|
||
]
|
||
},
|
||
lineStyle: {
|
||
width: 3
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
// prettier-ignore
|
||
data: dataB
|
||
}
|
||
]
|
||
})
|
||
return { chartRef, option }
|
||
}
|
||
// 原材料用量及碳排放量占比图
|
||
export function pieData1() {
|
||
const chartRef = ref()
|
||
const option = ref<EChartsOption>({
|
||
legend: {
|
||
orient: 'vertical',
|
||
data: [
|
||
{
|
||
name: '原材料使用量（吨）',
|
||
itemStyle: { color: '#f8cbad', borderWidth: 0 }
|
||
},
|
||
{
|
||
name: '原材料碳排放量（吨）',
|
||
itemStyle: { color: '#acc1fb', borderWidth: 0 }
|
||
}
|
||
],
|
||
selectedMode: false,
|
||
left: 10,
|
||
top: 25
|
||
},
|
||
title: {
|
||
text: form.value.lable8.name,
|
||
// subtext: 'Fake Data',
|
||
left: 'center',
|
||
textStyle: { color: '#4075E1' }
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
// formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||
formatter: function (params: any) {
|
||
const title = `<p>${params.seriesName}</p>`
|
||
const colorDot =
|
||
'<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:' +
|
||
params.color +
|
||
'"></span>'
|
||
return (
|
||
title +
|
||
colorDot +
|
||
params.name +
|
||
': ' +
|
||
(params.componentIndex === 0
|
||
? Math.trunc(params.value / 1000).toLocaleString()
|
||
: params.value.toLocaleString()) +
|
||
'（' +
|
||
params.percent +
|
||
'%）'
|
||
)
|
||
}
|
||
},
|
||
grid: {
|
||
// left: '20',
|
||
// // top: '100',
|
||
// right: '70',
|
||
// bottom: '10',
|
||
containLabel: true
|
||
},
|
||
// legend: {
|
||
// // orient: 'vertical',
|
||
// left: 'left',
|
||
// padding: [30, 0, 0, 20]
|
||
// },
|
||
series: [
|
||
{
|
||
center: ['50%', '56%'],
|
||
name: '原材料使用量（吨）',
|
||
type: 'pie',
|
||
selectedMode: 'single',
|
||
radius: [0, '50%'],
|
||
// silent: 'ture', //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
|
||
// avoidLabelOverlap: false,
|
||
// legendHoverLink: false,
|
||
label: {
|
||
position: 'inner',
|
||
fontSize: 16,
|
||
// formatter: '{b}：{c}'
|
||
formatter: function (params: any) {
|
||
return Math.trunc(params.data.value / 1000).toLocaleString()
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [],
|
||
// 自定义颜色
|
||
itemStyle: {
|
||
// emphasis: {
|
||
// shadowBlur: 10,
|
||
// shadowOffsetX: 0,
|
||
// shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
// },
|
||
borderColor: 'rgba(0, 0, 0, 0.5)',
|
||
borderWidth: 1,
|
||
// 自定义每个扇形的颜色
|
||
color: function (params) {
|
||
// const colorList = ['#3EC22B', '#3EC22B', '#3EC22B', '#3EC22B']
|
||
const colorList = ['#f8cbad', '#f8cbad', '#f8cbad', '#f8cbad']
|
||
return colorList[params.dataIndex]
|
||
}
|
||
}
|
||
// hoverAnimation: false,
|
||
},
|
||
{
|
||
center: ['50%', '56%'],
|
||
name: '原材料碳排放量（吨）',
|
||
type: 'pie',
|
||
radius: ['50%', '76%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
// borderRadius: 10,
|
||
borderWidth: 1, //外环间隔~~~~~
|
||
borderColor: 'rgba(0, 0, 0, 0.5)',
|
||
// 自定义每个扇形的颜色
|
||
color: function (params) {
|
||
// const colorList = ['#3EC22B', '#3EC22B', '#3EC22B', '#3EC22B']
|
||
const colorList = ['#acc1fb', '#acc1fb', '#acc1fb', '#acc1fb']
|
||
return colorList[params.dataIndex]
|
||
}
|
||
},
|
||
// labelLine: {
|
||
// length: 30
|
||
// },
|
||
label: {
|
||
position: 'inner',
|
||
fontSize: 16,
|
||
// formatter: '{b}：{c}'
|
||
formatter: function (params: any) {
|
||
return Math.trunc(+params.data.value).toLocaleString()
|
||
}
|
||
// backgroundColor: '#F6F8FC',
|
||
// borderColor: '#8C8D8E',
|
||
// borderWidth: 1,
|
||
// borderRadius: 4
|
||
|
||
// rich: {
|
||
// a: {
|
||
// color: '#6E7079',
|
||
// lineHeight: 22,
|
||
// align: 'center'
|
||
// },
|
||
// hr: {
|
||
// borderColor: '#8C8D8E',
|
||
// width: '100%',
|
||
// borderWidth: 1,
|
||
// height: 0
|
||
// },
|
||
// b: {
|
||
// color: '#4C5058',
|
||
// fontSize: 14,
|
||
// fontWeight: 'bold',
|
||
// lineHeight: 33
|
||
// },
|
||
// per: {
|
||
// color: '#fff',
|
||
// backgroundColor: '#4C5058',
|
||
// padding: [3, 4],
|
||
// borderRadius: 4
|
||
// }
|
||
// }
|
||
},
|
||
data: []
|
||
// 自定义颜色
|
||
// itemStyle: {
|
||
// borderColor: '#fff',
|
||
// borderWidth: 2,
|
||
// emphasis: {
|
||
// shadowBlur: 10,
|
||
// shadowOffsetX: 0,
|
||
// shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||
// },
|
||
// normal: {
|
||
// // 自定义每个扇形的颜色
|
||
// color: function (params) {
|
||
// const colorList = ['#337EE6', '#337EE6', '#337EE6',];
|
||
// return colorList[params.dataIndex];
|
||
// },
|
||
// },
|
||
// },
|
||
}
|
||
]
|
||
})
|
||
return { chartRef, option }
|
||
}
|
||
|
||
// SMM牌号低碳铝价格&价差
|
||
export function pieData2() {
|
||
const chartRef = ref()
|
||
const option = ref<EChartsOption>({
|
||
// legend: {
|
||
// top: 'bottom'
|
||
// },
|
||
title: {
|
||
text: form.value.lable9.name,
|
||
// subtext: 'Fake Data',
|
||
left: 'center',
|
||
textStyle: { color: '#4075E1' }
|
||
},
|
||
series: [
|
||
{
|
||
name: 'Access From',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
borderColor: '#fff',
|
||
borderWidth: 1
|
||
},
|
||
label: {
|
||
show: true,
|
||
formatter(param) {
|
||
// correct the percentage
|
||
return param.name + ' (' + param.percent * 2 + '%)'
|
||
}
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: 20
|
||
// fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: true
|
||
},
|
||
// data: [
|
||
// { value: 1048, name: 'Search Engine' },
|
||
// { value: 735, name: 'Direct' },
|
||
// { value: 580, name: 'Email' },
|
||
// { value: 484, name: 'Union Ads' },
|
||
// { value: 300, name: 'Video Ads' }
|
||
// ]
|
||
data: Object.values(form.value.lable9.data).filter(
|
||
(item) => item.name !== '' || item.value !== ''
|
||
)
|
||
}
|
||
]
|
||
})
|
||
return { chartRef, option }
|
||
}
|
||
|
||
const gl = '10%'
|
||
export function liQuid() {
|
||
const chartRef = ref()
|
||
const option = ref({
|
||
title: {
|
||
text: '整体目标加' + gl,
|
||
// subtext: 'Fake Data',
|
||
left: 'center',
|
||
bottom: '-5px',
|
||
textStyle: { fontSize: '14px', fontWeight: '100' }
|
||
},
|
||
series: [
|
||
{
|
||
type: 'liquidFill',
|
||
silent: true,
|
||
data: [0.76, 0.55, 0.62],
|
||
color: ['#41E5BA', '#B1D2FF', '#63E8C4'],
|
||
radius: '150px',
|
||
backgroundStyle: {
|
||
// borderWidth: 0,
|
||
// borderColor: 'red',
|
||
opacity: '0.4',
|
||
color: '#00D491'
|
||
// color:'#63E8C4'
|
||
},
|
||
outline: {
|
||
show: false
|
||
},
|
||
label: {
|
||
fontSize: 19,
|
||
fontColor: '#fff',
|
||
formatter: function (param) {
|
||
return '原材料' + '\n' + '\n' + param.value * 100 + '%'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
})
|
||
return { chartRef, option }
|
||
}
|
||
|
||
export function liQuids() {
|
||
const chartRef = ref()
|
||
const option = ref({
|
||
title: {
|
||
text: '整体目标加' + gl,
|
||
// subtext: 'Fake Data',
|
||
left: 'center',
|
||
bottom: '-5px',
|
||
textStyle: { fontSize: '14px', fontWeight: '100' }
|
||
},
|
||
series: [
|
||
{
|
||
type: 'liquidFill',
|
||
silent: true,
|
||
data: [0.8, 0.65, 0.72],
|
||
color: ['#8CBEFF', '#B1D2FF', '#8CBEFF'],
|
||
radius: '150px',
|
||
backgroundStyle: {
|
||
// borderWidth: 0,
|
||
// borderColor: 'red',
|
||
opacity: '0.6',
|
||
color: '#1D88FF'
|
||
// color:'#63E8C4'
|
||
},
|
||
outline: {
|
||
show: false
|
||
},
|
||
label: {
|
||
fontSize: 19,
|
||
fontColor: '#fff',
|
||
formatter: function (param) {
|
||
return '能源消耗' + '\n' + '\n' + param.value * 100 + '%'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
})
|
||
return { chartRef, option }
|
||
}
|