// 堆積圖
$(document).ready(function () {

  var myChart = echarts.init(document.querySelector(".mes8 .chart"));

  myChart.setOption ({   
    color: ["#00f2f1","#F8B448","#2f89cf","#8B78F6", "#ed3f35"],
    tooltip: {
      // 通過坐標軸來觸發
      trigger: "axis",
    },
    legend: {
      // 距離容器10%
       right: "10%",
      // 修飾圖例文字的顏色
      textStyle: {
        color: "#4c9bfd"
      }
    },
    grid: {
      top: "15%",
      left: "3%",
      right: "4%",
      bottom: "1%",
      show: true,
      borderColor: "#012f4a",
      containLabel: true
    },

    xAxis: {
      type: "category",
      // 去除刻度
      axisTick: {
        show: true
      },
      // 修飾刻度標簽的顏色
      axisLabel: {
        interval:1,  //0強制顯示所有標簽，如果設置為1，表示隔一個標簽顯示一個標簽，如果為3，表示隔3個標簽顯示一個標簽
        //rotate:40, //標簽傾斜的角度，在類目軸的類目標簽顯示不全時可以通過旋轉防止標簽重疊（官方這樣說的）旋轉的角度是-90到90度  
        color: "rgba(255,255,255,.7)"
      },
      // 去除x坐標軸的顏色
      axisLine: {
        show: false
      }
    },

    //設置兩個y軸，左邊顯示數量，右邊顯示概率
    yAxis: [
    {
      type: "value",
      name: '數量（臺）',  //左邊顯示
      //splitNumber: 10,//坐標軸的分割段數
      show:true,
      //interval: 50,
      // 去除刻度
      axisTick: {
        show: false
      },
      splitLine: {
                    show: false//是否顯示分隔線。
                },
      axisLabel: {
                    color: "rgba(255,255,255,.7)"   // 修飾刻度標簽的顏色
                },
          // 修改y軸分割線的顏色
          splitLine: {
                   lineStyle: {
                        color: "#012f4a"
                              }
                    }, 
      },

      ],

    dataset: {
          //指示名稱
         dimensions: ['product',  '電商', '線下','杭邦','大客戶','平均'], 
         source: [ ]
      },
    series: [
      {
       // name: "發貨",
        type: "bar",
        stack: '總量'
      },
      {
        type: "bar",
        stack: '總量'
      },
      {
        type: "bar",
        stack: '總量'
      },
      {
        type: "bar",
        stack: '總量'
      },
      {
        type: "line",
        symbol: "none"   //去掉折線上面的小圓點
      }
   
    ]
  });
    //第一次加載
    myChart.showLoading();
       // 異步加載數據
   //$.get('dateplan.json').done(function (data) {
   $.get('data8.json').done(function (data) {
    myChart.hideLoading();
      myChart.setOption({ 
      dataset:{  source:data.source  },
  });

  window.addEventListener("resize", function () {
    myChart.resize();
  });
  
});

});

總結

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

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