vue-echarts 动态x轴字段，可选多个公司数据，根据选择的条件动态生成echarts柱形图（或者折线图）

需求：月份、 公司 、显示字段、柱形图（折线图），都为动态可选的。

（此例子：模拟数据都为随机数，所以每次截图值都会不同）

（Vue3 + echarts 5.4.2版本）

<template>
  <div>
    <div>
      <label>公司:</label>
      <a-select v-model:value="selectedCompany" style="width: 180px; margin-left: 8px" allow-clear mode="multiple" :maxTagCount="1">
        <a-select-option :value="v" v-for="(v, index) in companies" :key="index">{{ v }}</a-select-option>
      </a-select>
    </div>
    <div>
      <label>月份:</label>
      <a-select v-model:value="selectedMonth" style="width: 180px; margin-left: 8px" allow-clear>
        <a-select-option :value="v" v-for="(v, index) in months" :key="index">{{ v }}月份</a-select-option>
      </a-select>
    </div>
    <div>
      <label>显示字段:</label>
      <a-select v-model:value="selectType" style="width: 180px; margin-left: 8px" allow-clear mode="multiple" :maxTagCount="1">
        <a-select-option :value="v" v-for="(v, index) in typeList" :key="index">{{ v }}</a-select-option>
      </a-select>
    </div>
    <div>
      <label>echarts图类型:</label>
      <a-space direction="vertical">
        <a-radio-group v-model:value="selectEcharts" :options="plainOptions" />
      </a-space>
    </div>
    <button @click="btnSave">确定</button>
    <div id="chart" ref="chart" style="width: 100%;height: 440px;"></div>
  </div>
</template>

<script setup>
import { onMounted,ref,nextTick,watch } from 'vue';
import dayjs from 'dayjs';
import * as echarts from 'echarts';// 使用的版本："echarts": "^5.4.2",

const dataList = ref([]);
const chart = ref(null);
let chartInstance = null;
// 选择条件
const companies = ['A公司', 'B公司', 'C公司','D公司'];
const months = ['1','2','3','4','5','6','7','8','9','10','11','12'];
const typeList = ['铅笔','钢笔','毛笔','碳素笔'];
const plainOptions = [
  {
    label: '柱形图',
    value: '1',
  },
  {
    label: '折线图',
    value: '2',
  }
];

// 选中的值
const selectedCompany = ref([]);
const selectedMonth = ref('');
const selectType = ref([]);
const selectEcharts = ref('1');

// 组装后变量
const sourceList = ref([]);
const seriesList = ref([]);
const btnSave = ()=>{
  sourceList.value = [];
  seriesList.value = [];
  const arrCompany = ['product',...selectedCompany.value];
  sourceList.value.push(arrCompany)
  const arrType = selectType.value.map(item=>[item]);
  for (let index = 0; index < arrType.length; index++) {
    const element = arrType[index];
    let arr =[]
    for (let j = 0; j < selectedCompany.value.length; j++) {
      const num = Math.random()*100;
      arr.push(num.toFixed(2))
    }
    sourceList.value.push([...element,...arr])
  }
  
  console.log(sourceList.value);
  for (let i = 0; i < selectedCompany.value.length; i++) {
    if(selectEcharts.value === '1'){
      seriesList.value.push({ type: 'bar' });
    }else{
      seriesList.value.push({ type: 'line' });
    }
  }
  // 要把数据拼装成这样的
  // sourceList.value = [
  //   // ['product', 'A公司', 'B公司', 'C公司','D公司'],
  //   // ['铅笔', 43.3, 85.8, 93.7,11],
  //   // ['钢笔', 83.1, 73.4, 55.1,22],
  //   // ['毛笔', 86.4, 65.2, 82.5,33],
  //   // ['碳素笔', 72.4, 53.9, 39.1,44]
  // ];
  getData();
}
// 获得数据
// ecahrts
const getData = ()=>{
  if(!chartInstance){
    chartInstance = echarts.init(chart.value);
    const option = {
      legend: {},
      tooltip: {},
      dataset: {
        source: sourceList.value
      },
      xAxis: { type: 'category' },
      yAxis: {},
      series: seriesList.value
    };
    chartInstance.setOption(option);
  }else{
    chartInstance.setOption({
      series: seriesList.value,
      dataset: {
        source: sourceList.value
      },
    });
  }
}
onMounted(() => {
  // 获取数据
  // getData();
});
</script>