const color1 = {
type: 'linear',
x: 1,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#00DEFF'
},
{
offset: 0.8,
color: 'rgba(9, 33, 63, 0.2)'
}
]
};
const color2 = {
type: 'linear',
x: 1,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#31D5C7'
},
{
offset: 0.8,
color: 'rgba(29, 39, 115,0.2)'
}
]
};
const industryData = [22, 35, 30, 25, 12, 41, 51];
var option = {
backgroundColor: '#000',
legend: {
data: ['手工', '机制', '目标值'],
x: 'right',
textStyle: {
// 图例文字大小颜色
fontSize: 12,
color: '#ffffff'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
grid: {
left: '0%',
right: '1%',
bottom: '0%',
top: '25px',
containLabel: true
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
axisLabel: {
color: '#fff'
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 2555, 0.1)'
}
}
},
yAxis: [
{
type: 'value',
axisLabel: {
color: '#fff'
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
}
},
{
type: 'value',
min: 0,
max: 250,
interval: 50,
axisLabel: {
color: '#fff'
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
}
}
],
series: [
{
itemStyle: {
normal: {
// 这里是用一个柱子,从左到右的渐变。也可以用两个柱子做从上往下的渐变,和上面的透明渐变一样用法
color:color1
}
},
data: industryData,
type: 'bar',
barWidth: 19,
z: 2,
name: '手工'
},
{
z: 3,
name: '手工',
type: 'pictorialBar',
// 柱子顶部
symbolPosition: 'end',
data: industryData,
symbol: 'diamond',
symbolOffset: ['-12', -11],
symbolRotate: 90,
symbolSize: [10, 21],
itemStyle: {
normal: {
borderWidth: 2,
color: 'rgba(24, 126, 181,0.9)'
}
},
tooltip: {
show: false
}
},
{
itemStyle: {
normal: {
// 这里是用一个柱子,从左到右的渐变。也可以用两个柱子做从上往下的渐变,和上面的透明渐变一样用法
color:color2
}
},
data: industryData,
type: 'bar',
barWidth: 19,
z: 2,
name: '机制'
},
{
z: 3,
name: '机制',
type: 'pictorialBar',
// 柱子顶部
symbolPosition: 'end',
data: industryData,
symbol: 'diamond',
symbolOffset: [11, -11],
symbolRotate: 90,
symbolSize: [8, 19],
itemStyle: {
normal: {
borderWidth: 2,
color: '#2BB6B4'
}
},
tooltip: {
show: false
}
},
{
name: '目标值',
type: 'line',
yAxisIndex: 1,
data: industryData,
itemStyle: {
normal: {
color: '#FFDE55', //圈圈的颜色
lineStyle: {
color: '#FFDE55' //线的颜色
}
}
}
}
]
};
echars的3D柱状图+折线 复制到echarts运行即用
于 2024-02-27 15:26:29 首次发布