修改柱体颜色

jeecgboot-vue3/src/components/chart/BarAndLine.vue

@@ -24,6 +24,10 @@
         type: String as PropType<string>,
         default: 'calc(100vh - 78px)',
       },
+      customColor: {
+        type: Array,
+        default: () => [],
+      }
     },
     setup(props) {
       const chartRef = ref<HTMLDivElement | null>(null);
@@ -68,12 +72,15 @@
         //轴数据
         let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
         let seriesData = [];
-        typeArr.forEach((type) => {
+        typeArr.forEach((type,index) => {
           let obj = { name: type };
           let chartArr = props.chartData.filter((item) => type === item.type);
           //data数据
           obj['data'] = chartArr.map((item) => item.value);
           obj['type'] = chartArr[0].seriesType;
+          if(props?.customColor && props?.customColor[index]){
+            obj['color'] = props.customColor[index];
+          }
           seriesData.push(obj);
         });
         option.series = seriesData;

jeecgboot-vue3/src/views/report/chartdemo/chartdemo.data.ts

@@ -1,8 +1,10 @@
+const colors = ['#4db6ac', '#ffb74d', '#64b5f6', '#e57373', '#9575cd', '#a1887f', '#90a4ae', '#4dd0e1', '#81c784', '#ff8a65'];
 export const getData = (() => {
   let dottedBase = +new Date();
   const barDataSource: any[] = [];
   const barMultiData: any[] = [];
   const barLineData: any[] = [];
+  const barLineColors: any[] = [];
 
   for (let i = 0; i < 20; i++) {
     let obj = { name: '', value: 0 };
@@ -44,6 +46,7 @@ export const getData = (() => {
       obj.value = Math.random() * 200;
       barLineData.push(obj);
     }
+    barLineColors.push(colors[j]);
   }
-  return { barDataSource, barMultiData, pieData, barLineData, radarData };
+  return { barDataSource, barMultiData, pieData, barLineData, barLineColors,radarData };
 })();

jeecgboot-vue3/src/views/report/chartdemo/index.vue

@@ -38,7 +38,7 @@
           <Gauge :chartData="{ name: '出勤率', value: 70 }" height="50vh"></Gauge>
         </a-tab-pane>
         <a-tab-pane key="10" tab="折柱图">
-          <BarAndLine :chartData="barLineData" height="50vh"></BarAndLine>
+          <BarAndLine :chartData="barLineData" :customColor="barLineColors" height="50vh"></BarAndLine>
         </a-tab-pane>
         <a-tab-pane key="11" tab="排名列表">
           <RankList title="门店销售排行榜" :list="rankList" style="width: 600px; margin: 0 auto"></RankList>
@@ -71,7 +71,7 @@
   import BarAndLine from '/@/components/chart/BarAndLine.vue';
 
   const activeKey = ref('1');
-  const { barDataSource, barMultiData, pieData, barLineData, radarData } = getData;
+  const { barDataSource, barMultiData, pieData, barLineData, radarData,barLineColors } = getData;
   const multiBarOption = {
     title: { text: '多列柱状图', left: 'center' },
   };