let xaxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
let yaxisData = [150,150,150,150,150,150,150,150,150,150,150,160];
const getSymbolData = (datas) => {
let arr = [];
for (var i = 0; i < datas.length; i++) {
arr.push({
value: datas[i],
symbolPosition: "end",
});
}
return arr;
};
let option = {
backgroundColor:'#000',
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
backgroundColor: "rgba(255,255,255,0.75)",
extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
textStyle: {
fontSize: 14,
color: "#000",
},
formatter: (params) => {
const item = params[0];
return item.name + " : " + item.value + " 条";
},
},
grid: {
left: 25,
right: 25,
top: 100,
bottom: 30,
containLabel: true,
},
xAxis: [
{
type: "category",
axisLabel: {
interval: 0,
color: "#fff",
fontSize: 12,
},
axisLine: {
show:true,
lineStyle: {
type:'solid',
//y轴网格线设置
color: "rgba(184, 185, 188, 1)",
width: 1,
},
},
axisTick: {
show: false,
},
data: xaxisData,
},
],
yAxis: [
{
max:225,
interval:25,
type: "value",
name: "单位 %",
nameGap:30,
nameTextStyle: {
color: "rgba(184, 185, 188, 1)",
fontWeight: 400,
fontSize: 14,
padding:[0,20,0,0]
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle:{
type:'dashed',
color:'rgba(217, 217, 217, 0.4)'
}
},
axisLabel: {
show: true,
fontSize: 12,
color: "rgba(184, 185, 188, 1)",
},
},
],
series: [
{
type: "bar",
barWidth: 16,
label: {
show: false,
position: "top",
color: "#00A8FF",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#00A8FF",
},
{
offset: 1,
color: "rgba(0, 122, 255, 0)",
},
]),
},
data: yaxisData,
},
{
type: "pictorialBar",
symbol: "react",
symbolSize: [32, 8],
symbolOffset: [0, -10],
z: 12,
itemStyle: {
color: "#fff",
},
data: getSymbolData(yaxisData),
},
],
};