Vue— Echarts 多系列柱状图，堆叠柱状图， 水球图

<template>
  <div class="chart-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="chart-wrapper">
          <h3>多系列柱状图</h3>
          <chart :options="barMultipleSeriesOptions" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-wrapper">
          <h3>堆叠柱状图</h3>
          <chart :options="barStackedSeriesOptions" />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="chart-wrapper">
          <h3>水球图</h3>
          <chart :options="liquidSeriesOptions" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/liquidFill'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
 
export default {
  components: {
    'chart': ECharts
  },
  data() {
    return {
      barMultipleSeriesOptions: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '系列1',
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130]
          },
          {
            name: '系列2',
            type: 'bar',
            data: [60, 150, 80, 70, 110, 130, 100]
          }
        ]
      },
      barStackedSeriesOptions: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '系列1',
            type: 'bar',
            stack: '总量',
            data: [120, 200, 150, 80, 70, 110, 130]
          },
          {
            name: '系列2',
            type