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

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

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