Echarts 实现进度条效果
#Echarts 实现进度条效果
#效果图
#上代码
//Echarts 实现进度条效果
data = [
{
name: '服务订购数量',
value: 6133,
},
{
name: '服务订购人次',
value: 23125,
},
{
name: '微信推送户次',
value: 43231,
},
{
name: '微信推送条数',
value: 15340,
},
];
// 定义使用的颜色数组
const colors = ['blue', 'green', 'yellow ', 'red'];
getArrByKey = (data, k) => {
let key = k || 'value';
let res = [];
if (data) {
data.forEach(function (t) {
res.push(t[key]);
});
}
return res;
};
getSymbolData = (data) => {
let arr = [];
for (var i = 0; i < data.length; i++) {
arr.push({
value: data[i].value,
symbolPosition: 'end',
});
}
return arr;
};
opt = {
index: 0,
};
color = ['blue', 'pink'];
data = data.sort((a, b) => {
return b.value - a.value;
});
console.log(getSymbolData(data));
option = {
backgroundColor: 'black',
grid: {
top: '2%',
bottom: -15,
right: 5,
left: 5,
containLabel: true,
},
xAxis: {
show: false,
},
yAxis: [
{
triggerEvent: true,
show: true,
inverse: true,
data: getArrByKey(data, 'name'),
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
interval: 0,
color: '#fff',
align: 'left',
margin: 80,
fontSize: 13,
formatter: function (value, index) {
return '{title|' + value + '}';
},
rich: {
title: {
width: 165,
},
},
},
},
{
triggerEvent: true,
show: true,
inverse: true,
data: getArrByKey(data, 'name'),
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
shadowOffsetX: '20px',
color: ['#fff'],
align: 'right',
verticalAlign: 'top',
//lineHeight: -20,
textStyle: {
color: '#fff', //坐标值得具体的颜色
padding: [-20, 0, 0, 0],
fontSize: 12,
},
fontSize: 12,
formatter: function (value, index) {
return data[index].value;
},
},
},
],
series: [
{
name: '条',
type: 'bar',
showBackground: true,
barBorderRadius: 30,
yAxisIndex: 0,
data: data,
barWidth: 5,
backgroundStyle: {
color: 'pink',
},
itemStyle: {
normal: {
barBorderRadius: 10,
color: function (params) {
return colors[params.dataIndex];
// 取每条数据的 index 对应 colors 中的 index 返回这个颜色
},
},
// color: 'pink',
barBorderRadius: 4,
},
label: {
normal: {
color: '#fff',
show: true,
position: [0, '-20px'],
textStyle: {
fontSize: 12,
},
formatter: function (a, b) {
return a.name;
},
},
},
},
],
};