需求描述:
折线图如果相邻的两个值都是0则不显示这一段水平折线。
分析
如果折线图上的数值为0会在,x轴有一段水平线,如果能将这段隐藏就达到了折线图切割的效果。
echarts中有个折线图渲染属性 visualMap, 可以利用这个属性对折线进行修饰。让被选中的区间透明就达到切割的目的了。
全局设置--visualMap是个对象
visualMap:{
show: false,
dimension: 0,
pieces: [{ // 这是需要渲染的折线区间。得到数据后只需要计算出这个区间就可以了
gt: 6,
lt: 8
}, {
gt: 12,
lt: 13
}]
, outOfRange: {opacity: 1} // 区间外渲染
, inRange: {opacity: 0} // 区间内透明,即如果数据区间为0就不显示
}
单个设置 -- visualMap是个数组
visualMap: [
{
show: false,
seriesIndex: 0, // 如果有多条折线可利用此属性区别渲染哪条折线
dimension: 0,
pieces: [{ // 这是需要渲染的折线区间。得到数据后只需要计算出这个区间就可以了
gt: 6,
lt: 8
}, {
gt: 12,
lt: 13
}]
, outOfRange: {opacity: 1} // 区间外渲染
, inRange: {opacity: 0} // 区间内透明,即如果数据区间为0就不显示
},
]
实现
因为我有多条折线,在后台返回的数据后操作获取渲染区间 pieces
就可以了
setLineChart: function (list = []) {
let vm = this
let dataX = []
let seriersArr = [
{
name: '融资金额系数',
type: 'line',
data: []
},
{
name: '融资联控系数',
type: 'line',
data: []
},
{
name: '池融资余额系数',
type: 'line',
data: []
},
{
name: '信用融资余额',
type: 'line',
data: []
}
]
list.forEach((item, idx) => {
vm.lineChartPam.forEach((key, index) => {
let num = ApiUtils.valueToText(item[key], 'money')
seriersArr[index].data.push(num)
if (index === 0) {
dataX.push(item['queryDate'])
}
})
})
let option = Object.assign({}, vm.optionTpl) // 获取基础echarts模板
option.xAxis.data = dataX
option.tooltip = { // 气泡设置如果数据是0就用'--'表示,不为0就保留两位小数加上百分号
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (params) {
let html = params[0].name + "<br>"
for (let i = 0; i < params.length; i++) {
// 下面一行时气泡前的小圆点标志
html += '<span style="display:inline-block;margin-right:5px;border-radius:10px;10px;height:10px;background-color:' + params[i].color + ';"></span>'
if (params[i].value == 0) {
html += params[i].seriesName + ": " + '--' + "<br>"
} else {
html += params[i].seriesName + ": " + params[i].value.toFixed(2) + "%<br>"
}
}
return html
}
}
option.visualMap = vm.setArrArea(seriersArr) // 设置渲染区间
option.series = seriersArr
vm.initChart(option)
},
// 如果折线数据是0就不渲染折线
setArrArea: function (bigArr = []) {
let visualArr = []
bigArr.forEach((item, index) => {
let visual = {
show: false,
seriesIndex: index, // 这是代表不同折线
dimension: 0,
pieces: []
, outOfRange: {opacity: 1}
, inRange: {opacity: 0}
}
let arr = item.data
for (let i = 0, len = arr.length; i < len; i++) {
if (arr[i] === 0 && arr[i + 1] === 0) {
let data = {
gt: i,
lt: i + 1
}
visual.pieces.push(data) // 需要渲染的区间数组
}
}
visualArr.push(visual)
})
return visualArr
},
参考
https://www.echartsjs.com/examples/zh/editor.html?c=line-sections
https://www.echartsjs.com/zh/option.html#visualMap-piecewise.seriesIndex