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',
                 1
            }
        }
    },
    toolbox: {
        feature: {
            dataZoom: {},
             {
                type: ['rect', 'polygon', 'clear']
            }
        }
    },
     {},
    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]
        }
    }]
};

效果图如下:

原文地址:https://www.cnblogs.com/qtx-/p/11640158.html