vue中 使用antv g2 柱状图与折线图混合使用

爷爷没有输给战火，父亲没有输给贫穷，我却输给了和平年代的生活和爱情，以及太过自由

前端QQ群: 981668406
在此附上我的QQ: 2489757828 有问题的话可以一同探讨
我的github: 李大玄
我的私人博客: 李大玄
我的简书: 李大玄
我的CSDN: 李大玄

这是数据

data: [
 {
      time: '9:00-10:00', value: 30 , type: '曝光量', rate: 100 },
   {
      time: '10:00-11:00', value: 90, type: '曝光量', rate: 200 },
   {
      time: '11:00-12:00', value: 50, type: '点击量', rate: 300 },
   {
      time: '12:00-13:00', value: 30, type: '点击量', rate: 400 },
   {
      time: '13:00-14:00', value: 70, type: '点击量', rate: 500 }
 ],

这是组件

<template>
  <div class="page">
    <div :id="id">div>
  div>
template>
<script type="text/ecmascript-6">
import {
       Chart } from '@antv/g2';

export default {
      
  name: 'Name', // Pascal命名
  components: {
      },
  props: {
      
    id: {
      
      type: String,
      default: 'chart'
    },
    height: {
      
      type: Number,
      default: 500
    },
    chartWidth: {
      
      type: Number,
    },
    chartData: {
      
      type: Array,
      default: () => {
      }
    },
  },
  data() {
      
    return {
      };
  },
  computed: {
      },
  watch: {
      },
  filters: {
      },
  beforeCreate() {
      },
  created() {
      },
  mounted() {
      
    this.initPage();
  },
  methods: {
      
    initPage() {
      },
    drawChart() {
      
      const _this = this;
      const chart = new Chart({
      
        container: _this.id,
        autoFit: true,
        height: _this.height,
        width: _this.chartWidth
      });

      chart.data(_this.chartData);
      chart.scale({
      
        value: {
      
          alias: '销售额(万)',
          nice: true,
        },
        rate: {
      
          alias: '李大玄(百)',
          nice: true,
        },
      });
	chart.scale('reportDate', {
      
        tickInterval: 100,
      });
      chart.axis('rate', {
      
        title: {
      
          top: '0',
          style: {
      
            fill: 'green',
          },
        },
      });
      chart.axis('value', {
      
        title: {
      
          top: '0',
          style: {
      
            fill: 'green',
          },
        },
      });
      
      chart.tooltip({
      
        showCrosshairs: true, // 展示 Tooltip 辅助线
        showMarkers: false,
        shared: true,
      });
      chart.interaction('element-active');
      chart.legend({
      
        position: 'top',
        items: [
          {
       name: '曝光量', value: '曝光量', marker: {
       symbol: 'square', style: {
       fill: '#1890FF', r: 5 } } },
          {
       name: '点击量', value: '点击量', marker: {
       symbol: 'square', style: {
       fill: '#8c8c8c', r: 5 } } },
        ],
      });
      
      chart
        .interval()
        .adjust('stack')
        .color('type', ['red', 'pink'])
        .position('time*value')
        .style('time', val => {
      
          if (val === '13:00-14:00') {
      
            return {
      
              fillOpacity: 0.4,
              lineWidth: 1,
              stroke: '#636363',
              lineDash: [3, 2]
            };
          }
          return {
      
            fillOpacity: 1,
            lineWidth: 0,
            stroke: '#636363',
            lineDash: [100, 0.5]
          };
        });
      chart.line().position('time*rate').label('rate');
      chart.point().position('time*rate');
      // chart.interval().position('genre*sold');
      // chart.intervalDodge().position('date*value').color('type');
      chart.render();
    }
  },
};
script>
<style lang="scss" scoped>

style>