830 lines
25 KiB
Plaintext
830 lines
25 KiB
Plaintext
import type { EChartsOption } from 'echarts'
|
||
import * as echarts from 'echarts'
|
||
import BgPie from '@/assets/images/bg-pie.png'
|
||
|
||
const axisLine = { show: true, lineStyle: { color: '#e4e6eb' } }
|
||
const axisLabel = { show: true, color: '#808696', fontSize: '16' }
|
||
const hidden = { show: false }
|
||
const pieBg = { image: BgPie, width: 191, height: 160}
|
||
|
||
export function useChart1() {
|
||
const chartRef = ref()
|
||
const option = ref<EChartsOption>({
|
||
grid: { left: '40', top: '50', },
|
||
|
||
height:'150px',
|
||
tooltip: {
|
||
trigger: 'axis',position: ['50%', '50%']
|
||
},
|
||
title: {
|
||
subtext: '单位 千吨',
|
||
textStyle:{
|
||
fontSize:10,
|
||
}
|
||
},
|
||
width:'100px',
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['FY20', 'FY23', 'FY25'],
|
||
axisLabel: {
|
||
fontSize:10, // 设置字体大小
|
||
// 其他 axisLabel 相关配置项...
|
||
},
|
||
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
fontSize: 8, // 设置刻度值标签字体大小
|
||
// 其他 axisLabel 相关配置项...
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
barWidth:10,
|
||
data: [{
|
||
value:1968.325826,
|
||
itemStyle:{
|
||
color:{
|
||
type: 'linear', // 设置为线性渐变
|
||
x: 0, // 渐变起点的 x 坐标
|
||
y: 0, // 渐变起点的 y 坐标
|
||
x2: 0, // 渐变终点的 x 坐标
|
||
y2: 1, // 渐变终点的 y 坐标
|
||
colorStops: [
|
||
{
|
||
offset: 0, // 渐变起点的位置，值范围 [0, 1]
|
||
color: '#2CACFC' // 渐变起点的颜色
|
||
},
|
||
{
|
||
offset: 1, // 渐变终点的位置，值范围 [0, 1]
|
||
color: '#B4E4EF' // 渐变终点的颜色
|
||
}
|
||
]
|
||
}
|
||
|
||
}
|
||
},
|
||
{
|
||
value:1089.509403,
|
||
itemStyle:{
|
||
color:{
|
||
type: 'linear', // 设置为线性渐变
|
||
x: 0, // 渐变起点的 x 坐标
|
||
y: 0, // 渐变起点的 y 坐标
|
||
x2: 0, // 渐变终点的 x 坐标
|
||
y2: 1, // 渐变终点的 y 坐标
|
||
colorStops: [
|
||
{
|
||
offset: 0, // 渐变起点的位置，值范围 [0, 1]
|
||
color: '#2CACFC' // 渐变起点的颜色
|
||
},
|
||
{
|
||
offset: 1, // 渐变终点的位置，值范围 [0, 1]
|
||
color: '#B4E4EF' // 渐变终点的颜色
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
value:1377.82807,
|
||
itemStyle:{
|
||
color: 'rgba(0, 0, 0, 0)', // 设置透明颜色
|
||
borderColor: '#6E7079', // 设置边框颜色
|
||
borderWidth: 1, // 设置边框宽度
|
||
borderType: 'dashed' // 设置边框为虚线样式
|
||
}
|
||
},
|
||
],
|
||
type: 'bar',
|
||
}
|
||
],
|
||
|
||
graphic: {
|
||
elements: [
|
||
{
|
||
type: 'line',
|
||
x:50,
|
||
y:130,
|
||
shape: {
|
||
x1: 0,
|
||
y1: 0,
|
||
x2: 90,
|
||
y2: 1
|
||
},
|
||
z:100,
|
||
style: {
|
||
stroke: '#FF5733', // 虚线颜色
|
||
lineWidth:1,
|
||
|
||
lineDash: [8, 8] // 虚线样式
|
||
},
|
||
// position: ['5%', '30%']
|
||
},
|
||
{
|
||
type: 'text',
|
||
x:120,
|
||
y:120,
|
||
style: {
|
||
text: '▲30%', // 标注文本内容
|
||
fontSize:11,
|
||
fill: '#FF5733'
|
||
},
|
||
},
|
||
{
|
||
type: 'line',
|
||
x:50,
|
||
y:110,
|
||
shape: {
|
||
x1: 0,
|
||
y1: 0,
|
||
x2: 90,
|
||
y2: 1
|
||
},
|
||
z:100,
|
||
style: {
|
||
stroke: '#FF5733', // 虚线颜色
|
||
lineWidth:1,
|
||
|
||
lineDash: [8, 8] // 虚线样式
|
||
},
|
||
// position: ['5%', '30%']
|
||
},
|
||
{
|
||
type: 'text',
|
||
x:120,
|
||
y:100,
|
||
style: {
|
||
text: '▲15%', // 标注文本内容
|
||
fontSize:11,
|
||
fill: '#FF5733'
|
||
},
|
||
},
|
||
{
|
||
type: 'text',
|
||
x:45,
|
||
y:50,
|
||
z:200,
|
||
style: {
|
||
text: 'base', // 标注文本内容
|
||
fontSize:12,
|
||
fill: '#18B1FD',
|
||
|
||
},
|
||
}
|
||
]
|
||
},
|
||
})
|
||
|
||
return { chartRef, option }
|
||
}
|
||
|
||
export function useChart12() {
|
||
const chartRef = ref()
|
||
const timeNow = useDateFormat(useNow(), 'YYYY-MM-DD hh:mm')
|
||
|
||
const commonLine: any = { type: 'line', smooth: true, symbol: 'none', seriesLayoutBy: 'row', areaStyle: {} }
|
||
|
||
const option = ref<EChartsOption>({
|
||
grid: { left: '20', top: 120, right: 30, bottom: '20', containLabel: true },
|
||
legend: {
|
||
type: 'scroll',
|
||
// data: ['铜', '铝', '铅', '锌', '线材', '不锈钢', '螺纹钢', '铁矿石'],
|
||
data: ['铜', '铝'],
|
||
selected: { 铜: true, 铝: false, 铅: false, 锌: false, 线材: false, 不锈钢: false, 螺纹钢: false, 铁矿石: false },
|
||
align: 'left',
|
||
left: 20,
|
||
selectedMode: 'single',
|
||
textStyle: { fontSize: 16 },
|
||
},
|
||
title: [
|
||
{ text: '铜 Cu', left: 20, top: 30, textAlign: 'left', textStyle: { color: '#142142', fontSize: 20, fontWeight: 500 } },
|
||
{ text: '69760.00', left: 20, top: 55, textAlign: 'left', textStyle: { color: '#002fa7', fontSize: 30, fontWeight: 500 } },
|
||
{ text: '1260.00', left: 180, top: 63, textAlign: 'left', textStyle: { color: '#808696', fontSize: 20, fontWeight: 500 } },
|
||
{ text: '1.84%', left: 300, top: 63, textAlign: 'left', textStyle: { color: '#808696', fontSize: 20, fontWeight: 500 } },
|
||
],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { type: 'shadow' },
|
||
textStyle: { color: '#fff', fontSize: 14 },
|
||
className: 'tooltip',
|
||
order: 'seriesDesc',
|
||
renderMode: 'html',
|
||
backgroundColor: '#1b366a', // 设置背景颜色
|
||
borderColor: '#1b366a', // 边框颜色
|
||
formatter: (params: any) => {
|
||
return `
|
||
${timeNow.value} <br/>
|
||
${params[0].marker}
|
||
沪${params[0].seriesName}主力 :
|
||
${params[0].value == 0 ? '-' : Number(params[0].value).toLocaleString()}k`
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
gridIndex: 0,
|
||
// boundaryGap: false,
|
||
axisTick: hidden,
|
||
axisLabel,
|
||
axisLine,
|
||
// prettier-ignore
|
||
data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45',],
|
||
},
|
||
yAxis: {
|
||
gridIndex: 0,
|
||
max: 100,
|
||
axisLine,
|
||
axisTick: hidden,
|
||
axisLabel: { show: true, color: '#808696', fontSize: '16', formatter: '{value}k' },
|
||
splitLine: hidden,
|
||
},
|
||
series: [
|
||
{
|
||
// prettier-ignore
|
||
data: [40.14, 25.44, 26.4, 58.64, 27.4, 30.4, 55.4, 80.4, 40.86, 39.4, 38.54, 59.4, 40.62, 50.4, 60.4, 75.56, 80.12, 70.4, 60.4, 40],
|
||
name: '铜',
|
||
...commonLine,
|
||
// lineStyle: { color: '#002fa7', width: 3, type: 'solid' },
|
||
// areaStyle: {
|
||
// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||
// { offset: 0, color: 'rgba(29,177,247,0.2)' },
|
||
// { offset: 1, color: 'rgba(29,177,247,0.5)' },
|
||
// ]),
|
||
// },
|
||
// markArea: {
|
||
// itemStyle: { color: 'rgba(0, 47, 167, 0.06)' },
|
||
// data: [[{ xAxis: '07:30' }, { xAxis: '10:00' }]],
|
||
// },
|
||
},
|
||
{
|
||
// prettier-ignore
|
||
data: [30.14, 58.64, 25.44, 40.86, 27.4, 30.4, 55.4, 50.4, 75.56, 80.12, 39.4, 38.54, 39.4, 40.62, 50.4, 60.4,26.4, 70.4, 60.4, 40],
|
||
name: '铝',
|
||
...commonLine,
|
||
},
|
||
{
|
||
// prettier-ignore
|
||
data: [30.14, 58.64, 25.44, 80.12, 70.4, 40.86, 40.62, 50.4, 60.4,26.4, 27.4, 30.4, 39.4, 38.54, 39.4, 55.4, 50.4, 75.56,60.4, 40],
|
||
name: '铅',
|
||
...commonLine,
|
||
},
|
||
{
|
||
// prettier-ignore
|
||
data: [55.4, 50.4, 75.56,30.14, 58.64, 50.4, 60.4,26.4, 27.4, 30.4, 80.12, 25.44, 40.86, 39.4, 38.54, 39.4, 40.62,70.4, 60.4, 40],
|
||
name: '锌',
|
||
...commonLine,
|
||
},
|
||
{
|
||
// prettier-ignore
|
||
data: [ 25.44, 60.4,26.4, 27.4, 30.4, 55.4, 50.4, 75.56, 80.12, 70.4,40.86, 39.4,30.14, 58.64, 38.54, 39.4, 40.62, 50.4, 60.4, 40],
|
||
name: '线材',
|
||
...commonLine,
|
||
},
|
||
{
|
||
// prettier-ignore
|
||
data: [30.14, 58.64, 25.44, 40.86, 39.4, 38.54, 39.4, 55.4, 50.4, 75.56, 80.12, 70.4, 60.4,60.4,26.4, 27.4, 40, 40.62, 50.4, 30.4],
|
||
name: '不锈钢',
|
||
...commonLine,
|
||
},
|
||
{
|
||
// prettier-ignore
|
||
data: [30.14, 58.64, 25.44, 40.86,27.4, 30.4, 55.4, 50.4, 75.56, 39.4, 38.54, 39.4, 40.62, 50.4, 60.4,26.4, 80.12, 70.4, 60.4, 40],
|
||
name: '螺纹钢',
|
||
...commonLine,
|
||
},
|
||
{
|
||
// prettier-ignore
|
||
data: [30.14, 58.64, 25.44, 40.86, 39.4, 27.4, 30.4, 55.4, 50.4, 70.4, 60.4, 75.56,38.54, 39.4, 40.62, 50.4, 60.4,26.4, 80.12, 40],
|
||
name: '铁矿石',
|
||
...commonLine,
|
||
},
|
||
],
|
||
})
|
||
|
||
return { chartRef, option }
|
||
}
|
||
|
||
export function useChart2() {
|
||
const chartRef = ref()
|
||
const option = ref<EChartsOption>({
|
||
grid: { left: '20', top: '0', right: '70', bottom: '20', containLabel: true },
|
||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||
xAxis: { type: 'value', axisLabel: hidden, splitLine: hidden },
|
||
yAxis: {
|
||
type: 'category',
|
||
// 轴线
|
||
axisLine: { show: true, lineStyle: { color: '#e4e6eb' } },
|
||
// 刻度线
|
||
axisTick: hidden,
|
||
// 刻度标签
|
||
axisLabel,
|
||
// 区域中的分隔线
|
||
splitLine: hidden,
|
||
data: ['现实点交付情况', 'CD Theane实绩', '年度交涉目标', '差别化部材探索', '企业碳中和', '业务线上推进'],
|
||
},
|
||
series: [
|
||
{
|
||
data: [16, 24, 32, 46, 60, 80],
|
||
type: 'bar',
|
||
barWidth: 26,
|
||
// 图形上的文本标签
|
||
label: { show: true, position: 'right', distance: 12, formatter: '{c}%', color: '#002fa7', fontSize: 22 },
|
||
itemStyle: {
|
||
borderRadius: 6,
|
||
// // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{ offset: 0, color: '#bfdff7' },
|
||
{ offset: 0.7, color: '#849ddb' },
|
||
{ offset: 1, color: '#3a63cb' },
|
||
]),
|
||
},
|
||
},
|
||
],
|
||
})
|
||
|
||
return { chartRef, option }
|
||
}
|
||
const state = reactive({
|
||
title: 'quanbu'
|
||
})
|
||
|
||
export function useChart21() {
|
||
const contData = {
|
||
"yuancailiao":{
|
||
titlee:'原材料',
|
||
datt1:[483.79, 85.59,284.23],
|
||
datt2:[1.06,7.48,99.64],
|
||
nameDatr:['鼎胜(铝)', '金田(铜)', '东阳光(冷媒)'],
|
||
size:12,
|
||
withs:12,
|
||
flg:true
|
||
},
|
||
"jiagongping":{
|
||
titlee:'加工品',
|
||
datt1:[2.78,98.57,3.77,16.97],
|
||
datt2:[1.32,6.14,1.06,3.38],
|
||
nameDatr:['广隆(配管)','槎南(钣金)','日清纺(树脂部品)','康谷(EPS)'],
|
||
size:12,
|
||
withs:12,
|
||
flg:true
|
||
},
|
||
"jineng":{
|
||
titlee:'机能部品',
|
||
datt1:[24.13,4.22,3.85],
|
||
datt2:[87.50,1.22,8.66],
|
||
nameDatr:['卧龙(送风机)','千代田(冷媒循环)','坚田(P板)'],
|
||
size:12,
|
||
withs:12,
|
||
flg:true
|
||
},
|
||
"quanbu":{
|
||
datt1:[483.79, 85.59,284.23,16.97,3.77,98.57,2.781,24.13,4.22,3.85],
|
||
datt2:[1.06,7.48,99.64,3.38,1.06,6.14,1.32,57.5,1.22,8.66],
|
||
nameDatr:['鼎胜', '金田', '东阳光','康谷','日清纺','槎南','广隆','卧龙','千代田','坚田'],
|
||
titles:'原材料',
|
||
size:8,
|
||
withs:4,
|
||
flg:false
|
||
}
|
||
}
|
||
|
||
const chartRef = ref()
|
||
const optionRef = ref()
|
||
|
||
let datt1= [483.79, 85.59,284.23,16.97,3.77,98.57,2.781,24.13,4.22,3.85]
|
||
let datt2=[1.06,7.48,99.64,3.38,1.06,6.14,1.32,57.5,1.22,8.66]
|
||
let nameDatr=['鼎胜', '金田', '东阳光','康谷','日清纺','槎南','广隆','卧龙','千代田','坚田']
|
||
|
||
// console.log(thisOptData.value.title,99999999999)
|
||
let withs = 4
|
||
let size = 8
|
||
let titles = '原材料'
|
||
let flg =false
|
||
function getDta(){
|
||
const option ={
|
||
title:[{
|
||
text: titles,
|
||
textStyle:{
|
||
fontSize:'12px',
|
||
color:'#004ADB',
|
||
},
|
||
left:'50%',
|
||
top:0,
|
||
|
||
},
|
||
{
|
||
text: '单位 千吨',
|
||
textStyle:{
|
||
fontSize:10,
|
||
},
|
||
left:20,
|
||
bottom:65
|
||
|
||
},
|
||
],
|
||
|
||
width:'218px',
|
||
height:'180px',
|
||
|
||
grid: { left: '20', top: '5', right: '0', bottom: '0', containLabel: true },
|
||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||
xAxis: { type: 'value', splitLine: hidden,show:true,axisLabel: {
|
||
margin: 5, // 设置标签与图形之间的距离
|
||
}, },
|
||
legend: {
|
||
// top:20,
|
||
bottom:65,
|
||
left:85,
|
||
align:'left',
|
||
textStyle:{
|
||
fontSize:10
|
||
},
|
||
itemWidth:8,
|
||
itemHeight:8
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
// 轴线
|
||
axisLine: { show: true, lineStyle: { color: '#e4e6eb' } },
|
||
// 刻度线
|
||
// axisTick: hidden,
|
||
// 刻度标签
|
||
// 区域中的分隔线
|
||
splitLine: hidden,
|
||
data:nameDatr,
|
||
axisLabel:{fontSize:8,color:'#000'},
|
||
// top:50,
|
||
},
|
||
series: [
|
||
{
|
||
data: datt1,
|
||
name: 'FY20碳排放数据',
|
||
type: 'bar',
|
||
barWidth: withs,
|
||
// 图形上的文本标签
|
||
label: { show: flg, position: 'right', distance: 8, color: '#002fa7', fontSize: size},
|
||
itemStyle: {
|
||
borderRadius: size,
|
||
// // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
|
||
color: '#428EF6',
|
||
},
|
||
},
|
||
{
|
||
data: datt2,
|
||
type: 'bar',
|
||
name:'FY23碳排放数据',
|
||
barWidth: withs,
|
||
// 图形上的文本标签
|
||
label: { show:flg, position: 'right', distance: 12, color: '#002fa7', fontSize:size },
|
||
itemStyle: {
|
||
borderRadius: size,
|
||
// // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
|
||
color:'#41BFC5' ,
|
||
},
|
||
},
|
||
],
|
||
}
|
||
optionRef.value = option
|
||
}
|
||
const ss = computed(() => [state.title])
|
||
watch(() => unref(ss),
|
||
async (v) => {
|
||
console.log(state.title)
|
||
titles = contData[state.title].titlee
|
||
datt1 = contData[state.title].datt1
|
||
datt2 = contData[state.title].datt2
|
||
nameDatr = contData[state.title].nameDatr
|
||
withs = contData[state.title].withs
|
||
size = contData[state.title].size
|
||
flg = contData[state.title].flg
|
||
getDta()
|
||
|
||
},
|
||
{ immediate: true, deep: true },
|
||
)
|
||
|
||
return { chartRef, option:optionRef, state }
|
||
}
|
||
|
||
|
||
|
||
export function useChart23() {
|
||
const chartRef = ref()
|
||
const option = ref<EChartsOption>({
|
||
title: {
|
||
text: '加工品',
|
||
textStyle:{
|
||
fontSize:'12px',
|
||
color:'#004ADB',
|
||
},
|
||
left:'50%',
|
||
top:40,
|
||
|
||
},
|
||
width:'220px',
|
||
height:'150px',
|
||
|
||
grid: { left: '20', top: '70', right: '0', bottom: '0', containLabel: true },
|
||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||
xAxis: { type: 'value', splitLine: hidden,show:true,axisLabel: {
|
||
margin:0, // 设置标签与图形之间的距离
|
||
}, position:'top'},
|
||
legend: {
|
||
bottom:20,
|
||
left:55,
|
||
align:'left',
|
||
textStyle:{
|
||
fontSize:10
|
||
},
|
||
itemWidth:8,
|
||
itemHeight:8
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
// 轴线
|
||
axisLine: { show: true, lineStyle: { color: '#e4e6eb' } },
|
||
// 刻度线
|
||
// axisTick: hidden,
|
||
// 刻度标签
|
||
// 区域中的分隔线
|
||
splitLine: hidden,
|
||
data: ['广隆(配管)', '槎南(钣金)', '日清纺(树脂部品)'],
|
||
axisLabel:{fontSize:12,color:'#000'},
|
||
// top:50,
|
||
},
|
||
series: [
|
||
{
|
||
data: [483.79, 85.59,284.23],
|
||
name: 'FY20碳排放数据',
|
||
type: 'bar',
|
||
barWidth: 12,
|
||
// 图形上的文本标签
|
||
label: { show: true, position: 'right', distance: 12, color: '#002fa7', fontSize: 12 },
|
||
itemStyle: {
|
||
borderRadius: 6,
|
||
// // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
|
||
color: '#369BF8',
|
||
},
|
||
},
|
||
{
|
||
data: [1.06,7.48,99.64],
|
||
type: 'bar',
|
||
name:'FY23碳排放数据',
|
||
barWidth: 12,
|
||
// 图形上的文本标签
|
||
label: { show: true, position: 'right', distance: 12, color: '#002fa7', fontSize: 12 },
|
||
itemStyle: {
|
||
borderRadius: 6,
|
||
// // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
|
||
color:'#00C4BD' ,
|
||
},
|
||
},
|
||
],
|
||
})
|
||
|
||
return { chartRef, option }
|
||
}
|
||
|
||
|
||
export function useChart22() {
|
||
const chartRef = ref()
|
||
const option = ref<EChartsOption>({
|
||
title: {
|
||
text: '原材料',
|
||
textStyle:{
|
||
fontSize:'12px',
|
||
color:'#004ADB',
|
||
},
|
||
left:'50%',
|
||
top:40,
|
||
|
||
},
|
||
width:'220px',
|
||
height:'150px',
|
||
|
||
grid: { left: '20', top: '70', right: '0', bottom: '0', containLabel: true },
|
||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||
xAxis: { type: 'value', splitLine: hidden,show:true,axisLabel: {
|
||
margin:0, // 设置标签与图形之间的距离
|
||
}, position:'top'},
|
||
legend: {
|
||
bottom:20,
|
||
left:55,
|
||
align:'left',
|
||
textStyle:{
|
||
fontSize:10
|
||
},
|
||
itemWidth:8,
|
||
itemHeight:8
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
// 轴线
|
||
axisLine: { show: true, lineStyle: { color: '#e4e6eb' } },
|
||
// 刻度线
|
||
// axisTick: hidden,
|
||
// 刻度标签
|
||
// 区域中的分隔线
|
||
splitLine: hidden,
|
||
data: ['鼎胜(铝)', '金田(铜)', '东阳光(冷媒)'],
|
||
axisLabel:{fontSize:12,color:'#000'},
|
||
// top:50,
|
||
},
|
||
series: [
|
||
{
|
||
data: [483.79, 85.59,284.23],
|
||
name: 'FY20碳排放数据',
|
||
type: 'bar',
|
||
barWidth: 12,
|
||
// 图形上的文本标签
|
||
label: { show: true, position: 'right', distance: 12, color: '#002fa7', fontSize: 12 },
|
||
itemStyle: {
|
||
borderRadius: 6,
|
||
// // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
|
||
color: '#369BF8',
|
||
},
|
||
},
|
||
{
|
||
data: [1.06,7.48,99.64],
|
||
type: 'bar',
|
||
name:'FY23碳排放数据',
|
||
barWidth: 12,
|
||
// 图形上的文本标签
|
||
label: { show: true, position: 'right', distance: 12, color: '#002fa7', fontSize: 12 },
|
||
itemStyle: {
|
||
borderRadius: 6,
|
||
// // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
|
||
color:'#00C4BD' ,
|
||
},
|
||
},
|
||
],
|
||
})
|
||
|
||
return { chartRef, option }
|
||
}
|
||
|
||
export function useChart3() {
|
||
const chartRef = ref()
|
||
const option = ref<EChartsOption>({
|
||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||
grid: [
|
||
{ top: '60%', width: '45%', bottom: 14, left: 14, containLabel: true },
|
||
{ top: '60%', width: '45%', bottom: 14, right: 14, containLabel: true },
|
||
],
|
||
xAxis: [
|
||
{
|
||
gridIndex: 0,
|
||
type: 'category',
|
||
splitLine: hidden,
|
||
axisTick: hidden,
|
||
axisLabel: { show: true, color: '#808696', fontSize: 12 },
|
||
axisLine,
|
||
data: ['0313', '0314', '0315', '0316'],
|
||
boundaryGap: false,
|
||
},
|
||
{
|
||
gridIndex: 1,
|
||
type: 'category',
|
||
splitLine: hidden,
|
||
axisTick: hidden,
|
||
axisLabel: { show: true, color: '#808696', fontSize: 12 },
|
||
axisLine,
|
||
data: ['0313', '0314', '0315', '0316'],
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
gridIndex: 0,
|
||
type: 'value',
|
||
max: 100,
|
||
axisLine,
|
||
axisTick: hidden,
|
||
axisLabel: { show: true, color: '#808696', fontSize: 12 },
|
||
splitLine: hidden,
|
||
},
|
||
{
|
||
gridIndex: 1,
|
||
type: 'value',
|
||
max: 100,
|
||
axisLine,
|
||
axisTick: hidden,
|
||
axisLabel: { show: true, color: '#808696', fontSize: 12 },
|
||
splitLine: hidden,
|
||
},
|
||
],
|
||
title: [
|
||
{ text: 'CD数据', left: 8, top: '50%', textAlign: 'left', textStyle: { color: '#142142', fontSize: 16, fontWeight: 500 } },
|
||
{ text: 'THEME件数', left: '50%', top: '50%', textAlign: 'left', textStyle: { color: '#142142', fontSize: 16, fontWeight: 500 } },
|
||
],
|
||
graphic: {
|
||
elements: [
|
||
{ type: 'image', left: 25, top: -5, style: pieBg },
|
||
{ type: 'image', right: 26, top: -5, style: pieBg },
|
||
],
|
||
},
|
||
series: [
|
||
{ type: 'line', smooth: true, data: [32, 21, 75, 57] },
|
||
{ type: 'line', smooth: true, data: [12, 31, 35, 47] },
|
||
{
|
||
xAxisIndex: 1,
|
||
yAxisIndex: 1,
|
||
type: 'bar',
|
||
data: [12, 31, 35, 47],
|
||
showBackground: true,
|
||
backgroundStyle: { color: '#f4f6fa' },
|
||
itemStyle: {
|
||
borderRadius: 2,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#70b8f0' },
|
||
{ offset: 1, color: '#2b7ff9' },
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
xAxisIndex: 1,
|
||
yAxisIndex: 1,
|
||
type: 'bar',
|
||
data: [32, 75, 57, 21],
|
||
showBackground: true,
|
||
backgroundStyle: { color: '#f4f6fa' },
|
||
itemStyle: {
|
||
borderRadius: 2,
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||
{ offset: 0, color: '#34a5d9' },
|
||
{ offset: 1, color: '#23d2c5' },
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
id: 'pie1',
|
||
type: 'pie',
|
||
center: ['25.6%', '27.4%'],
|
||
radius: ['38.8%', '48.8%'],
|
||
avoidLabelOverlap: true,
|
||
label: {
|
||
show: false,
|
||
position: 'center',
|
||
color: '#2bbdce',
|
||
formatter: '{count|{d}}{unit|%}',
|
||
overflow: 'truncate',
|
||
rich: { count: { fontSize: 24 }, unit: { fontSize: 14, verticalAlign: 'bottom' } },
|
||
},
|
||
itemStyle: { borderColor: '#fff', borderWidth: 2 },
|
||
emphasis: { label: { show: true }, scaleSize: 10, focus: 'series' },
|
||
data: [
|
||
{ name: '数据1', value: 33.2 },
|
||
{ name: '数据2', value: 28.6 },
|
||
{ name: '数据3', value: 41.9 },
|
||
{ name: '数据4', value: 78.2 },
|
||
],
|
||
},
|
||
{
|
||
id: 'pie2',
|
||
type: 'pie',
|
||
center: ['75.5%', '27.8%'],
|
||
radius: ['38.8%', '47.8%'],
|
||
avoidLabelOverlap: true,
|
||
label: {
|
||
show: false,
|
||
position: 'center',
|
||
color: '#002fa7',
|
||
formatter: '{count|{c}}{unit|件}',
|
||
rich: { count: { fontSize: 24 }, unit: { fontSize: 14, verticalAlign: 'bottom' } },
|
||
},
|
||
itemStyle: { borderColor: '#fff', borderWidth: 2 },
|
||
emphasis: { label: { show: true }, scaleSize: 10, focus: 'series' },
|
||
data: [
|
||
{ name: '物品1', value: 33 },
|
||
{ name: '物品2', value: 128 },
|
||
{ name: '物品3', value: 41 },
|
||
{ name: '物品4', value: 78 },
|
||
],
|
||
},
|
||
],
|
||
})
|
||
onMounted(async () => {
|
||
await nextTick()
|
||
const chart = unref(chartRef)?.chart
|
||
if (!chart?.dispatchAction) return
|
||
const activeIndex: any = { pie1: 3, pie2: 3 }
|
||
Object.keys(activeIndex).forEach((i) => {
|
||
chart.dispatchAction({ type: 'highlight', seriesId: i, dataIndex: activeIndex[i] })
|
||
})
|
||
chart.on('mouseover', ({ seriesId, dataIndex }: any) => {
|
||
if (!seriesId || activeIndex[seriesId] == dataIndex) return
|
||
chart.dispatchAction({ type: 'downplay', seriesId, dataIndex: activeIndex[seriesId] })
|
||
})
|
||
|
||
//当鼠标离开时，把当前项置为选中
|
||
chart.on('mouseout', ({ seriesId, dataIndex }: any) => {
|
||
if (!seriesId) return
|
||
|
||
activeIndex[seriesId] = dataIndex
|
||
chart.dispatchAction({ type: 'highlight', seriesId, dataIndex })
|
||
})
|
||
})
|
||
|
||
return { chartRef, option }
|
||
}
|