先看效果
Y轴的值前面的这个皇冠和绿色的蓝色的圈都是自己的图
实现方法 （先上代码）
var rankPic = {
first: '../assets/clfx/icon_t1@2x.png',
second: '../assets/clfx/icon_t2@2x.png',
third: '../assets/clfx/icon_t3@2x.png',
fourth: '../assets/clfx/icon_t4@2x.png',
fifth: '../assets/clfx/icon_t5@2x.png',
sixth: '../assets/clfx/icon_t6@2x.png',
seventh: '../assets/clfx/icon_t7@2x.png',
eighth: '../assets/clfx/icon_t8@2x.png',
}
var data1 = [
{
id: 1,
rank: 1,
title: '第一名第一名第一名第一名',
count: 9000
},
{
id: 2,
rank: 2,
title: '第二名第二名',
count: 8500
},
{
id: 3,
rank: 3,
title: '第三名',
count: 7500
},
{
id: 4,
rank: 4,
title: '第四名',
count: 7000
},
{
id: 5,
rank: 5,
title: '第五名',
count: 6000
},
{
id: 6,
rank: 6,
title: '第六名',
count: 5500
},
{
id: 7,
rank: 7,
title: '第七名',
count: 5000
},
{
id: 8,
rank: 8,
title: '第八名',
count: 4000
},
]
var dataTitle = data1.map(item => {
return item.title
})
//柱状图1
var histogramChart1 = echarts.init(document.getElementById('histogram1'));
option = {
title: {
text: '长期积压（未借出）机具金额排名前10的机具金额',
left: 'center',
top: '24',
textStyle: {
color: '#00FFF4',
fontSize: 16
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
show: false
},
grid: {
left: '-25%',
right: '7%',
bottom: '3%',
containLabel: true
},
xAxis: {
show: false,
type: 'value',
boundaryGap: [0, 0.01],
axisTick: { //轴刻度线
show: false
},
splitLine: { //网格线
show: false
}
},
yAxis: {
type: 'category',
inverse: true,
axisLabel: {
margin: 180,
textStyle: {
align: 'left'
},
formatter: function (value) {
return '{' + value + '|} {s|' + dataTitle[value - 1] + '}'
},
rich: {
1: {
height: 20,
align: 'center',
backgroundColor: {
image: rankPic.first
}
},
2: {
height: 20,
align: 'center',
backgroundColor: {
image: rankPic.second
}
},
3: {
height: 20,
align: 'center',
backgroundColor: {
image: rankPic.third
}
},
4: {
height: 20,
align: 'center',
backgroundColor: {
image: rankPic.fourth
}
},
5: {
height: 20,
align: 'center',
backgroundColor: {
image: rankPic.fifth
}
},
6: {
height: 20,
align: 'center',
backgroundColor: {
image: rankPic.sixth
}
},
7: {
height: 20,
align: 'center',
backgroundColor: {
image: rankPic.seventh
}
},
8: {
height: 20,
align: 'center',
backgroundColor: {
image: rankPic.eighth
}
},
}
},
data: data1.map(item => item.rank),
axisTick: { //轴刻度线
show: false
},
splitLine: { //网格线
show: false
},
axisLine: { //y轴线
show: false
}
},
series: [
{
name: '2011',
type: 'bar',
data: [9000, 8500, 7000, 6500, 6000, 5500, 5000, 4500],
label: {
show: true,
position: "right",
color: "#fff"
},
barWidth: 17,
itemStyle: {
emphasis: {
barBorderRadius: 7
},
normal: {
barBorderRadius: 7,
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{ offset: 0, color: '#0F87FA' },
{ offset: 1, color: '#00C0FE' }
]
)
}
}
}
]
};
histogramChart1.setOption(option)
代码完整 最上面的rankPic 也就是图片地址自行替换，复制即可看到效果
再解释一下什么意思，说实话官方文档没找到，只能自己慢慢试出来
首先说一下这个formatter 可以写成函数形式，自定义y轴的内容
比如： 你想在y轴每个值的后面都加一个单位 ‘m’ 可以写成
formatter: function (value) {
return value + 'm'
}
这个formatter函数里面的value值就是y轴的值，也就是 yAxis 对象中的 data值
比如你的y轴的值是 [5, 10, 15, 20, 25, 30]
你想给每个数的后面加一个 单位 米
就可以写成
formatter: function (value) {
return value + '米'
}
echart会帮我们自动遍历每一个y轴的值 所以并不需要在里面写循环函数
知道了formatter函数的作用 下面再说一下插入自定义图片的另一个重要属性 rich
rich 富文本
看了官网的案例 应该是 rich 里面的值的 key 如果 和 y 轴的值相等 就可以关联到当前key值对应的value中的 backgroundColor 从而完成 插入图片的功能 (有点绕口)
展开说说
如果你的y轴 是 [‘hello’, ‘world’]
此时rich 如果写成
rich: {
hello: {
height: 20,
align: 'center',
backgroundColor: {
image: '图片地址'
}
},
world: {
height: 20,
align: 'center',
backgroundColor: {
image: '图片地址'
}
}
}
这样 y 轴就会关联到 rich 中的图片
但前提是你的formatter函数 要写成如下
formatter: function (value) {
return '{' + value + '| }\n{value|' + value + '}';
}
这是官网的案例
我只能猜测 这个 ｜ 在 value 前后的应该是控制 图片和文字位置的，如果value｜ 代表 图片 如果是xx| 接 value应该是 文字，也就是value 的值 （只是猜的 没看到官网的说明）但确实，如果写成
formatter: function (value) {
return '{value|' + value + '}\n{' + value + '|}'
}
这样的话就是文字在前，图片在后
之前说了 value 的值 就是 y轴定义的 data 这里是 [‘hello’, ‘world’]
如果 rich 中的两个属性的 key 值分别是 hello 和 world 那么 在y 轴 的后面就会 接上 你自定义的图片
但是官网案例是将y轴的值 和 rich 的key 值写的一样，实际开发中这样肯定不灵活，数据一定会从后台返回的数组或json中取
我的解决方案是
首先定义一个y轴值的数组
var data1 = [
{
id: 1,
rank: 1,
title: '第一名第一名第一名第一名',
count: 9000
},
{
id: 2,
rank: 2,
title: '第二名第二名',
count: 8500
},
{
id: 3,
rank: 3,
title: '第三名',
count: 7500
},
{
id: 4,
rank: 4,
title: '第四名',
count: 7000
},
{
id: 5,
rank: 5,
title: '第五名',
count: 6000
},
{
id: 6,
rank: 6,
title: '第六名',
count: 5500
},
{
id: 7,
rank: 7,
title: '第七名',
count: 5000
},
{
id: 8,
rank: 8,
title: '第八名',
count: 4000
},
]
var dataTitle = data1.map(item => {
return item.title
})
将title单独提取出来生成一个新数组
但是你会发现我上面 y轴 data的值并不是用的 title 属性 而是用的 rank 属性 却又能显示 title 的值是为什么呢
因为首先y 轴的值会影响到 formatter函数的参数，但这个参数必须和rich中的key值相同 才能获取到对应属性值的 backgroundColor，但key值不可以是中文，所以只能用 rank 数字来赋值，但是这样的话 y轴的值就不对了，本来应该是 title的值，但现在变成的rank 的值，所以可以通过索引去获取，这也是我将数组中每个对象的title单独提取出来组成新数组的原因，因为title的索引值等于对应的 rank - 1
这样在formatter函数中，我就可以利用 索引和rank 的值 给value 赋值 dataTitle[value -1]
我感觉应该还有更好的解决方案，如果大神们有更好的方案，可以评论一下，总感觉我这个方法还是有点冗杂
发表评论