let xAxisData = ["第一季度", "第二季度", "第三季度", "第四季度"]
let seriesData = [100, 200, 300, 200]
let colorArr = [["#12D5AF"], ["#fff", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
let colors = ['#2BCEFF', '#2EFE95', '#ECA641', '#148FF9']
option = {
backgroundColor: '#09224e',
grid: {
left: '5%',
right: '5%',
top: '15%',
bottom: '5%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: function (params) {
return params[0].name + ': ' + params[0].value;
}
},
xAxis: {
data: xAxisData,
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
// interval: 0,
fontSize: 12,
//函数模板
formatter(val, i) {
if (i == 0) {
return `{start| ${val}}`
} else if (i == 1) {
return `{two| ${val}}`
}
else if (i == 2) {
return `{three| ${val}}`
}
else if (i == 3) {
return `{end| ${val}}`
}
},
rich: {
start: {
color: '#fff',
backgroundColor:
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{
offset: 0,
color: colors[0]
},
{
offset: 1,
color: 'RGBA(0, 222, 242, 0)'
}
]),
padding: [5, 4, 4, 4],
align: 'center'
},
two: {
color: '#fff',
backgroundColor:
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{
offset: 0,
color: colors[1]
},
{
offset: 1,
color: 'RGBA(7, 105, 95, 0)'
}
]),
padding: [5, 4, 4, 4],
align: 'center'
},
three: {
color: '#fff',
backgroundColor:
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{
offset: 0,
color: colors[2]
},
{
offset: 1,
color: 'RGBA(135, 104, 63, 0)'
}
]),
padding: [5, 4, 4, 4],
align: 'center'
},
end: {
color: '#fff',
backgroundColor:
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{
offset: 0,
color: colors[3]
},
{
offset: 1,
color: 'RGBA(5, 47, 100, 0)'
}
]),
padding: [5, 4, 4, 4],
align: 'center'
}
}
},
},
yAxis: {
splitLine: { show: false },
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { show: false }
},
color: ['#e54035'],
series: [{
name: 'hill',
type: 'pictorialBar',
barCategoryGap: '-120%',
symbolClip: true,
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
itemStyle: {
normal: {
color: function (params) {
return {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: colors[params.dataIndex]
},
{
offset: 0.3,
color: colors[params.dataIndex]
},
{
offset: 1,
color: 'rgba(13,8,16,0)'
}
],
global: false // 缺省为 false
}
}
},
emphasis: {
opacity: 1
},
},
label: {
show: true,
position: 'top',
offset: [0, 0],
fontSize: 12,
formatter: function (params) {
let index = params.dataIndex
let str = "{a" + index + "|" + params.value + "万人}";
return str;
},
rich: {
a0: {
color: colors[0],
align: "center",
},
a1: {
color: colors[1],
align: "center",
},
a2: {
color: colors[2],
align: "center",
},
a3: {
color: colors[3],
align: "center",
},
}
},
emphasis: {
itemStyle: {
opacity: 1
}
},
data: seriesData,
z: 10
}]
};