1、自定义echarts动态排序的条形图 2、在基础的option里有一个baseOption对象和一个options数组 3、必须要有一个timeline对象 4、realtimeSort必须设置为true 5、自定义带图片的条形图type 是pictorialBar
rankingOption: {
baseOption: {
timeline: {
show: false,
data: [],
axisType: 'category',
autoPlay: true,
playInterval: 5000, //播放速度
rewind: false,//反向播放
loop: true,//循环播放
},
title: [
{
text: '',
textAlign: 'left',
bottom: '3%',
right: '2%'
}
],
xAxis: [{}],
yAxis: [{}],
series: [
{
id: 'bar',
type: 'bar',
data: [],
label: {
show: true,
position: 'right'
}
},
{
type: 'pictorialBar',
data: [],
label: {
show: false,
position: 'right'
}
},
{
type: 'pictorialBar',
data: [],
label: {
show: false,
position: 'right'
}
}
],
legend: {
show: false
},
animationDuration: 0,
animationDurationUpdate: 6000,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
},
options: []
},
在方法里push新的option
initChart() {
this.rankingChart = echarts.init(document.getElementById('容器Id'))
this.rankingOption.baseOption.timeline.data = this.yearsData//请求到的数据
let xMaxInterval = 10;
for (let i = 0; i < this.rankingData.length; i++) {
let xMax = 20;
if (this.rankingData[i].value[0].value > 20) {
xMax = 'dataMax'
}
if (this.rankingData[i].value[0].value / xMaxInterval >= 10) {
xMaxInterval = this.rankingData[i].value[0].value / 5
}
this.rankingOption.options.push(
{
grid: {
left: '20%',
right: '25%'
},
title: [//标题可以是数组 放在不同的位置
{
text: this.rankingData[i].name,
textStyle: {
color: '#DD0919',
fontSize: 65,
fontFamily: '自定义字体',
},
textAlign: 'left',
bottom: '3%',
right: '2%'
},
{
text: ‘标题',
textStyle: {
color: '#DCDDDD',
fontSize: 12,
fontFamily: '自定义字体',
},
bottom: '1%',
padding: [0, 0, 0, 15]
}
],
xAxis: [{
type: 'value',
interval: xMaxInterval,
max: xMax,
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false
},
splitLine: {
show: false
}
}],
yAxis:
{
type: 'category',
max: 9,
inverse: true,
axisLine: {
show: false
},
axisLabel: {
show: true,
inside: false,
fontSize: 16,
color: '#8D4747',
padding: [0, 0, 0, 0],
fontFamily: '自定义字体',
},
axisTick: {
show: false
},
splitLine: {
show: false
},
animationDuration: 0,
animationDurationUpdate: 500,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
z: 1000000,//文字层级
data: this.rankingData[i].value.map(function (item) {
return item.name
}).reverse()//reverse（）必须要加
},
series: [
{
id: 'bar',
realtimeSort: true,
label: {
show: true,
position: ['100%', '5%'],
valueAnimation: true,
color: '#DD0919',
fontSize: 25,
formatter: (item) => {
return '{itemValue|' + item.value + '}'
},
rich: {
itemValue: {
fontSize: 25,
padding: [0, 0, 0, 30],
fontFamily: '自定义字体',
}
}
},
itemStyle: {
color: (item) => {
let itemName = item.name
if (itemName === '条形的名称') {
return '#DD0919'
} else {
return '#FFF3DC'
}
},
borderColor: '#FEC52F'
},
data: this.rankingData[i].value.map(item => {
return item.value
}).sort((a, b) => {
return a - b //从大到小排序
}),
animationDuration: 0,//动画
animationDurationUpdate: 2000,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
},
{
realtimeSort: true,
name: 'icon',
type: 'pictorialBar',
barGap: '-100%',
symbol: (item, data) => {//添加想要添加的对应图片
let itemName = data.name
if (itemName === '条形的名称') {
return 对应的图片的路径
} else if (itemName === '条形的名称' && data.value !== 0) {
return this.对应的图片的路径
} else if (itemName === '条形的名称' && data.value !== 0) {
return this.对应的图片的路径
} else if (itemName === '条形的名称' && data.value !== 0) {
return this.对应的图片的路径
} else if (itemName === '条形的名称' && data.value !== 0) {
return this.对应的图片的路径
} else if (itemName === '条形的名称' && data.value !== 0) {
return this.对应的图片的路径
} else if (itemName === '条形的名称' && data.value !== 0) {
return this.对应的图片的路径
} else if (itemName === '昆仑好客' && data.value !== 0) {
return this.对应的图片的路径
} else if (itemName === '条形的名称' && data.value !== 0) {
return this.对应的图片的路径
} else if (itemName === '条形的名称' && data.value !== 0) {
return this.对应的图片的路径
} else if (itemName === '条形的名称' && data.value !== 0) {
return this.对应的图片的路径
} else if (itemName === '条形的名称' && data.value !== 0) {
return this.对应的图片的路径
} else if (itemName === '条形的名称' && data.value !== 0) {
return this.对应的图片的路径
} else if (itemName === '条形的名称' && data.value !== 0) {
return this.对应的图片的路径
} else if (data.value === 0) {
return 'transparent'
}
},
symbolPosition: 'end',
symbolSize: 25,
symbolOffset: ['108%', 0],
tooltip: {
show: false,
},
itemStyle: {
color: 'transparent'
},
label: {
show: false,
position: ['107%', 0],
padding: 10,
color: '#DD0919',
fontSize: 25,
formatter: '{c}',
fontFamily: '',
},
animationDuration: 0,
animationDurationUpdate: 500,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
data: this.rankingData[i].value.map(item => {
return item
}).sort((a, b) => {
return a.value - b.value
}),
//z: 999
}, {
realtimeSort: true,
name: 'icon',
type: 'pictorialBar',
barGap: '-100%',
symbol: (item, data) => {
let itemName = data.name
if (itemName === '元素名称' && data.value !== 0) {
return this.对应的图片的路径
} else if (itemName === '元素名称' && data.value !== 0) {
return this.对应的图片的路径
} else if (itemName === '元素名称' && data.value !== 0) {
return this.对应的图片的路径
} else {
return 'transparent'
}
},
symbolPosition: 'start',
symbolSize: 20,
symbolOffset: ['-30%', '-90%'],
tooltip: {
show: false,
},
itemStyle: {
color: 'transparent'
},
label: {
show: false,
},
animationDuration: 0,
animationDurationUpdate: 500,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
data: this.rankingData[i].value.map(item => {
return item
}).sort((a, b) => {
return a.value - b.value
}),
z: 999
}
]
})
}
this.rankingChart.setOption(this.rankingOption)
}
