// 折線和柱型圖組合
$(document).ready(function () {
  // 基於準備好的dom，初始化echarts例項
  var myChart = echarts.init(document.querySelector(".mes9 .chart"));

  // 2. 指定配置和資料
  myChart.setOption ({   
    color: ["#00f2f1", "#ed3f35","#F8B448"],
    tooltip: {
      // 通過座標軸來觸發
      trigger: "axis",
      //formatter: '{b0}<br />{a}{c}'
 

    },
    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:0,  //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"
                              }
                    }, 
      },

      {
             type: 'value',
             //name: '增長率',
             min: 0,
             max: 150,
            // interval: 10,   //百分比間隔數
                   
             axisTick: {
                          show: false   // 去除刻度
                       },
             splitLine: {
                          show: false//是否顯示分隔線。
                        },
             axisLabel: {
                          color: "rgba(255,255,255,.7)" ,  // 修飾刻度標籤的顏色
                          formatter: '{value} %'
                        }
      }


      ],

    dataset: {
          //指示名稱
         dimensions: ['product',  '2019', '2020','同比'], 
         source: [ ]
      },
    series: [
      {
       // name: "發貨",
        type: "bar",
        //barWidth: "20%",
      },
      {
        type: "bar",
      },
      {
        type: "line",
        yAxisIndex: 1,    //這裡要設定哪個y軸，預設是最左邊的是0，然後1，2順序來。
        smooth: true,   // 是否讓線條圓滑顯示
        label : {
                            show : false,
                            position : 'top',
                            //formatter: '{c} %',
                            textStyle : {
                                //fontSize : '14',
                                color: "rgba(255,255,255,.7)"
                            }
                }
      }
    ]
  });
    //第一次載入
    myChart.showLoading();
       // 非同步載入資料
   //$.get('dateplan.json').done(function (data) {
   $.get('data2.json').done(function (data) {
    myChart.hideLoading();
      myChart.setOption({ 
      dataset:{  source:data.source  },
  });

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

});