【Vue】21.vue项目中ECharts图表双Y轴

╰半夏微凉° 2022-04-24 15:24 417阅读 0赞

安装ECharts图表插件

npm install echarts --save

实例效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70][]

代码：

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70]: /images/20220212/ca83f34dce7b41b89ea10bec4277268a.png