v-echarts 使用示例

const colors = ['#5470C6', '#91CC75', '#EE6666'];
option = {
  title: { text: '产品收入净额+毛利率趋势', left: 'center', top: 15 },
  grid: [{ bottom: '50%' }, { top: '50%' }],
  color: ['#5470c6', '#91cc75', '#5470c6', '#91cc75'],
  legend: {
    data: [
      '对比项A-产品收入净额',
      '对比项A-毛利率',
      '对比项B-产品收入净额',
      '对比项B-毛利率'
    ],
    y: 'bottom'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross', crossStyle: { color: '#999' } }
  },
  xAxis: [
    {
      type: 'category',
      data: [
        '2022-01',
        '2022-02',
        '2022-03',
        '2022-04',
        '2022-05',
        '2022-06',
        '2022-07',
        '2022-08'
      ],
      position: 'bottom',
      offset: 30,
      axisPointer: { type: 'shadow' },
      gridIndex: 0,
      show: false
    },
    {
      type: 'category',
      data: [
        '2022-01',
        '2022-02',
        '2022-03',
        '2022-04',
        '2022-05',
        '2022-06',
        '2022-07',
        '2022-08'
      ],
      axisPointer: { type: 'shadow' },
      gridIndex: 1
    },
    {
      type: 'category',
      data: [
        '2022-01',
        '2022-02',
        '2022-03',
        '2022-04',
        '2022-05',
        '2022-06',
        '2022-07',
        '2022-08'
      ],
      position: 'bottom',
      offset: 30,
      axisPointer: { type: 'shadow' },
      gridIndex: 1
    },
    
  ],
  yAxis: [
    { gridIndex: 0, position: 'right', type: 'value', name: '', axisLabel: {} },
    { gridIndex: 1, position: 'left', type: 'value', name: '', axisLabel: {} }
  ],
  series: [
    {
            seriesLayoutBy: 'row',
      name: '对比项A-产品收入净额',
      type: 'bar',
      barGap: 0,
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: [
        312219741, 209681088, 333443655, 342393372, 321332670, 321424656,
        290532806, 309242933
      ]
    },
    {
            seriesLayoutBy: 'row',
      name: '对比项B-产品收入净额',
      type: 'bar',
      barGap: 0,
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: [
        312219741, 209681088, 333443655, 342393372, 321332670, 321424656,
        290532806, 309242933
      ]
    },
    {

      name: '对比项A-毛利率',
      type: 'line',

      data: [15.32, 9.09, 8.1, 2.77, 7.42, 11.77, 3.88, 6.46]
    },
    {

      name: '对比项B-毛利率',
      type: 'line',

      data: [15.32, 9.09, 8.1, 2.77, 7.42, 11.77, 3.88, 6.46]
    }
  ]
};