效果图:
1.折线图某个拐点显示数据
在需要显示的拐点数据中添加label,show:true。
data: [{
value: 1888,
}, {
value: 20888,
}, {
value: 20555,
}, {
value: 20999,
symbol: 'image://' + require('@/static/images/yuebao/yuebao_yuan.png'),
symbolSize: 10,
label: {
normal: {
show: true,
fontSize: '10',
color: '#fff',
width: 50,
height: 27,
align: 'center',
lineHeight: 25,
backgroundColor: {
image: `${require('@/static/images/yuebao/yuebao_zxbgc.png')}`
},
rich: {},
position: [7, -25],
}
},
}],
2.给series下的label设置背景图
这里面有一个巨坑,给背景图加宽高不起作用,需要加rich:{}才行。
label: {
normal: {
show: true,
fontSize: '10',
color: '#fff',
width: 50,
height: 27,
align: 'center',
lineHeight: 25,
backgroundColor: {
image: `${require('@/static/images/yuebao/yuebao_zxbgc.png')}`
},
rich: {},
position: [7, -25],
}
},
3.给折线图拐点添加自定义图片
隐藏其他默认的拐点在series下添加symbol:'none'。
symbol: 'image://' + require('@/static/images/yuebao/yuebao_yuan.png'),
symbolSize: 10,
4.echarts铺满整个div
grid: {
top: "0px",
left: "0px",
right: "0px",
bottom: "0px",
},
可根据情况修改值。
5.让X轴的刻度线朝内,且刻度线居中
添加位置:xAxis>axisTick>inside: true。
inside: true,//朝里
alignWithLabel: true,//居中
6.边界处拐点、label显示不全
我自己的方案是相对加大div的高度,然后设置grid下面的top。
demo:
let myChart = Echarts.init(document.getElementById('myecharts'));
let option = {
xAxis: {
type: 'category',
data: ['第一周', '第二周', '第三周', '第四周'],
axisLabel: {
inside: false,
textStyle: {
color: '#000',
fontSize: '10',
itemSize: ''
}
},
axisLine: {
lineStyle: {
color: '#eaeaea',
}
},
axisTick: {
lineStyle: {
color: '#88bdff',
width: 3
},
alignWithLabel: true,
inside: true,
},
},
yAxis: {
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: ['#eaeaea'],
width: 1,
type: 'solid'
}
}
},
series: [{
data: [{
value: 1888,
}, {
value: 20888,
}, {
value: 20555,
}, {
value: 20999,
symbol: 'image://' + require('@/static/images/yuebao/yuebao_yuan.png'),
symbolSize: 10,
label: {
normal: {
show: true,
fontSize: '10',
color: '#fff',
width: 50,
height: 27,
align: 'center',
lineHeight: 25,
backgroundColor: {
image: `${require('@/static/images/yuebao/yuebao_zxbgc.png')}` // 这是vue写法,不是的按原来的写就行
},
rich: {},
position: [7, -25],
}
},
}],
symbol: "none",
type: 'line',
smooth: true,
itemStyle: {
normal: {
lineStyle: {
color: "#74b5ff" //折线的颜色
}
}
}
}],
grid: {
top: "30px",
left: "-2px",
right: "0px",
bottom: "20px",
},
};
myChart.setOption(option);
这篇文章的配置说明很全面: