echarts使用dataset實現雙y軸效果


自己使用echarts4的dataset屬性實現的一個雙y軸的效果:

代碼如下:

option = {
    dataset: {
        source: [
            [61.2, 51.6, 74, '北京分'],
            [67.5, 59, 75.3, '廣州分'],
            [59.5, 49.2, 9305, '浙江分'],
            [57, 63, 8605, '石家庄分'],
            [55.8, 53.6, 87.2, '黑龍江分'],
            [70, 59, 8105, '河南分'],
            [59.1, 47.6, 84, '福建分'],
            [66, 69.8, 8405, '陝西分'],
            [76.2, 66.8, 75, '內蒙古分'],
            [76.2, null, 75, '內蒙古分001'],
            [null, 66.8, 75, '內蒙古分002'],
            [76.2, 66.8, null, '內蒙古分003'],
            [76.2, null, 75, '內蒙古分004']
        ],
        dimensions: ['采購價格', '銷售價格', '銷量', '分公司名稱']
    },
    title: this.title,
    grid: [{
        left: '3%',
        bottom: '3%',
        right: '0%',
        containLabel: true
    }],
    tooltip: {
        // trigger: 'axis',
        showDelay: 0,
        axisPointer: {
            show: true,
            type: 'cross',
            lineStyle: {
                type: 'dashed',
                width: 1
            }
        }
    },
    toolbox: {
        feature: {
            dataZoom: {},
            brush: {
                type: ['rect', 'polygon', 'clear']
            }
        }
    },
    brush: {},
    legend: {
        data: ['女性', '男性'],
        left: 'center'
    },
    xAxis: [{
        type: 'category',
        scale: true,
        axisLabel: {
            formatter: '{value}'
        },
        axisLine: {
            symbol: ['none', 'arrow']
        },
        splitLine: {
            show: false
        }
    }, {
        type: 'category',
        scale: true,
        axisLabel: {
            formatter: '{value}'
        },
        axisLine: {
            symbol: ['none', 'arrow']
        },
        splitLine: {
            show: false
        }
    }],
    yAxis: [{
        type: 'value',
        scale: true,
        axisLine: {
            symbol: ['none', 'arrow']
        },
        splitLine: {
            show: false
        }
    }, {
        type: 'value',
        scale: true,
        axisLine: {
            symbol: ['none', 'arrow']
        },
        splitLine: {
            show: false
        }
    }, {
        type: 'value',
        scale: true,
        axisLine: {
            symbol: ['none', 'arrow']
        },
        splitLine: {
            show: false
        }
    }],
    series: [{
        name: '采購價格',
        xAxisIndex: 0,
        yAxisIndex: 0,
        type: 'scatter',
        encode: {
            x: 3,
            y: 0,
            tooltip: [0, 1, 2]
        },
        markLine: {
            symbol: 'none',
            lineStyle: {
                normal: {
                    type: 'dashed'
                }
            },
            label: {
                formatter: '采購價格紅線值{c}',
                position: 'middle'
            },
            data: [{ type: 'average', name: '平均值' }]
        }
    }, {
        name: '銷售價格',
        type: 'scatter',
        encode: {
            x: 3,
            y: 1,
            tooltip: [0, 1, 2]
        },
        markLine: {
            symbol: 'none',
            lineStyle: {
                normal: {
                    type: 'dashed'
                }
            },
            label: {
                formatter: '銷售價格紅線值{c}',
                position: 'middle'
            },
            data: [{ type: 'average', name: '平均值' }]
        }
    }, {
        type: 'bar',
        xAxisIndex: 0,
        yAxisIndex: 2,
        encode: {
            x: 3,
            y: 2,
            tooltip: [0, 1, 2, 3]
        }
    }]
};

 

效果圖如下:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM