简单线柱组合图echarts 折线配置项内容和展示

演示基本的组合图,以及数据的四则运算

配置项如下
      option = {
    title: {
        text: '线柱组合图'
    },
    xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    yAxis: {},
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true,title:'保存PNG',pixelRatio:3,excludeComponents:['toolbox','dataZoom']},
            brush:{show:true,type:['rect']}
        }
    },
    dataZoom: [
    {
        type: 'inside',
        show: true,
        xAxisIndex: [0],
        start: 1,
        end: 35
    },
    {
        type: 'slider',
        show: true,
        yAxisIndex: [0],
        left: '93%',

    },
    {
        type: 'slider',
        xAxisIndex: [0],
        start: 1,
        end: 35
    },
    {
        type: 'inside',
        yAxisIndex: [0],
        start: 29,
        end: 36
    }
    ],
    series: [{
        type: 'line',
        smooth:true,
        lineStyle:{
            normal:{
                color:'#aaa',
                width:5
                
            }
            
        },
        areaStyle:{
            normal:{
                color:'#ddd',
                
            }
            
        },
        data:[220, 182, 191, 234, 290, 330, 310]
    },
    //第二图形
    {
        type: 'bar',
        smooth:true,
        barWidth:20,
        label:{
            normal:{
                show:true
            },
            emphasis:{
                show:true
            }
        },
        markPoint : {
            symbol:'pin',
            data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
            ]
        },
        itemStyle:{
            normal:{
                color:'#AAA'
            }
            
        },
        markLine:{
            lineStyle:{
                normal:{
                    color:'#000',
                    width:1
                }
            },
            
            data:[{
                type:'average', name:'平均值'
            }]
        },

        data:[(220/3).toFixed(1), (182/3).toFixed(1), (191/3).toFixed(1), (234/3).toFixed(1), (290/3).toFixed(1), (330/3).toFixed(1), (310/3).toFixed(1)]
    }
    
    ],

};
    
截图如下