<template>
　　<div id="myChart" class="backfff" :style="{width: '100%', height: '350px'}"></div>
</template>

mounted() {
　　this.resizefun = ()=>{
　　　　this.$echarts.init(document.getElementById('myChart')).resize()
　　};
　　window.addEventListener('resize',this.resizefun);
}

//移除事件監聽
beforeDestroy() {
　　window.removeEventListener('resize', this.resizefun);
　　this.resizefun = null
}

// 基於準備好的dom，初始化echarts例項
        var myChart = this.$echarts.init(document.getElementById('myChart'));
        // 繪製圖表
        myChart.setOption({
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 座標軸指示器，座標軸觸發有效
              type : 'shadow'        // 預設為直線，可選為：'line' | 'shadow'
            }
          },
          legend: {
            x:'left',
            icon: "roundRect",
            data:['交易金額','交易筆數']
          },
          toolbox: {
            show : false,
            orient: 'vertical',
            x: 'right',
            y: 'center',
            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 : 'category',
              data: [...this.dates]
            }
          ],
          yAxis : [
            {
              type : 'value',
              splitLine:{
                show:true,
                lineStyle:{
                  type:'dashed'
                }
              }
            }
          ],
          series : [
            {
              name:'交易金額',
              type:'bar',
              barWidth: 10,
              itemStyle: {
                normal: {
                  color: '#2464fc',
                  barBorderRadius:[10, 10, 0, 0],
                }
              },
              data:[...this.amounts],
            },
            {
              name:'交易筆數',
              type: "line",
              smooth:true,//平滑曲線
              itemStyle: {
                normal: {
                  color: '#c23531'
                }
              },
              data:[...this.counts],
            },
          ]
     });

螢幕放大： 螢幕縮小：