const dataSource = [79,44,39,74,48,33,33,79,44,39,74,48,33,33];
const nameList = [1,2,3,4,5,6,7,8,9,10,11,12,13,14];
const isRedList =new Array(dataSource.length).fill(0);
const max = Math.max(...dataSource,1)
const getSymbolData = (datas) => {
let arr = [];
for (var i = 0; i < datas.length; i++) {
isRedList[i] = max
arr.push({
value: datas[i],
symbolPosition: "end",
});
}
return arr;
};
option = {
backgroundColor: '#011029',
tooltip: {
trigger: 'axis',
padding:15,
axisPointer: {
type: 'shadow',//cross
label: {
show: true,
backgroundColor: '#333333',
},
},
backgroundColor: 'rgba(10,26,52,0.7)', // 提示框浮层的背景颜色。
borderRadius:15,
textStyle: { // 提示框浮层的文本样式。
color:"#fff"
},
extraCssText:'box-shadow: 0 2px 25px #5cc0fd inset;text-align: center',
formatter:'{b}<br />{a}:{c}'
},
grid: {
left: 40,
top: '10%',
right: '1%',
bottom: '15%',
},
xAxis: {
data: nameList||[],
type: 'category',
axisLabel: {
show: true,
fontSize: 12,
interval: 0,
textStyle: {
color: 'rgba(172, 201, 226, 1)',
},
//rotate: 30,
},
axisTick: {
show: true,
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(200, 225, 246, 1)',
type: 'solid',
},
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(47, 248, 252, 0.1)',
},
},
},
yAxis: [
{
nameTextStyle: {
color: '#EEE',
fontSize: 12,
},
// name: '条',
splitNumber:3,
max,
type: 'value',
axisLabel: {
show: true,
showMaxLabel:true,
fontSize: 12,
textStyle: {
color: 'rgba(172, 201, 226, 1)',
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(47, 248, 252, 0.3)',
type: 'solid',
},
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(160, 222, 255, 1)',
type:'dashed',
opacity:0.2
},
},
},
],
series: [
{
name: '工单数量',
type: 'bar',
barWidth: 25,
label: {
show: true,
position: 'top',
distance: 2,
color: 'rgba(0, 166, 255, 1)',
fontWeight: 'bolder',
fontSize:nameList.length>20? 9:12,
},
itemStyle: {
normal: {
borderWidth:2,
borderColor:'rgba(0, 166, 255, 1)',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(0, 166, 255, 0.1)'
},
{
offset: 0.5,
color: 'rgba(0, 166, 255, 0.3)'
},
{
offset: 1,
color: 'rgba(0, 166, 255, 0.5)'
},
]),
},
},
data: dataSource||[],
},
{
type: "pictorialBar",
symbol: "react",
symbolSize: [25, 3],
symbolOffset: [0, -2],
z: 12,
itemStyle: {
color: "rgba(252, 194, 50, 1)",
shadowColor:'rgba(252, 194, 50, 1)',
shadowBlur: 20
},
data: getSymbolData(dataSource),
},
{
type: 'bar',
barWidth: 29,
barGap: '-108%',
data: isRedList,
tooltip: {
backgroundColor: 'transparent',
formatter: ' ',
},
itemStyle: {
normal: {
color: 'rgba(200,225,246,0.1)',
},
},
zlevel: 7,
}
],
}