使用echarts动态下载、切换柱形、折线图，

版权声明：本文为博主原创文章，欢迎转载，转载请注明作者、原文超链接 ，博主地址：https://blog.csdn.net/qq_31122833。 https://blog.csdn.net/qq_31122833/article/details/82383935

html代码如下：

<div class="strip_out">
         <div class="strip" id="strip_5"></div>
</div>

js代码如下：

var myChart5=echarts.init(document.getElementById("strip_5"),"macarons");
myChart5.showLoading();  //显示缓冲遮盖层

$.ajax({
        url: path+"/web/api/index/getStudentConsumption",
        type: "post",
        data: {
            sno:'${sno}',
            accessToken:'${accessToken}'
        },
        success: function(msg){
            if(msg.type=="success"){
                fetchData5(msg);
                fetchData6(msg);
            }else{
                fetchData5(msg);
                fetchData6(msg);
            }
        }
    });

function fetchData5(result) {
    myChart5.hideLoading();  //隐藏遮盖层
    myChart5.setOption({
        title:{text: '消费平均图' },
        tooltip: {
            show: true
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                magicType: { show: true, type: ['line', 'bar'] },
                saveAsImage: { show: true }
            }
        },
        dataZoom: {
            show: true,
            start : 20,
            end : 100
        },
        legend:{
            orient: 'vertical',
            x:'right',
            y:'center',
            align:'left',
            data:["奢侈消费平均额","基本消费平均额"],
            tooltip:{
                show:true
            }
        },
        grid: {
            right: 120
        },
        xAxis:[{
            data:(function(){
                var arr=[];
                for(var i=0;i<result.data.length;i++){
                    arr.push({
                        value:formatDate(result.data[i].vestingDate)
                    });
                }
                return arr;
            })(),
            axisLabel:{
                textStyle:{
                    color:'#222',
                    fontSize:16
                }
            },
            lineStyle:{
                color:'#ddd',
                width:1
            },
            splitLine:{
                show:false
            },
        }],
        yAxis:[{
            type:'value',
            axisLabel:{formatter:'{value} 元'}
        }],
        series:[{
            name:"奢侈消费平均额",
            type:"line",
            data:(function(){
                var arr=[];
                for(var i=0;i<result.data.length;i++){
                    arr.push({
                        value:result.data[i].avgLuxuryConsumption*0.01
                    });
                }
                return arr;
            })(),
            symbolSize:8,
            itemStyle:{
                normal:{
                    label:{
                        show:false,
                        position:'right',
                        textStyle:{
                            color:"#666",
                            fontSize:16
                        },
                    }
                }
            }
        },
            {
                name:"基本消费平均额",
                type:"line",
                data:(function(){
                    var arr=[];
                    for(var i=0;i<result.data.length;i++){
                        arr.push({
                            value:result.data[i].avgConsumption*0.01
                        });
                    }
                    return arr;
                })(),
                itemStyle:{
                    normal:{
                        label:{
                            show:false,
                            position:'right',
                            textStyle:{
                                color:"#666",
                                fontSize:16
                            },
                        }
                    }
                }
            }]
    });
};

通过在echarts中加入：

tooltip:动态显示详情

toolbox:加载动态切换折线、柱形图，添加下载功能

dataZoom:实现根据Y轴左右拉动显示功能

tooltip: {
            show: true
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                magicType: { show: true, type: ['line', 'bar'] },
                saveAsImage: { show: true }
            }
        },
        dataZoom: {
            show: true,
            start : 20,
            end : 100
        },