echar圖柱狀圖和折線圖混合加雙側y軸坐

 

 

代碼如下：

 floorSalesBar(){//方法名====這個方法應該放在methods中並在mounted中調用哦

methods

      let _this = this;
      let myChart = _this.$echarts.init(document.getElementById('floorSales'));

      let option = {
        color:['#ff6100','#ffa836','#d9822a'],

        legend: {
          data: ['銷售', '同比', '環比']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: ['L3', 'L6', 'L5', 'L11', 'L19', 'L4', 'L9']
        },
        yAxis: [//這里兩個坐標軸，因為下面用的數據有柱狀圖和折線圖，而他們的一個是數值，一個是百分比因此數的范圍不一樣，因此這里要加入id來定義坐標軸的標記下面 yAxisIndex相對應其標記號就可以取這個坐標軸線了
          {
            name: '銷售',
            type: 'value',
            id:0,
            max: 500
          },
          {
            name: '%',
            nameLocation: 'end',
            max: 100,
            id:1,
            type: 'value',
          }
        ],
        series: [
          {
            name: '銷售',
            type: 'bar',
            barMaxWidth:25,//柱狀圖的寬度
            yAxisIndex:0,//對應y軸的那一組坐標
            label:{
              show:true,
              position:'insideTop'//柱狀圖上文字的位置
            },
            itemStyle:{
              barBorderRadius: [7, 7, 0, 0]//柱狀圖的邊框
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '同比',
            type: 'line',
            yAxisIndex:1,
            data: [20, 18, 11, 34, 90, 33, 10]
          },
          {
            name: '環比',
            type: 'line',
            yAxisIndex:1,
            data: [50, 32, 21, 15, 90, 30, 40]
          }
        ]
      };

      window.onresize = function () {
        myChart.resize();
      };
      // 為echarts對象加載數據
      myChart.setOption(option);
    }
  }
}