图表

src/components/chart/BarAndLine.vue

@@ -26,8 +26,25 @@
       },
       customColor: {
         type: Array,
-        default: () => [],
+        default: () => [ '#018ffb','#ffb74d','#4db6ac','#e57373', '#9575cd', '#a1887f', '#90a4ae', '#4dd0e1', '#81c784', '#ff8a65'],
-      }
+      },
+      yAxis: {
+        type: Object,
+        default: () => ({type: 'value'}),
+      },
+      axisLabel: {
+        type: Object,
+        default: () => ({ rotate: 0}),
+      },
+      grid: {
+        type: Object,
+        default: () => ({
+          left: '3%',
+          right: '4%',
+          bottom: '6%',
+          containLabel: true
+        }),
+      },
     },
     setup(props) {
       const chartRef = ref<HTMLDivElement | null>(null);
@@ -36,20 +53,25 @@
         tooltip: {
           trigger: 'axis',
           axisPointer: {
-            type: 'shadow',
+            type: 'cross',
             label: {
               show: true,
               backgroundColor: '#333',
             },
           },
         },
+        legend: {
+          data: [],
+          // orient: 'vertical',
+          // left: 'top'
+        },
+        grid: props.grid,
         xAxis: {
           type: 'category',
           data: [],
+          axisLabel: props.axisLabel,
         },
-        yAxis: {
+        yAxis: props.yAxis,
-          type: 'value',
-        },
         series: [
           {
             name: 'bar',
@@ -78,11 +100,13 @@
           //data数据
           obj['data'] = chartArr.map((item) => item.value);
           obj['type'] = chartArr[0].seriesType;
+          obj['yAxisIndex'] = index;
           if(props?.customColor && props?.customColor[index]){
             obj['color'] = props.customColor[index];
           }
           seriesData.push(obj);
         });
+        option.legend.data = typeArr;
         option.series = seriesData;
         option.xAxis.data = xAxisData;
         setOptions(option);

src/components/chart/Pie.vue

@@ -28,6 +28,22 @@
         type: String as PropType<string>,
         default: 'calc(100vh - 78px)',
       },
+      radius: {
+        type: Object,
+        default: () => ['72%'],
+      },
+      roseType: {
+        type: String as PropType<string>,
+        default: '', //'area' 为玫瑰图
+      },
+      itemStyle: {
+        type: Object,
+        default: () => ({ borderRadius: 0}),
+      },
+      legend: {
+        type: Object,
+        default: () => ({ orient: 'vertical',left: 'top'}),
+      },
     },
     emits: ['click'],
     setup(props, { emit }) {
@@ -37,11 +53,14 @@
         tooltip: {
           formatter: '{b} ({c})',
         },
+        legend: props.legend,
         series: [
           {
             type: 'pie',
-            radius: '72%',
+            radius: props.radius,
             center: ['50%', '55%'],
+            roseType: props.roseType,
+            itemStyle: props.itemStyle,
             data: [],
             labelLine: { show: true },
             label: {
@@ -73,6 +92,9 @@
           Object.assign(option, cloneDeep(props.option));
         }
         option.series[0].data = props.chartData;
+        option.series[0].radius = props.radius;
+        option.series[0].roseType = props.roseType;
+        option.series[0].itemStyle = props.itemStyle;
         setOptions(option);
         resize();
         getInstance()?.off('click', onClick);