echarts_部分圖表配置_堆疊折線圖

echarts基本圖表使用：

1.獲取包裹元素（var myChart = echarts.init(document.getElementById(‘thisId’));）2.設置option（option={...}）3.使用設置好的option顯示圖表（myChart.setOption(option);）

廢話不多講上圖：

function ZX_bottom (thisId,titleName){
    var myChart = echarts.init(document.getElementById(thisId));
    
    option = {
            tooltip : {
                trigger: 'axis',
                /*show:false,//添加鼠標浮動窗口就消失了*/
                axisPointer: {
                    
                    type: 'line',//指示器類型。  cross' 十字准星指示器 其他選項 line  shadow
                    label: {
                        backgroundColor: 'rgba(255, 255, 255, .5)'//XY軸顯示的小方塊
                    },
                    crossStyle: {//線的顏色 axisPointer.type 為 'cross' 時有效。
                        color: '#fff'
                    }
                }
            },
            backgroundColor : 'rgba(43, 62, 75, .5)',//背景顏色
            toolbox: {//工具欄
                show: false//是否顯示工具欄組件
            },
            legend: {
                data:['營銷流量','自然流量'],
                textStyle : {
                    color : '#FFF',
                    fontSize: 15
                }
            },
            grid : {
                left : '2%',
                right : '7%',
                bottom : '3%',
                containLabel : true,
                
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,//x軸兩側留白策略
                    axisLabel : {
                        show : true,
                        textStyle : {
                            color : '#FFF',
                            fontSize: 15
                        }
                    },
                    splitLine : {//去掉網格線
                        show : false
                    },
                    axisLine : {
                        lineStyle : {
                            color : '#FFF',
                            fontSize: 15
                        }
                    },
                    axisTick : {
                        lineStyle : {
                            color : '#FFF',
                            fontSize: 15
                        }
                    },
                    data : ['周一','周二','周三','周四','周五','周六','周日'],
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        show : true,
                        textStyle : {
                            color : '#FFF',
                            fontSize: 15
                        }
                    },
                    splitLine : {//去掉網格線
                        show : false
                    },
                    axisLine : {
                        lineStyle : {
                            color : '#FFF',
                            fontSize: 15
                        }
                    },
                    axisTick : {
                        lineStyle : {
                            color : '#FFF',
                            fontSize: 15
                        }
                    }
                }
            ],
            series : [
                        
                        {
                            name:'自然流量',
                            type:'line',
                            stack: '總量',
                            areaStyle: {normal: {}},
                            color:['#ff907f'],//對應上面data的背景色
                            data:[220, 182, 191, 234, 290, 330, 310]
                        },{
                            name:'營銷流量',
                            type:'line',
                            stack: '總量',
                            areaStyle: {normal: {}},
                            color:['#52d2dd'],//對應上面data的背景色
                            data:[120, 132, 101, 134, 90, 230, 210]
                        }
                    ]
        };
    myChart.setOption(option);
}