導入echarts包

<script src='../scripts/libraries/echarts/echarts-all.js'></script>

堆積圖js

$(function () {
    var myChart = echarts.init(document.getElementById('main1'));
    myChart.setOption({
        title : {
            text : ""
        },
        tooltip : {
            trigger : 'axis',
            showDelay : 0, // 顯示延遲，添加顯示延遲可以避免頻繁切換，單位ms
            axisPointer : {            // 坐標軸指示器，坐標軸觸發有效
                type : 'shadow'        // 默認為直線，可選為：'line' | 'shadow'
            }
        },
        legend: {
            data:['直接訪問', '郵件營銷','聯盟廣告','視頻廣告','搜索引擎']
        },
        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 : 'value'
            }
        ],
        yAxis : [
                 {
                     type : 'category',
                     data : ['周一','周二','周三','周四','周五','周六','周日']
                 }
             ],
         series : [
             {
                 name:'直接訪問',
                 type:'bar',
                 stack: '總量',
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                 data:[320, 302, 301, 334, 390, 330, 320]
             },
             {
                 name:'郵件營銷',
                 type:'bar',
                 stack: '總量',
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                 data:[120, 132, 101, 134, 90, 230, 210]
             },
             {
                 name:'聯盟廣告',
                 type:'bar',
                 stack: '總量',
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                 data:[220, 182, 191, 234, 290, 330, 310]
             },
             {
                 name:'視頻廣告',
                 type:'bar',
                 stack: '總量',
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                 data:[150, 212, 201, 154, 190, 330, 410]
             },
             {
                 name:'搜索引擎',
                 type:'bar',
                 stack: '總量',
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                 data:[820, 832, 901, 934, 1290, 1330, 1320]
             }
         ]
    });
});    

以上堆積柱狀圖為橫著這擺放，如需要豎著擺放這將xAxis 和yAxis兌換就可

html頁面

<div class="chart" id="main1"></div>

總結

以上是生活随笔為你收集整理的Echarts-画堆积柱状图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。