效果图
斜箭头图片
代码
提示:通过象形柱图实现
//站台上下客人数排行
var updown = document.getElementById('updown');
var updowndata = [["马家村", "马家", "张陈家", "港边路口", "杭商院北门"], [10, 13, 15, 18, 23],]
function updownNum(dom, data) {
var updown = echarts.init(dom)
// 指定图表的配置项和数据
var undownoption = {
grid: { //图表的上下左右的距离
left: '10%',
right: '4%',
bottom: '10%',
top: '8%',
padding: '0 0 0 0',
containLabel: true,
},
tooltip: {},
xAxis: {
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
yAxis: {
type: "category",
data: data[0],
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#00c0d3',
fontStyle: 'normal',
fontSize: 16,
}
}
},
series: [
{
name: '人数',
type: 'pictorialBar',
z: -1,
barWidth: 15,
data: data[1],
//将一个图片作为数据大小的变化基准 及斜箭头柱体图片
symbol: 'image://../img/bgimg/zhuzhuangtu.png',
symbolOffset: [0, '60%'],
// symbolSize1:['100%', '100%'],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{ offset: 0, color: '#112e4f' },
{ offset: 1, color: '#0380e1' }
]
),
label: {
// show: true, //开启显示
position: 'right',
textStyle: { //数值样式
color: '#00c0d3',
fontSize: 16
}
},
},
}
},
{
name: '人数',
type: 'pictorialBar',
data: data[1],
barWidth: 35,
z: 1,
symbol: 'react', //你所看到的栅格背景 通过栅格背景控制数据显示
symbolRepeat: 'fixed',//设置固定可让数据在统一位置显示
symbolSize: ['6%', '100%'],
symbolMargin: 1,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{
offset: 0,
color: 'rgba(0, 122, 204, 0.2)'
},
]
),
label: {
show: true, //开启显示
position: 'insideRight',
textStyle: { //数值样式
color: '#00ffff',
fontStyle: 'italic',
fontSize: 16
}
},
},
}
},
]
};
// 使用刚指定的配置项和数据显示图表。
updown.setOption(undownoption);
}
updownNum(updown, updowndata)