drawechart1() {
this.chart = echarts.init(document.getElementById("echart1"));
var $animate = $('#echart1');
$animate.removeClass().addClass('slideInLeft animated infinite echart1');
setTimeout(removeClass, 600);
function removeClass() {
$animate.removeClass('slideInLeft');
$animate.removeClass('animated');
$animate.removeClass('infinite');
}
var colorArray = [
{
top: '#00FFEA', //黄
bottom: '#0060FF'
}, {
top: '#00FFEA', //黄
bottom: '#0060FF'
}, {
top: '#00FFEA', //黄
bottom: '#0060FF'
}, {
top: '#00FFEA', //黄
bottom: '#0060FF'
},
];
var option = {
tooltip: {
show: true,
formatter: "{b}:{c}"
},
grid: {
left: '5%',
top: '0%',
right: '8%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'value',
show: false,
position: 'top',
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#fff',
}
},
splitLine: {
show: false
},
},
yAxis: [{
type: 'category',
axisTick: {
show: false,
alignWithLabel: false,
length: 5,
},
"splitLine": { //网格线
"show": false
},
inverse: 'true', //排序
axisLine: {
show: false,
lineStyle: {
color: '#fff',
}
},
axisLabel: {
show: true,
textStyle: {
color: '#98DEFF',
fontSize: '12'
}
},
data: ['地区生产总值', '第一产业', '第二产业', '第三产业']
}
],
series: [{
name: '能耗值',
type: 'bar',
animationDuration: 2800,
animationEasing: 'cubicInOut',
label: {
normal: {
show: true,
position: 'right',
formatter: '{c}' + '%',
textStyle: {
color: '#00EAED' //color of value
}
}
},
itemStyle: {
normal: {
show: true,
color: function (params) {
let num = colorArray.length;
return {
type: 'linear',
colorStops: [{
offset: 0,
color: colorArray[params.dataIndex % num].bottom
}, {
offset: 1,
color: colorArray[params.dataIndex % num].top
}, {
offset: 0,
color: colorArray[params.dataIndex % num].bottom
}, {
offset: 1,
color: colorArray[params.dataIndex % num].top
}, {
offset: 0,
color: colorArray[params.dataIndex % num].bottom
}, {
offset: 1,
color: colorArray[params.dataIndex % num].top
}, {
offset: 0,
color: colorArray[params.dataIndex % num].bottom
}, {
offset: 1,
color: colorArray[params.dataIndex % num].top
}, {
offset: 0,
color: colorArray[params.dataIndex % num].bottom
}, {
offset: 1,
color: colorArray[params.dataIndex % num].top
}, {
offset: 0,
color: colorArray[params.dataIndex % num].bottom
}, {
offset: 1,
color: colorArray[params.dataIndex % num].top
}],
//globalCoord: false
}
},
barBorderRadius: 70,
borderWidth: 0,
borderColor: '#333',
}
},
barWidth: 9,
barGap: '0%',
barCategoryGap: '50%',
data: [19.85, 13.85, 17.62, 22.21]
}
]
};
this.chart.clear();
this.chart.resize();
this.chart.setOption(
option
);
},