- 站点信息
- 问题反馈
- 邮箱：[email protected]
- 吐槽一下
关注微信
©2020-2025 ioDraw All rights reserved,
Privacy Policy
<>先说需求，在开产品需求会时，让echarts的柱状图和折线图默认显示6条数据，其它的通过剩余拉动显示
<>将剩余的通过两边按钮拖动显示
<>局部代码
// 想显示成几条那么就把6改成几就可以了，resultarr是横坐标的长度(倒序排列) let resultarr = [] var start =
resultarr.length - 6 var end = resultarr.length - 1 dataZoom: [ { show: true,
type: 'slider', handleSize: 32, // 两边的按钮大小 startValue: start, // 重点在这 -- 开始的值
endValue: end // 重点在这 -- 结束的值 }, { // zoomLock: true, // 这个开启之后只能通过鼠标左右拉动，不能滚动显示
type: 'inside' } ],
<>全部代码
var option = { title: { left: 'center', text: data.title // 标题 }, tooltip: {
trigger: 'axis', axisPointer: { type: 'shadow' } }, dataZoom: [ { show: true,
type: 'slider', handleSize: 32, // 两边的按钮大小 startValue: start, // 重点在这 -- 开始的值
endValue: end // 重点在这 -- 结束的值 }, { // zoomLock: true, // 这个开启之后只能通过鼠标左右拉动，不能滚动显示
type: 'inside' } ], legend: { right: '8%' }, grid: { // 显示的容器 left: '3%', right
: '4%', bottom: '6%', containLabel: true }, xAxis: { name: '物流商', type:
'category', offset: 7, data: resultarr // x轴要显示的内容-----就是这儿要根据显示的长度来自定义 //
data: data.data.map(item => item.name) }, yAxis: { name: '妥投率%', type: 'value',
boundaryGap: [0, 0.01] }, color: ['#5b9bd5', '#ed7d31', '#a5a5a5', '#ffc000',
'#4472c4', '#70ad47'], series: seriesValue }
<>seriesValue
//这个时间可以根据自己需要的内容来 let mmm = ['2021-07', '2021-08', '2021-09', '2021-10',
'2021-11', '2021-12'] seriesValue = mmm.map((key, index) => { return { name: key
, type: 'bar', label: { show: true, position: 'top' }, barMaxWidth: 36, // 柱图宽度
data: Object.keys(temp).map(key => temp[key][index].effectRate) } })