• echarts折线图实现切断效果


    需求描述:

    折线图如果相邻的两个值都是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

  • 相关阅读:
    script Ngrinder_TestRunnerInsertMysqlSingle.groovy
    nGrinder TestRunnerInsertMysqlSingle.groovy
    列表导航栏实例(02)——精美电子商务网站赏析
    【网络编程】之九、事件选择WSAEventSelect
    注册界面设计(01)——精美电子商务网站赏析
    列表导航栏实例(04)——精美模板赏析
    【网络编程】之十、重叠IO Overlapped IO
    CSS大小设置实例——盒子模型
    常用数据验证正则表达式释义(附:正则表达式常用符号)
    【网络编程】之八、异步选择WSAAsyncSelect
  • 原文地址:https://www.cnblogs.com/codebook/p/12702647.html
Copyright © 2020-2023  润新知