echarts双Y轴三折线图

时间:2024-04-08 13:57:06

代码:

var option = {
    title : {
        text: title,
        subtext: subTitle
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['注册量','预购','成交']
        data:dataName
    },
    toolbox: {
         show : true,
         feature : {
            mark : {show: true},
             dataView : {show: true, readOnly: false},
             magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
             restore : {show: true},
             saveAsImage : {show: true}
         }
     },
     calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        
        }
    ],
    yAxis : [
        {
            type: 'value',
            name: '注册量',
            min: 0,
            max: 250,
            position: 'left',
            axisLine: {
                lineStyle: {
                    color: colors[0]
                }
            },
            axisLabel: {
                formatter: '{value} ml'
            }
        },
        {
            type: 'value',
            name: '预购',
            min: 0,
            max: 250,
            position: 'left',
            offset: 80,
            axisLine: {
                lineStyle: {
                    color: colors[1]
                }
            },
            // axisLabel: {
            //     formatter: '{value} ml'
            // }
        },
        {
            type: 'value',
            name: '成交',
            // min: 0,
            // max: 25,
            position: 'right',
            axisLine: {
                lineStyle: {
                    color: colors[2]
                }
            },
            // axisLabel: {
            //     formatter: '{value} °C'
            // }
        }
    ],
    series : [
        {
            name:'注册量',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[10, 12, 21, 54, 260, 830, 710]
            //data:leftData1
        },
        {
            name:'预购',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[30, 182, 434, 791, 390, 30, 10]
            //data:leftData2
        },
        {
            name:'成交',
            type:'line',
            smooth:true,
            yAxisIndex:1,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[1320, 1132, 601, 234, 120, 90, 20]
            //data:rightData
        }
    ]
};

结果样式:

echarts双Y轴三折线图