const setZcqChart = () => {
let xData = [];
let amountData = [];
let priceData = [];
for (let i = 1; i <= 12; i++) {
xData.push( i +'月');
amountData.push(Math.floor(Math.random() * 50))
priceData.push(Math.floor(Math.random() * 50))
}
let option = {
grid: {
left: '6%',
right: '2%',
bottom: '0%',
top: '20%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: "shadow",
label: {
show: true,
backgroundColor: itemColor[1],
},
},
backgroundColor: 'rgba(0,0,0,.5)',
padding: [5, 10],
textStyle: {
color: itemColor[1],
}
},
legend: {
icon: "rect",
top: "0%",
// right: "left",
left: 'center',
right: 10,
itemWidth: 10,
itemHeight: 4,
itemGap: 20,
textStyle: {
color: itemColor[0],
fontSize: fontSize(12)
}
},
xAxis: {
name: '',
nameTextStyle: {
color: itemColor[0],
fontSize: fontSize(12),
},
splitLine: {
show: false,
interval: 'auto',
lineStyle: {
color: ['rgba(22, 51, 85, 0.2)']
}
},
axisTick: {
show: false,
interval: 'auto'
},
axisLine: {
lineStyle: {
color: itemColor[0]
}
},
axisLabel: {
showLabel: true,
fontSize: fontSize(12),
color: itemColor[0],
// interval: 0, //使x轴文字显示全
},
data: xData
},
yAxis: [
{
name: '亿千瓦时',
nameTextStyle: {
color: itemColor[0],
fontSize: fontSize(12),
},
splitLine: {
lineStyle: {
type: "dashed",
color: ['rgba(142,164,207,0.2)']
}
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: itemColor[0],
}
},
axisLabel: {
margin: 3,
fontSize: fontSize(12),
color: itemColor[0]
}
},
{
name: '元/MWh',
nameTextStyle: {
color: itemColor[0],
fontSize: fontSize(12),
},
splitLine: {
lineStyle: {
type: "dashed",
color: ['rgba(142,164,207,0.2)']
}
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: itemColor[0],
}
},
axisLabel: {
margin: 3,
fontSize: fontSize(12),
color: itemColor[0]
}
},
],
series: [
{
name: "中长期电量",
type: "bar",
data: amountData,
barWidth: 10,
showAllSymbol: true,
symbolSize: 1,
lineStyle: {
width: 2,
},
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: '#0FA0FF',
},
{
offset: 1,
color: '#24F3FF',
},
],
},
/* itemStyle: {
color: new proxy.$echarts.graphic.LinearGradient(
0, 0, 1, 1,
[
{offset: 0, color: colorList[0]},
{offset: 1, color: 'transparent'}
]
),
},*/
},
},
{
data: amountData,
type: 'pictorialBar',
barMaxWidth: '10',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: [0, '-50%'],
symbolSize: [10, 5],
zlevel: 1,
},
{
name: "中长期电价",
type: "line",
yAxisIndex: 1,
data: priceData,
showAllSymbol: true,
symbolSize: 1,
lineStyle: {
width: 2,
},
itemStyle: {
color:colorList[1]
},
/* areaStyle: {
color: new proxy.$echarts.graphic.LinearGradient(
0, 0, 1, 1,
[
{offset: 0, color: colorList[1]},
{offset: 1, color: 'transparent'}
]
),
},*/
}
]
};
zcqOption.value = option;
};
前端基于Echarts实现3D柱状图
于 2024-05-14 17:50:11 首次发布