【Vue】21.vue項目中ECharts圖表雙Y軸

安裝ECharts圖表插件

npm install echarts --save

實例效果：

代碼：

<template>
    <div class="chart-swapper">
      <div id="myChat"></div>
    </div>
</template>

<script>
  const echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/bar');
  require('echarts/lib/chart/line');
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/markPoint');
  require('echarts/lib/component/title');
  require('echarts/lib/component/axisPointer');

    export default {
      data() {
        return {
          name: 'Test',
        };
      },
      beforeCreate() {
        console.log('beforeCreate');
      },
      created() {
        // this.init();
      },
      mounted() {
        this.drawLine();
      },
      methods: {
        init() {
          this.drawLine();
        },
        drawLine() {
          const myChart = echarts.init(document.getElementById('myChat'));
          const option = {
            // title: 'vue中引入ECharts',
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999',
                },
              },
            },
            legend: {
              data: ['蒸發量', '降水量', '平均溫度'],
            },
            xAxis: [{
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
              axisPointer: {
                type: 'shadow',
              },
            }],
            yAxis: [{
              type: 'value',
              name: '水量',
              min: 0,
              max: 250,
              interval: 50,
              axisLabel: {
                formatter: '{value}ml',
              },
            }, {
              type: 'value',
              name: '溫度',
              min: 0,
              max: 25,
              interval: 5,
              axisLabel: {
                formatter: '{value}°C',
              },
            }],
            series: [{
              name: '蒸發量',
              type: 'bar',
              data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            }, {
              name: '降水量',
              type: 'bar',
              data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            }, {
              name: '平均溫度',
              type: 'line',
              yAxisIndex: 1,
              data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
            }],
          };
          myChart.setOption(option);
        },
      },
    };
</script>

<style scoped lang="stylus">
  @import '../common/stylus/mixin.styl';

  #myChat
    margin-left 15px
    wh(700px, 500px)
</style>