var xData = ['在用', '闲置', '待修', '停用', '毁坏', '待报废','报废在用','已报废']
var lineData = [100, 100, 100, 100, 100, 100, 100]
var lastYearData = [3, 20, 42, 34, 35, 45, 33, 42, 34];
var thisYearData = [11, 38, 23, 39, 46, 36, 29, 23, 39];
var timeLineData = [1];
let legend=['综甲仪器设备','CMA仪器设备' ];
var background = "#ffffff"; //背景
let textColor = "#fff";
let lineColor="rgba(237, 237, 237, 1)";
let colors = [{
borderColor: "rgba(220, 32, 85, 0.8)",
start: "#F7A06C",
end: "#F7A06C"
},
{
borderColor: "rgba(91, 236, 204, 0.8)",
start: "#7891D9",
end: "#7891D9"
},
];
let borderData = [];
let scale = 2;
borderData = xData.map(item => {
return scale;
});
var option = {
baseOption: {
timeline: {
show: false,
top: 0,
data: []
},
tooltip: {
trigger:'axis',
// type:'shadow',
axisPointer: {
type: 'shadow',
},
backgroundColor:'rgba(17,95,182,0.5)',
textStyle:{
color:"#fff"
},
formatter:'{a}<br/>{b} :\n\n{c} 吨'
},
legend: {
top: '5%',
right: 'center',
// itemWidth: 20,
// itemHeight: 5,
itemGap: 30,
icon: 'rect',
icon: 'horizontal',
textStyle: {
color: 'rgba(185, 185, 185, 1)',
fontSize: 14,
},
data: legend
},
grid: [
// 左边
{
show: false,
left: '2%',
top: '15%',
bottom: '21%',
containLabel: true,
width: '44%'
},
// 中间
{
show: false,
left: '52%',
top: '15%',
bottom: '23%',
width: '0%'
},
// 右边
{
show: false,
right: '2%',
top: '15%',
bottom: '21%',
containLabel: true,
width: '42%'
}],
xAxis: [{
type: 'value',
inverse: true,
axisLine: {
show: true,
lineStyle: {
color: 'rgba(185, 185, 185, 1)'
}
},
axisTick: {
show: false
},
position: 'bottom',
axisLabel: {
show: true,
color: textColor
},
splitLine:{
show: true,
lineStyle: {
color: 'rgba(237, 237, 237, 1)',
type: 'dotted',
}
},
}, {
gridIndex: 1,
show: false
}, {
gridIndex: 2,
axisLine: {
show: true,
lineStyle: {
color: 'rgba(185, 185, 185, 1)'
}
},
axisTick: {
show: false
},
position: 'bottom',
axisLabel: {
show: true,
color: 'textColor'
},
splitLine:{
show: true,
lineStyle: {
color: 'rgba(237, 237, 237, 1)',
type: 'dotted',
}
},
}],
yAxis: [{
type: 'category',
inverse: true,
position: 'right',
axisLine: {
show: true,
lineStyle:{
color:lineColor
}
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
data: xData
}, {
gridIndex: 1,
type: 'category',
inverse: true,
position: 'left',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
// padding:[10,0,0,0],
textStyle: {
color: 'rgba(185, 185, 185, 1)',
fontSize: 13
},
align: "center"
},
data: xData.map(function(value) {
return {
value: value,
textStyle: {
align: 'center'
}
}
})
}, {
gridIndex: 2,
type: 'category',
inverse: true,
position: 'left',
axisLine: {
show: true,
lineStyle:{
color:lineColor
}
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
data: xData
}],
series: []
},
options: []
}
// option.baseOption.timeline.data.push(timeLineData[0])
option.options.push({
backgroundColor:'#FFF',
series: [{
name: "综甲仪器设备",
type: "bar",
barWidth: 20,
stack: "1",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: colors[0].start
},
{
offset: 1,
color: colors[0].end
}
]),
}
},
label: {
formatter: '{c} ',
color: '#fff',
offset: [0, 1],
show: true,
fontSize: 16,
},
data: lastYearData,
animationEasing: "elasticOut"
},
{
name: "CMA仪器设备",
type: "bar",
stack: "2",
barWidth: 20,
xAxisIndex: 2,
yAxisIndex: 2,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: colors[1].start
},
{
offset: 1,
color: colors[1].end
}
]),
}
},
label: {
formatter: '{c} ',
color: '#fff',
offset: [0, 1],
show: true,
fontSize: 16,
},
data: thisYearData,
animationEasing: "elasticOut"
},
]
});
if (option && typeof option === "object") {
myChart.setOption(option, true);
var index8 = 0; //播放所在下标
var mTime = setInterval(function () {
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index8
});
index8++;
if (index8 >= 12) {
//console.log('data4', fxdata.length)
index8 = 0;
//console.log(fxdata)
}
}, 3000);
}