echats样式修改

src/components/echarts/MyEchart.vue

@@ -8,6 +8,7 @@ import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
 import * as echarts from 'echarts' // 全引入
 import 'echarts-gl'
 import 'echarts/lib/component/dataZoom'
+import { color, gradeColor } from './color'
 
 const chartRef = ref<HTMLDivElement>()
 
@@ -24,7 +25,7 @@ const initChart = () => {
     chart?.dispose()
 
     chart = echarts.init(chartRef.value as HTMLDivElement)
-    chart.setOption({
+    const options = {
         title: {
             left: 'center',
             textStyle: {
@@ -35,7 +36,6 @@ const initChart = () => {
         },
         tooltip: {
             trigger: 'axis',
-
             axisPointer: {
                 type: 'shadow',
                 label: {
@@ -75,47 +75,56 @@ const initChart = () => {
         },
         xAxis: props.options.xAxis ? handlerXAxis() : null,
         yAxis: props.options.yAxis ? handlerYAxis() : null,
-        dataZoom: [
+        dataZoom: props.options.dataZoom || [
             {
                 type: 'inside',
                 height: 13,
                 start: 0,
                 bottom: '20px',
-                end: 100,
-                ...(props.options.dataZoom || null)
+                end: 100
             },
             {
                 start: 0,
                 height: 13,
                 bottom: '20px',
-                end: 100,
-                ...(props.options.dataZoom || null)
+                end: 100
             }
         ],
-        color: [
-            ...(props.options.color || ''),
-            '#07CCCA',
-            '#00BFF5',
-            '#FFBF00',
-            '#77DA63',
-            '#D5FF6B',
-            '#Ff6600',
-            '#FF9100',
-            '#5B6E96',
-            '#66FFCC',
-            '#B3B3B3'
-        ],
+        color: props.options.color || color,
         series: props.options.series,
         ...props.options.options
-    })
+    }
+    handlerBar(options)
+    // 处理柱状图
+    chart.setOption(options)
     setTimeout(() => {
         chart.resize()
     }, 0)
 }
+const handlerBar = (options: any) => {
+    if (Array.isArray(options.series)) {
+        options.series.forEach((item: any) => {
+            if (item.type === 'bar') {
+                item.barMinHeight = 10
+                item.itemStyle = Object.assign(
+                    {
+                        color: (params: any) => {
+                            console.log(params)
+                            if (params.value == 0 || params.value == 3.14159) {
+                                return '#ccc'
+                            } else {
+                                return color[params.seriesIndex]
+                            }
+                        }
+                    }
+                )
+            }
+        })
+    }
+}
 const handlerYAxis = () => {
     let temp = {
         type: 'value',
-
         nameTextStyle: {
             color: '#000'
         },

src/components/echarts/color.ts

@@ -0,0 +1,13 @@
+export const color = [
+    '#07CCCA',
+    '#00BFF5',
+    '#FFBF00',
+    '#77DA63',
+    '#D5FF6B',
+    '#Ff6600',
+    '#FF9100',
+    '#5B6E96',
+    '#66FFCC',
+    '#B3B3B3'
+]
+export const gradeColor = ['#339966', '#FFCC33', '#CC0000']