lambo-design-bi 0.0.1

package/pub/charts/factory/options.js

@@ -0,0 +1,2351 @@
+import * as echarts from 'echarts'
+import {accDiv, accMul} from '../../../util/math-util'
+
+function generateTestData(dataX, dataY) {
+  const colors = ['#2D8CF0', '#45D5D0', '#FFBF37', '#FD7336', '#655EF3', '#47D791', '#F85968', '#33BFF3', '#C74EF4', '#F84CEE', '#F5D000', '#B7E518'];
+  const total = dataY.reduce((a, b) => a + b, 0);
+  let result = [];
+
+  for (let i = 0; i < dataX.length; i++) {
+    const name = dataX[i];
+    const value = dataY[i];
+    let p;
+    if (total === 0) {
+      p = 0
+    } else {
+      p = (accMul(accDiv(value, total), 100)).toFixed(1)
+    }
+    const percentage = p;
+    const color = colors[i % colors.length];
+
+    result.push({
+      name: `${name}\n\n${percentage}%`,
+      itemStyle: {
+        color: color,
+      },
+      value: percentage,
+    });
+  }
+  return result;
+}
+
+function formatTitle(dataDim) {
+  let newTitle = '';
+  for (let i = 0; i < dataDim.length; i++) {
+    if (i > 0 && i % 6 === 0) {
+      newTitle += '\n';
+    }
+    newTitle += dataDim[i];
+  }
+  return newTitle;
+}
+
+
+function getLevelOption() {
+  return [
+    // 原始的配置项数组
+    {
+      itemStyle: {
+        normal: {
+          borderWidth: 0,
+          gapWidth: 5
+        }
+      }
+    },
+    {
+      itemStyle: {
+        normal: {
+          gapWidth: 5
+        }
+      }
+    },
+    {
+      colorSaturation: [0.3, 0.5],
+      itemStyle: {
+        normal: {
+          gapWidth: 5,
+          borderColorSaturation: 0.6
+        }
+      }
+    }
+  ];
+}
+
+/**
+ * type：
+ * (charts类型：
+ * 10 曲线图
+ * 11 折线图
+ * 20 单柱状图纵向
+ * 21 多柱状图纵向
+ * 22 纵向柱状堆叠图
+ * 23 单柱状图横向
+ * 24 多柱状图横向
+ * 25 柱状堆叠图横向
+ * 26 无坐标轴无分隔线横向柱状图
+ * 30 饼图（弧度代表值大小）
+ * 31 饼图（弧度代表值大小，并根据值排序排列）
+ * 32 饼图（弧度及半径代表值大小，并根据值排序排列）
+ * 33 环形图（弧度代表值大小）
+ * 34 环形图（粗细代表值大小）
+ * 35 半圆环状图
+ * 36 多环图
+ * 37 半圆多环图
+ * 40 金字塔图
+ * 41 矩形树图
+ * 42 桑基图
+ * 43 仪表盘进度条) <br/>
+ * dataX：x轴数据 <br/>
+ * dataY：y轴数据 <br/>
+ * dataDim：组数据 （例如柱状图、折线图多组数据） <br/>
+ * dataZ：z轴数据 （支持立体图）
+ * */
+export function getECharts(type, dataX, dataY, dataDim) {
+  // TODO 这里的color要引用公共的
+  const colors = ['#2D8CF0', '#45D5D0', '#FFBF37', '#FD7336', '#655EF3', '#47D791', '#F85968', '#33BFF3', '#C74EF4', '#F84CEE', '#F5D000', '#B7E518']
+  // colors数组对应的areaColors
+  const areaColors = colors.map(color => {
+    const rgbaStart = hexToRgba(color, 0.2);
+    const rgbaEnd = hexToRgba(color, 0.01);
+    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      { offset: 0, color: rgbaStart },
+      { offset: 1, color: rgbaEnd }
+    ], false);
+  })
+  let opt = {}
+  if (type === '10' || type === '11') {
+    const transposeData = transpose(dataY)
+    let series = []
+    if (type === '10') {
+      for (let i = 0; i < transposeData.length; i++) {
+        series.push({
+          name: dataDim[i],
+          type: 'line',
+          smooth: true,
+          showAllSymbol: true,
+          symbol: 'circle',
+          showSymbol: true,
+          symbolSize: 5,
+          lineStyle: {
+            color: colors[i],
+          },
+          label: { show: false },
+          itemStyle: {
+            color: colors[i],
+            borderColor: hexToRgba(colors[i], 0.6),
+            borderWidth: 3
+          },
+          areaStyle: {
+            normal: {
+              color: areaColors[i],
+              shadowColor: hexToRgba(colors[i], 0.8),
+              shadowBlur: 20,
+            },
+          },
+          data: transposeData[i],
+        })
+      }
+      opt = {
+        backgroundColor: '#fff',
+        legend: {
+          icon: 'roundRect',
+          itemWidth: 10,
+          itemHeight: 6,
+          selectedMode: true,
+          textStyle: {
+            fontSize: '10px',
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            color: '#666'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'line',
+            lineStyle: {
+              color: '#57617B',
+            },
+          },
+        },
+        grid: {
+          top: '10%',
+          left: '2%',
+          bottom: '1%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#EEE',
+            },
+          },
+          axisTick: { show: false },
+          axisLabel: {
+            fontFamily: 'Microsoft YaHei',
+            color: '#666',
+            fontSize: 10,
+            interval: 0,
+            formatter: function (value) {
+              let result = '';
+              let lineCount = 0;
+              for (let i = 0; i < value.length; i += 2) {
+                if (lineCount < 2) {
+                  if (value.length <= 2) {
+                    result = value
+                  } else {
+                    result += value.slice(i, i + 2) + '\n';
+                  }
+                }
+                lineCount++;
+              }
+              return result;
+            }
+          },
+          boundaryGap: false,
+          data: dataX,
+        },
+        yAxis: {
+          type: 'value',
+          min: 0,
+          axisLine: { show: false },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#F6F6F6',
+            },
+          },
+          axisTick: { show: false },
+          axisLabel: {
+            fontFamily: 'Microsoft YaHei',
+            color: '#999',
+            fontSize: 10,
+            interval: 0,
+            formatter: function (value) {
+              if (value >= 1000) {
+                return value / 1000 + 'k';
+              } else {
+                return value;
+              }
+            }
+          },
+        },
+        series: series,
+      }
+    }
+    else if (type === '11') {
+      for (let i = 0; i < transposeData.length; i++) {
+        series.push({
+          name: dataDim[i],
+          type: 'line',
+          smooth: false,
+          showAllSymbol: true,
+          symbol: 'none',
+          showSymbol: true,
+          symbolSize: 5,
+          lineStyle: {
+            color: colors[i],
+          },
+          label: { show: false },
+          itemStyle: {
+            color: colors[i],
+            borderColor: hexToRgba(colors[i], 0.6),
+            borderWidth: 3
+          },
+          areaStyle: {
+            normal: {
+              color: areaColors[i],
+              shadowColor: hexToRgba(colors[i], 0.8),
+              shadowBlur: 20,
+            },
+          },
+          data: transposeData[i],
+        })
+      }
+      opt = {
+        backgroundColor: '#fff',
+        legend: {
+          icon: 'roundRect',
+          itemWidth: 10,
+          itemHeight: 6,
+          selectedMode: true,
+          textStyle: {
+            fontSize: '10px',
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            color: '#666'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'line',
+            lineStyle: {
+              color: '#57617B',
+            },
+          },
+        },
+        grid: {
+          top: '10%',
+          left: '2%',
+          bottom: '1%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#EEE',
+            },
+          },
+          axisTick: { show: false },
+          axisLabel: {
+            fontFamily: 'Microsoft YaHei',
+            color: '#666',
+            fontSize: 10,
+            interval: 0,
+            formatter: function (value) {
+              let result = '';
+              let lineCount = 0;
+              for (let i = 0; i < value.length; i += 2) {
+                if (lineCount < 2) {
+                  if (value.length <= 2) {
+                    result = value
+                  } else {
+                    result += value.slice(i, i + 2) + '\n';
+                  }
+                }
+                lineCount++;
+              }
+              return result;
+            }
+          },
+          boundaryGap: false,
+          data: dataX,
+        },
+        yAxis: {
+          type: 'value',
+          min: 0,
+          axisLine: { show: false },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#F6F6F6',
+            },
+          },
+          axisTick: { show: false },
+          axisLabel: {
+            fontFamily: 'Microsoft YaHei',
+            color: '#999',
+            fontSize: 10,
+            interval: 0,
+            formatter: function (value) {
+              if (value >= 1000) {
+                return value / 1000 + 'k';
+              } else {
+                return value;
+              }
+            }
+          },
+        },
+        series: series,
+      }
+    }
+  }
+  else if (type === '20' || type === '21' || type === '22' || type === '23' || type === '24' || type === '25' || type === '26') {
+    if (type === '20') {
+      opt = {
+        backgroundColor: '#fff',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '2%',
+          bottom: '1%',
+          containLabel: true
+        },
+        calculable: true,
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#eee',
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontFamily: 'Microsoft YaHei',
+            color: '#666',
+            fontSize: 10,
+            fontWeight: '400',
+            interval: 0,
+            formatter: function (value) {
+              let result = '';
+              let lineCount = 0;
+              for (let i = 0; i < value.length; i += 2) {
+                if (lineCount < 2) {
+                  if (value.length <= 2) {
+                    result = value
+                  } else {
+                    result += value.slice(i, i + 2) + '\n';
+                  }
+                }
+                lineCount++;
+              }
+              return result;
+            }
+          },
+          data: dataX,
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: { show: false },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#f6f6f6',
+            },
+          },
+          axisTick: { show: false },
+          axisLabel: {
+            fontFamily: 'MicrosoftYaHei',
+            color: '#999999',
+            fontSize: 10,
+            interval: 0,
+            formatter: function (value) {
+              if (value >= 1000) {
+                return value / 1000 + 'k';
+              } else {
+                return value;
+              }
+            }
+          }
+        },
+        series: [
+          {
+            type: 'bar',
+            barWidth: '30px',
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  let colorArr =
+                    params.value > 0 ? ['#2d8cf0', 'rgb(150,204,251)'] : ['rgb(150,204,251)', '#2d8cf0'];
+                  return new echarts.graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [{
+                      offset: 0,
+                      color: colorArr[0],
+                    },
+                    {
+                      offset: 1,
+                      color: colorArr[1],
+                    },
+                    ],
+                    false
+                  );
+                },
+                barBorderRadius: [1],
+              },
+            },
+            label: {
+              show: true,
+              color: 'rgb(56,159,255)',
+              position: 'outside',
+              fontSize: 10,
+            },
+            data: dataY[0],
+          },
+        ]
+      }
+    }
+    else if (type === '21') {
+      let series = []
+      const transData = transpose(dataY)
+      for (let i = 0; i < transData.length; i++) {
+        series.push({
+          name: dataDim[i],
+          type: 'bar',
+          data: transData[i],
+          itemStyle: {
+            color: colors[i]
+          }
+        })
+      }
+      opt = {
+        backgroundColor: '#fff',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '2%',
+          bottom: '1%',
+          containLabel: true
+        },
+        legend: {
+          icon: 'roundRect',
+          itemWidth: 10,
+          itemHeight: 6,
+          selectedMode: true,
+          textStyle: {
+            fontSize: '10px',
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            color: '#666'
+          }
+        },
+        xAxis: [{
+          type: 'category',
+          data: dataX,
+          axisLine: {
+            lineStyle: {
+              color: '#f6f6f6'
+            }
+          },
+          axisLabel: {
+            fontFamily: 'Microsoft YaHei',
+            color: '#666',
+            fontSize: '10px',
+            fontWeight: '400',
+            interval: 0,
+            formatter: function (value) {
+              let result = '';
+              let lineCount = 0;
+              for (let i = 0; i < value.length; i += 2) {
+                if (lineCount < 2) {
+                  if (value.length <= 2) {
+                    result = value
+                  } else {
+                    result += value.slice(i, i + 2) + '\n';
+                  }
+                }
+                lineCount++;
+              }
+              return result;
+            }
+          },
+          axisTick: { show: false }
+        }],
+        yAxis: [{
+          axisLabel: {
+            textStyle: {
+              fontSize: '10px',
+              fontFamily: 'Microsoft YaHei',
+              fontWeight: '400',
+              color: '#999'
+            },
+            formatter: function (value) {
+              if (value >= 1000) {
+                return value / 1000 + 'k';
+              } else {
+                return value;
+              }
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#f6f6f6'
+            }
+          },
+          axisLine: { show: false },
+          axisTick: { show: false }
+        }],
+        series: series
+      };
+    }
+    else if (type === '22') {
+      let seriesAll = [];
+      const transData = transpose(dataY);
+      for (let i = 0; i < transData.length; i++) {
+        seriesAll.push({
+          name: dataDim[i],
+          type: 'bar',
+          barWidth: '30px',
+          stack: 'total',
+          color: colors[i],
+          label: {
+            show: false
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          data: transData[i]
+        });
+      }
+      opt = {
+        backgroundColor: '#fff',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+        },
+        legend: {
+          icon: 'roundRect',
+          itemWidth: 10,
+          itemHeight: 6,
+          selectedMode: true,
+          textStyle: {
+            fontSize: '10px',
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            color: '#666'
+          },
+          data: dataDim
+        },
+        grid: {
+          top: '10%',
+          left: '2%',
+          bottom: '1%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: { show: false },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#666666',
+            },
+          },
+          axisLabel: {
+            fontSize: '10px',
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            color: '#666666',
+            textAlign: 'left',
+            interval: 0,
+            formatter: function (value) {
+              let result = '';
+              let lineCount = 0;
+              for (let i = 0; i < value.length; i += 2) {
+                if (lineCount < 2) {
+                  if (value.length <= 2) {
+                    result = value
+                  } else {
+                    result += value.slice(i, i + 2) + '\n';
+                  }
+                }
+                lineCount++;
+              }
+              return result;
+            }
+
+          },
+          data: dataX
+        },
+        yAxis: {
+          type: 'value',
+          position: 'top',
+          axisLine: { show: false },
+          axisTick: { show: false },
+          axisLabel: {
+            textStyle: {
+              fontSize: '10',
+              fontFamily: 'Microsoft YaHei',
+              fontWeight: '400',
+              color: '#999999',
+            },
+            interval: 0,
+            formatter: function (value) {
+              if (value >= 1000) {
+                return value / 1000 + 'k';
+              } else {
+                return value;
+              }
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#f6f6f6'
+            }
+          },
+        },
+        series: seriesAll
+      };
+    }
+    else if (type === '23') {
+      let seriesAll = [];
+      seriesAll.push({
+        type: 'bar',
+        barWidth: '10px',
+        stack: 'total',
+        color: [new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+          offset: 0,
+          color: "#7AC1FF"
+        }, {
+          offset: 1,
+          color: colors[0]
+        }], false)],
+        label: {
+          show: false
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: dataX[0]
+      });
+      opt = {
+        backgroundColor: '#fff',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+        },
+        legend: {
+          icon: 'roundRect',
+          itemWidth: 10,
+          itemHeight: 6,
+          selectedMode: true,
+          textStyle: {
+            fontSize: '10px',
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            color: '#666'
+          },
+          data: dataDim
+        },
+        grid: {
+          top: '10%',
+          left: '2%',
+          bottom: '1%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          position: 'top',
+          axisLine: { show: false },
+          axisTick: { show: false },
+          axisLabel: {
+            textStyle: {
+              fontSize: '10',
+              fontFamily: 'Microsoft YaHei',
+              fontWeight: '400',
+              color: '#999999',
+            },
+            interval: 0,
+            formatter: function (value) {
+              if (value >= 1000) {
+                return value / 1000 + 'k';
+              } else {
+                return value;
+              }
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#f6f6f6'
+            }
+          },
+        },
+        yAxis: {
+          type: 'category',
+          axisTick: { show: false },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#666666',
+            },
+          },
+          axisLabel: {
+            fontSize: '10px',
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            color: '#666666',
+            textAlign: 'left',
+            interval: 0,
+            formatter: function (value) {
+              let result = '';
+              let lineCount = 0;
+              for (let i = 0; i < value.length; i += 2) {
+                if (lineCount < 2) {
+                  if (value.length <= 2) {
+                    result = value
+                  } else {
+                    result += value.slice(i, i + 2) + '\n';
+                  }
+                }
+                lineCount++;
+              }
+              return result;
+            }
+
+          },
+          data: dataY
+        },
+        series: seriesAll
+      };
+    }
+    else if (type === '24') {
+      let series = []
+      const transData = transpose(dataX)
+      for (let i = 0; i < transData.length; i++) {
+        series.push({
+          name: dataDim[i],
+          type: 'bar',
+          data: transData[i],
+          itemStyle: {
+            color: colors[i]
+          }
+        })
+      }
+      opt = {
+        backgroundColor: '#fff',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '2%',
+          bottom: '1%',
+          containLabel: true
+        },
+        legend: {
+          icon: 'roundRect',
+          itemWidth: 10,
+          itemHeight: 6,
+          selectedMode: true,
+          textStyle: {
+            fontSize: '10px',
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            color: '#666'
+          }
+        },
+        xAxis: [{
+          axisLabel: {
+            textStyle: {
+              fontSize: '10px',
+              fontFamily: 'Microsoft YaHei',
+              fontWeight: '400',
+              color: '#999'
+            },
+            formatter: function (value) {
+              if (value >= 1000) {
+                return value / 1000 + 'k';
+              } else {
+                return value;
+              }
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#f6f6f6'
+            }
+          },
+          axisLine: { show: false },
+          axisTick: { show: false }
+        }],
+        yAxis: [{
+          type: 'category',
+          data: dataY,
+          axisLine: {
+            lineStyle: {
+              color: '#f6f6f6'
+            }
+          },
+          axisLabel: {
+            fontFamily: 'Microsoft YaHei',
+            color: '#666',
+            fontSize: '10px',
+            fontWeight: '400',
+            interval: 0,
+            formatter: function (value) {
+              let result = '';
+              let lineCount = 0;
+              for (let i = 0; i < value.length; i += 2) {
+                if (lineCount < 2) {
+                  if (value.length <= 2) {
+                    result = value
+                  } else {
+                    result += value.slice(i, i + 2) + '\n';
+                  }
+                }
+                lineCount++;
+              }
+              return result;
+            }
+          },
+          axisTick: { show: false }
+        }],
+        series: series
+      };
+    }
+    else if (type === '25') {
+      let seriesAll = [];
+      const transData = transpose(dataX);
+      for (let i = 0; i < transData.length; i++) {
+        seriesAll.push({
+          name: dataDim[i],
+          type: 'bar',
+          barWidth: '10px',
+          stack: 'total',
+          color: colors[i],
+          label: {
+            show: false
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          data: transData[i]
+        });
+      }
+      opt = {
+        backgroundColor: '#fff',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+        },
+        legend: {
+          icon: 'roundRect',
+          itemWidth: 10,
+          itemHeight: 6,
+          selectedMode: true,
+          textStyle: {
+            fontSize: '10px',
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            color: '#666'
+          },
+          data: dataDim
+        },
+        grid: {
+          top: '10%',
+          left: '2%',
+          bottom: '1%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          position: 'top',
+          axisLine: { show: false },
+          axisTick: { show: false },
+          axisLabel: {
+            textStyle: {
+              fontSize: '10',
+              fontFamily: 'Microsoft YaHei',
+              fontWeight: '400',
+              color: '#999999',
+            },
+            interval: 0,
+            formatter: function (value) {
+              if (value >= 1000) {
+                return value / 1000 + 'k';
+              } else {
+                return value;
+              }
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#f6f6f6'
+            }
+          },
+        },
+        yAxis: {
+          type: 'category',
+          axisTick: { show: false },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#666666',
+            },
+          },
+          axisLabel: {
+            fontSize: '10px',
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            color: '#666666',
+            textAlign: 'left',
+            interval: 0,
+            formatter: function (value) {
+              let result = '';
+              let lineCount = 0;
+              for (let i = 0; i < value.length; i += 2) {
+                if (lineCount < 2) {
+                  if (value.length <= 2) {
+                    result = value
+                  } else {
+                    result += value.slice(i, i + 2) + '\n';
+                  }
+                }
+                lineCount++;
+              }
+              return result;
+            }
+
+          },
+          data: dataY
+        },
+        series: seriesAll
+      };
+    }
+    else if (type === '26') {
+      opt = {
+        backgroundColor: '#fff',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+        },
+        legend: {
+          icon: 'roundRect',
+          itemWidth: 10,
+          itemHeight: 6,
+          selectedMode: true,
+          textStyle: {
+            fontSize: '10px',
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            color: '#666'
+          },
+          data: dataDim
+        },
+        grid: {
+          top: '10%',
+          left: '2%',
+          bottom: '1%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          position: 'top',
+          axisLine: { show: false },
+          axisTick: { show: false },
+          axisLabel: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'category',
+          axisTick: { show: false },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: '10px',
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            color: '#666666',
+            textAlign: 'left',
+            interval: 0,
+          },
+          data: dataY
+        },
+        series: [{
+          type: 'bar',
+          barWidth: '10px',
+          color: [new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+            offset: 0,
+            color: "#7AC1FF"
+          }, {
+            offset: 1,
+            color: colors[0]
+          }], false)],
+          label: {
+            show: true,
+            position: 'right',
+            fontFamily: 'Microsoft YaHei',
+            fontSize: '12px',
+            formatter: function (params) {
+              return new Intl.NumberFormat().format(params.value);
+            }
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          data: dataX[0]
+        }]
+      };
+    }
+  }
+  else if (type === '30' || type === '31' || type === '32' || type === '33' || type === '34' || type === '35' || type === '36' || type === '37') {
+    if (type === '30') {
+      let newArry = [];
+      for (let i = 0; i < dataY.length; i++) {
+        newArry.push({
+          'name': dataX[i],
+          'value': dataY[i],
+        });
+      }
+      opt = {
+        backgroundColor: '#fff',
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}:<br/> {d}%<br/>{c}'
+        },
+        legend: {
+          icon: 'circle',
+          itemWidth: 8,
+          itemHeight: 8,
+          type: "scroll",
+          orient: 'vertical',
+          top: 'middle',
+          right: '10%',
+          align: 'auto',
+          itemGap: 12,
+          selectedMode: true,
+          formatter: function (name) {
+            let data = newArry;
+            let total = 0;
+            let tarValue;
+            for (let i = 0, l = data.length; i < l; i++) {
+              total += data[i].value;
+              if (data[i].name === name) {
+                tarValue = data[i].value;
+              }
+            }
+            let p;
+            if (total === 0) {
+              p = 0
+            } else {
+              p = (accMul(accDiv(tarValue, total), 100)).toFixed(2)
+            }
+            var showName = name.length > 5 ? name.substr(0, 5) + '...' : name
+            var showValue = tarValue.length > 6 ? tarValue.substr(0, 6) + '...' : tarValue
+            return '{a|' + showName + '}' + '{b|' + p + '%}' + '{c|' + showValue + '}'
+          },
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 10,
+                color: '#333333',
+                fontFamily: 'Microsoft YaHei',
+                fontWeight: 400,
+                width: 65,
+              },
+              b: {
+                fontSize: 10,
+                color: '#999999',
+                fontFamily: 'Microsoft YaHei',
+                fontWeight: 400,
+                width: 60
+              },
+              c: {
+                fontSize: 13,
+                color: '#333333',
+                fontFamily: "BAHNSCHRIFT",
+                fontWeight: "bold",
+              }
+            }
+          },
+          tooltip: {
+            show: true,
+            trigger: 'item',
+            formatter: function (item) {
+              let data = newArry;
+              let total = 0;
+              let tarValue;
+              for (let i = 0, l = data.length; i < l; i++) {
+                total += data[i].value;
+                if (data[i].name === item.name) {
+                  tarValue = data[i].value;
+                }
+              }
+              let p;
+              if (total === 0) {
+                p = 0
+              } else {
+                p = (accMul(accDiv(tarValue, total), 100)).toFixed(2)
+              }
+              return item.name + ':<br/>' + p + '%' + '<br/>' + tarValue
+            },
+          },
+        },
+        color: colors,
+        series: [
+          {
+            type: 'pie',
+            center: ['23%', '50%'],
+            radius: '60%',
+            data: newArry,
+            labelLine: {
+              show: false
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+          }
+        ]
+      };
+    }
+    else if (type === '31') {
+      let datas = [];
+      let colorList = [];
+
+      // 将 dataY 转换为带索引的排序数组
+      let sortedIndices = dataY.map((_, index) => index)
+        .sort((a, b) => dataY[b] - dataY[a]); // 根据 dataX 的值降序排列
+
+      for (let i = 0; i < sortedIndices.length; i++) {
+        const index = sortedIndices[i];
+        colorList.push(colors[(i + 1) % colors.length]);
+        datas.push({
+          value: dataY[index],
+          name: dataX[index], // 获取对应的 dataX 值
+        });
+      }
+
+      opt = {
+        backgroundColor: '#fff',
+        color: colorList,
+        legend: {
+          icon: 'circle',
+          itemWidth: 8,
+          itemHeight: 8,
+          type: "scroll",
+          orient: 'horizontal',
+          bottom: "10%",
+          align: 'auto',
+          itemGap: 12,
+          selectedMode: true,
+          formatter: function (name) {
+            if (name !== null && name !== "" && name !== "__other") {
+              let total = 0;
+              let tarValue;
+              for (let i = 0, l = dataX.length; i < l; i++) {
+                total += dataY[i];
+                if (dataX[i] === name) {
+                  tarValue = dataY[i];
+                }
+              }
+              let p;
+              if (total === 0) {
+                p = 0
+              } else {
+                p = (accMul(accDiv(tarValue, total), 100)).toFixed(2);
+              }
+              return '{a|' + name + '}' + "\n" + '{b|' + p + '%}'
+            }
+          },
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 10,
+                color: '#333333',
+                fontFamily: 'Microsoft YaHei',
+                fontWeight: 400,
+                width: 90
+              },
+              b: {
+                fontSize: 13,
+                color: '#333333',
+                fontFamily: "BAHNSCHRIFT",
+                fontWeight: "bold",
+              }
+            }
+          }
+        },
+        series: [{
+          type: 'pie',
+          radius: ['0%', '60%'],
+          avoidLabelOverlap: false,
+          startAngle: 90,
+          center: ['50%', '40%'],
+          itemStyle: {
+            normal: {
+              borderWidth: 0,
+              borderColor: '#FFFFFF',
+            }
+          },
+          data: datas
+        }]
+      };
+    }
+    else if (type === '32') {
+      let total = 0;
+      let datas = [];
+      let colorList = [];
+      let radius = ['40%', '60%']; // 控制饼块粗细的半径范围
+      let prevAngle = 0; // 初始角度
+      let sortedIndices = dataY.map((_, index) => index)
+        .sort((a, b) => dataY[b] - dataY[a]); // 根据dataY的值进行降序排序并获取索引
+
+      for (let i = 0; i < sortedIndices.length; i++) {
+        const index = sortedIndices[i];
+        colorList.push(colors[(i + 1) % colors.length]);
+        total += dataY[index]; // 使用排序后的数据
+        datas.push({
+          value: dataY[index], // 使用排序后的数据
+          name: dataX[index], // 获取对应的dataY值
+        });
+      }
+
+      opt = {
+        backgroundColor: '#fff',
+        color: colorList,
+        graphic: [], // 用于存放Graphic组件配置项
+
+        legend: {
+          icon: 'circle',
+          itemWidth: 8,
+          itemHeight: 8,
+          type: "scroll",
+          orient: 'horizontal',
+          bottom: "10%",
+          align: 'auto',
+          itemGap: 12,
+          selectedMode: true,
+          formatter: function (name) {
+            if (name !== null && name !== "" && name !== "__other") {
+              let total = 0;
+              let tarValue;
+              for (let i = 0, l = dataX.length; i < l; i++) {
+                total += dataY[i];
+                if (dataX[i] === name) {
+                  tarValue = dataY[i];
+                }
+              }
+              let p;
+              if (total === 0) {
+                p = 0
+              } else {
+                p = (accMul(accDiv(tarValue, total), 100)).toFixed(2);
+              }
+              return '{a|' + name + '}' + "\n" + '{b|' + p + '%}'
+            }
+          },
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 10,
+                color: '#333333',
+                fontFamily: 'Microsoft YaHei',
+                fontWeight: 400,
+                width: 90
+              },
+              b: {
+                fontSize: 13,
+                color: '#333333',
+                fontFamily: "BAHNSCHRIFT",
+                fontWeight: "bold",
+              }
+            }
+          }
+        },
+        series: [{
+          type: 'pie',
+          radius: ['0%', '60%'],
+          roseType: 'radius',
+          avoidLabelOverlap: false,
+          startAngle: 90,
+          center: ['50%', '40%'],
+          itemStyle: {
+            normal: {
+              borderWidth: 0,
+              borderColor: '#FFFFFF',
+            }
+          },
+          data: datas
+        }]
+      };
+
+      // 动态生成Graphic组件配置项
+      for (let i = 0; i < datas.length; i++) {
+        let startAngle = prevAngle;
+        let endAngle = startAngle + (datas[i].value / total) * 2 * Math.PI;
+        opt.graphic.push({
+          type: 'sector',
+          shape: {
+            cx: '50%', // 饼图中心位置 x 坐标
+            cy: '40%', // 饼图中心位置 y 坐标
+            r: radius, // 饼块半径
+            startAngle: startAngle,
+            endAngle: endAngle
+          },
+          style: {
+            fill: colors[(i + 1) % colors.length]
+          }
+        });
+        prevAngle = endAngle;
+      }
+    }
+    else if (type === '33') {
+      let data = []
+      let sum = 0
+      for (let i = 0; i < dataY.length; i++) {
+        data.push({
+          name: dataX[i],
+          value: dataY[i]
+        })
+        sum += dataY[i]
+      }
+
+      opt = {
+        backgroundColor: '#fff',
+        title: {
+          text: formatTitle(dataDim[0]),
+          textAlign: 'center',
+          textStyle: {
+            fontSize: '10px',
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            color: '#999',
+            textAlign: 'center'
+          },
+          left: '25%',
+          top: 'center',
+        },
+        tooltip: {
+          trigger: 'item',
+          borderWidth: 1,
+          padding: 5,
+          formatter: '{b}: <br/>{d}%<br/>{c}'
+        },
+        legend: {
+          icon: 'circle',
+          itemWidth: 8,
+          itemHeight: 8,
+          type: "scroll",
+          orient: 'vertical',
+          top: 'middle',
+          right: '10%',
+          align: 'auto',
+          itemGap: 12,
+          selectedMode: true,
+          formatter: function (name) {
+            for (let i = 0; i < dataX.length; i++) {
+              let p;
+              if (sum === 0) {
+                p = 0
+              } else {
+                p = (accMul(accDiv(dataY[i], sum), 100)).toFixed(2)
+              }
+              if (dataX[i] === name) {
+                var tarValue = dataY[i]
+                var showName = name.length > 5 ? name.substr(0, 5) + '...' : name
+                var showValue = tarValue.length > 6 ? tarValue.substr(0, 6) + '...' : tarValue
+                return '{a|' + showName + '}' + '{b|' + p + '%}' + '{c|' + showValue + '}'
+              }
+            }
+          },
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 10,
+                color: '#333333',
+                fontFamily: 'Microsoft YaHei',
+                fontWeight: 400,
+                width: 65,
+              },
+              b: {
+                fontSize: 10,
+                color: '#999999',
+                fontFamily: 'Microsoft YaHei',
+                fontWeight: 400,
+                width: 60
+              },
+              c: {
+                fontSize: 13,
+                color: '#333333',
+                fontFamily: "BAHNSCHRIFT",
+                fontWeight: "bold",
+              }
+            }
+          },
+          tooltip: {
+            show: true,
+            trigger: 'item',
+            formatter: function (item) {
+              for (let i = 0; i < dataX.length; i++) {
+                let p;
+                if (sum === 0) {
+                  p = 0
+                } else {
+                  p = (accMul(accDiv(dataY[i], sum), 100)).toFixed(2)
+                }
+                if (dataX[i] === item.name) {
+                  return item.name + ':<br/>' + p + '%' + '<br/>' + dataY[i]
+                }
+              }
+            },
+          }
+        },
+        series: [{
+          type: 'pie',
+          z: 3,
+          center: ['25%', '50%'],
+          radius: ['60', '75'],
+          clockwise: true,
+          avoidLabelOverlap: true,
+          hoverOffset: 15,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colors[params.dataIndex]
+              }
+            }
+          },
+          label: {
+            show: false
+          },
+          data: data
+        }]
+      }
+    }
+    else if (type === '34') {
+      let newArry = [];
+      for (let i = 0; i < dataY.length; i++) {
+        newArry.push({
+          'name': dataX[i],
+          'value': dataY[i],
+        });
+      }
+      opt = {
+        backgroundColor: '#fff',
+        title: {
+          text: formatTitle(dataDim[0]),
+          textAlign: 'center',
+          textStyle: {
+            fontSize: '10px',
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            color: '#999',
+            textAlign: 'center'
+          },
+          left: '23%',
+          top: 'center',
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}:<br/> {d}%<br/>{c}'
+        },
+        legend: {
+          icon: 'circle',
+          itemWidth: 8,
+          itemHeight: 8,
+          type: "scroll",
+          orient: 'vertical',
+          top: 'middle',
+          right: '10%',
+          align: 'auto',
+          itemGap: 12,
+          selectedMode: true,
+          formatter: function (name) {
+            let data = newArry;
+            let total = 0;
+            let tarValue;
+            for (let i = 0, l = data.length; i < l; i++) {
+              total += data[i].value;
+              if (data[i].name === name) {
+                tarValue = data[i].value;
+              }
+            }
+            let p;
+            if (total === 0) {
+              p = 0
+            } else {
+              p = (accMul(accDiv(tarValue, total), 100)).toFixed(2)
+            }
+            var showName = name.length > 5 ? name.substr(0, 5) + '...' : name
+            var showValue = tarValue.length > 6 ? tarValue.substr(0, 6) + '...' : tarValue
+            return '{a|' + showName + '}' + '{b|' + p + '%}' + '{c|' + showValue + '}'
+          },
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 10,
+                color: '#333333',
+                fontFamily: 'Microsoft YaHei',
+                fontWeight: 400,
+                width: 65,
+              },
+              b: {
+                fontSize: 10,
+                color: '#999999',
+                fontFamily: 'Microsoft YaHei',
+                fontWeight: 400,
+                width: 60
+              },
+              c: {
+                fontSize: 13,
+                color: '#333333',
+                fontFamily: "BAHNSCHRIFT",
+                fontWeight: "bold",
+              }
+            }
+          },
+          tooltip: {
+            show: true,
+            trigger: 'item',
+            formatter: function (item) {
+              let data = newArry;
+              let total = 0;
+              let tarValue;
+              for (let i = 0, l = data.length; i < l; i++) {
+                total += data[i].value;
+                if (data[i].name === item.name) {
+                  tarValue = data[i].value;
+                }
+              }
+              let p;
+              if (total === 0) {
+                p = 0
+              } else {
+                p = (accMul(accDiv(tarValue, total), 100)).toFixed(2)
+              }
+              return item.name + ':<br/>' + p + '%' + '<br/>' + tarValue
+            },
+          },
+        },
+        color: colors,
+        series: [{
+          type: 'pie',
+          roseType: 'area',
+          center: ['23%', '50%'],
+          radius: ['75', '95'],
+          clockwise: true,
+          avoidLabelOverlap: true,
+          label: {
+            show: false,
+            position: 'center'
+          },
+          emphasis: {
+            label: {
+              show: false,
+            }
+          },
+          labelLine: {
+            show: false
+          },
+          data: newArry
+        }]
+      }
+    }
+    else if (type === '35') {
+      let total = 0;
+      let datas = [];
+      let colorList = [];
+      for (let i = 0; i < dataY.length; i++) {
+        colorList.push(colors[(i + 1) % colors.length]);
+        total += dataY[i];
+        var showName = dataX[i].length > 5 ? dataX[i].substr(0, 5) + '...' : dataX[i]
+        datas.push({
+          value: dataY[i],
+          name: showName,
+        })
+      }
+      colorList.push('transparent');
+      datas.push({
+        value: total,
+        name: "__other",
+        label: { show: false },
+        labelLine: { show: false },
+        itemStyle: {
+          normal: {
+            borderWidth: 0,
+            shadowBlur: 0,
+            borderColor: 'transparent',
+            shadowColor: 'transparent'
+          }
+        },
+      })
+      opt = {
+        backgroundColor: '#fff',
+        color: colorList,
+        legend: {
+          icon: 'circle',
+          itemWidth: 8,
+          itemHeight: 8,
+          type: "scroll",
+          orient: 'horizontal',
+          bottom: "10%",
+          align: 'auto',
+          itemGap: 12,
+          selectedMode: true,
+          formatter: function (name) {
+            if (name !== null && name !== "" && name !== "__other") {
+              let total = 0;
+              let tarValue;
+              for (let i = 0, l = dataY.length; i < l; i++) {
+                total += dataY[i];
+                var showName = dataX[i].length > 5 ? dataX[i].substr(0, 5) + '...' : dataX[i]
+
+                if (showName === name) {
+                  tarValue = dataY[i];
+                }
+              }
+              let p;
+              if (total === 0) {
+                p = 0
+              } else {
+                p = (accMul(accDiv(tarValue, total), 100)).toFixed(2);
+              }
+              return '{a|' + name + '}' + "\n" + '{b|' + p + '%}'
+            }
+          },
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 10,
+                color: '#333333',
+                fontFamily: 'Microsoft YaHei',
+                fontWeight: 400,
+                width: 90
+              },
+              b: {
+                fontSize: 13,
+                color: '#333333',
+                fontFamily: "BAHNSCHRIFT",
+                fontWeight: "bold",
+              }
+            }
+          }
+        },
+        series: [{
+          type: 'pie',
+          radius: ['40%', '70%'],
+          avoidLabelOverlap: false,
+          startAngle: 180,
+          center: ['50%', '50%'],
+          itemStyle: {
+            normal: {
+              borderWidth: 0,
+              borderColor: '#FFFFFF',
+            }
+          },
+          data: datas
+        }]
+      }
+    }
+    else if (type === '36') {
+      let sum = dataY.reduce((a, b) => a + b);
+      let pieSeries = [];
+      let showBackground = false;//是否显示圆环条形背景，true显示，false不显示
+      let barOut = 65, barIn = 62, barBroad = 4;//控制圆环条宽度  barOut - barIn = 圆环条宽度，barBroad - 圆环条宽度 = 圆环条间距
+      if (dataY.length <= 7) {//根据数据量选择合适的宽度，7条及以下数据将放宽圆环条
+        barOut = 65;
+        barIn = 58;
+        barBroad = 8;
+      } else if (dataY.length >= 14) {
+        barOut = 65;
+        barIn = 63;
+        barBroad = 3;
+      }
+      dataX.map((name, index) => {
+        pieSeries.push({
+          left: 20,
+          name: name,
+          type: 'pie',
+          clockWise: false,
+          hoverAnimation: false,
+          radius: [barOut - index * barBroad + '%', barIn - index * barBroad + '%'],
+          center: ["30%", "50%"],
+          label: {
+            show: false
+          },
+          data: [{
+            value: dataY[index] * dataX.length,
+            name: name
+          },
+          {
+            value: sum - dataY[index],
+            name: name,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)"
+              }
+            },
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              },
+              emphasis: {
+                show: false
+              }
+            },
+            tooltip: {
+              show: false,
+              formatter: function () {
+                return '';
+              }
+            }
+          }
+          ]
+        });
+        if (showBackground === true) {
+          pieSeries.push({
+            left: 10,
+            name: '',
+            type: 'pie',
+            silent: true,
+            z: 1,
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            radius: [barOut - index * barBroad + '%', barIn - index * barBroad + '%'],
+            center: ["30%", "50%"],
+            label: {
+              show: false
+            },
+            data: [{
+              value: 5,
+              itemStyle: {
+                color: "#E3F0FF"
+              }
+            },
+            ]
+          });
+        }
+      })
+
+      opt = {
+        backgroundColor: '#fff',
+        color: colors,
+        grid: {
+          top: '15%',
+          bottom: '54%',
+          left: "30%",
+          containLabel: false
+        },
+        legend: {
+          icon: 'circle',
+          itemWidth: 8,
+          itemHeight: 8,
+          type: "scroll",
+          orient: 'vertical',
+          top: 'middle',
+          right: '10%',
+          align: 'auto',
+          itemGap: 12,
+          selectedMode: false,
+          formatter: function (name) {
+            let total = 0;
+            let tarValue;
+            for (let i = 0, l = dataY.length; i < l; i++) {
+              total += dataY[i];
+              if (dataX[i] === name) {
+                tarValue = dataY[i];
+              }
+            }
+            let p;
+            if (total === 0) {
+              p = 0
+            } else {
+              p = (accMul(accDiv(tarValue, total), 100)).toFixed(2);
+            }
+            var showName = name.length > 5 ? name.substr(0, 5) + '...' : name
+            return '{a|' + showName + '}' + '{b|' + p + '%}'
+          },
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 10,
+                color: '#333333',
+                fontFamily: 'Microsoft YaHei',
+                fontWeight: 400,
+                width: 90
+              },
+              b: {
+                fontSize: 13,
+                color: '#333333',
+                fontFamily: "BAHNSCHRIFT",
+                fontWeight: "bold",
+              }
+            }
+          }
+        },
+        series: pieSeries
+      };
+    }
+    else if (type === '37') {
+      let sum = dataY.reduce((a, b) => a + b);
+      let pieSeries = [];
+      let showBackground = true;//是否显示圆环条形背景，true显示，false不显示
+      let barOut = 85, barIn = 82, barBroad = 4;//控制圆环条宽度  barOut - barIn = 圆环条宽度，barBroad - 圆环条宽度 = 圆环条间距
+      if (dataY.length <= 7) {//根据数据量选择合适的宽度，7条及以下数据将放宽圆环条
+        barOut = 85;
+        barIn = 78;
+        barBroad = 8;
+      } else if (dataY.length >= 14) {
+        barOut = 85;
+        barIn = 83;
+        barBroad = 3;
+      }
+      dataX.map((name, index) => {
+        pieSeries.push({
+          left: "25%",
+          name: name,
+          type: 'pie',
+          clockWise: true,//顺时针？
+          startAngle: 180,
+          hoverAnimation: false,
+          radius: [barOut - index * barBroad + '%', barIn - index * barBroad + '%'],
+          center: ["30%", "50%"],
+          label: {
+            show: false
+          },
+          data: [{
+            value: dataY[index],
+            name: name
+          },
+          {
+            value: sum,
+            name: name,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)"
+              }
+            },
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              },
+              emphasis: {
+                show: false
+              }
+            },
+            tooltip: {
+              show: false,
+              formatter: function () {
+                return '';
+              }
+            }
+          }
+          ]
+        });
+        if (showBackground == true) {
+          pieSeries.push({
+            left: "25%",
+            name: name,
+            type: 'pie',
+            silent: true,
+            z: 1,
+            clockWise: true, //顺时加载
+            startAngle: 180,
+            hoverAnimation: false, //鼠标移入变大
+            radius: [barOut - index * barBroad + '%', barIn - index * barBroad + '%'],
+            center: ["30%", "50%"],
+            label: {
+              show: false
+            },
+            data: [{
+              value: 5,
+              name: name,
+              itemStyle: {
+                color: "#E3F0FF"
+              },
+            },
+            {
+              value: 5,
+              name: name,
+              itemStyle: {
+                normal: {
+                  color: "rgba(0,0,0,0)"
+                }
+              },
+              label: {
+                normal: {
+                  show: false,
+                },
+                emphasis: {
+                  show: false
+                }
+              },
+              labelLine: {
+                normal: {
+                  show: false
+                },
+                emphasis: {
+                  show: false
+                }
+              },
+              tooltip: {
+                show: false,
+                formatter: function () {
+                  return '';
+                }
+              }
+            }
+            ]
+          });
+        }
+      })
+
+      opt = {
+        backgroundColor: '#fff',
+        color: colors,
+        grid: {
+          top: '15%',
+          bottom: '54%',
+          left: "30%",
+          containLabel: false
+        },
+        legend: {
+          icon: 'circle',
+          itemWidth: 8,
+          itemHeight: 8,
+          type: "scroll",
+          orient: 'horizontal',
+          bottom: "10%",
+          align: 'auto',
+          itemGap: 12,
+          selectedMode: false,
+          formatter: function (name) {
+            if (name !== null && name !== "" && name !== "__other") {
+              let total = 0;
+              let tarValue;
+              for (let i = 0, l = dataY.length; i < l; i++) {
+                total += dataY[i];
+                if (dataX[i] === name) {
+                  tarValue = dataY[i];
+                }
+              }
+              let p;
+              if (total === 0) {
+                p = 0
+              } else {
+                p = (accMul(accDiv(tarValue, total), 100)).toFixed(2);
+              }
+              return '{a|' + name + '}\n' + '{b|' + p + '%}\n' + '{c|' + tarValue + '}'
+            }
+          },
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 10,
+                color: '#333333',
+                fontFamily: 'Microsoft YaHei',
+                fontWeight: 400,
+                width: 90,
+              },
+              b: {
+                fontSize: 10,
+                color: '#999999',
+                fontFamily: 'Microsoft YaHei',
+                fontWeight: 400,
+                width: 50,
+                lineHeight: 12
+              },
+              c: {
+                fontSize: 13,
+                color: '#333333',
+                fontFamily: "BAHNSCHRIFT",
+                fontWeight: "bold",
+              }
+            }
+          }
+
+        },
+        series: pieSeries
+      };
+    }
+  }
+  else if (type === '40' || type === '41' || type === '42' || type === '43') {
+    if (type === '40') {
+      const sortedDataX = dataY.slice().sort((a, b) => a - b);
+      let total = dataY.reduce((a, b) => a + b);
+      opt = {
+        backgroundColor: '#fff',
+        color: colors,
+        legend: {
+          type: 'scroll',
+          orient: 'horizontal',
+          left: 'center',
+          bottom: "10%",
+          selectedMode: true,
+          data: dataX.map((name, index) => {
+            const value = dataY[index];
+            let p;
+            if (total === 0) {
+              p = 0
+            } else {
+              p = (accMul(accDiv(value, total), 100)).toFixed(2)
+            }
+            const ratio = total !== 0 ? p + '%' : '0%';
+            const ratioString = ratio.toString();
+            const res = name + "\n" + ratioString;
+            return {
+              name: res,
+            };
+          })
+        },
+        series: [
+          {
+            zlevel: 1,
+            name: '',
+            type: 'funnel',
+            left: '15%',
+            top: 25,
+            bottom: 90,
+            width: '50%',
+            height: '60%',
+            min: 0,
+            max: 300,
+            minSize: '0%',
+            maxSize: '100%',
+            sort: 'descending',
+            gap: -1,
+            smooth: true, // 设置平滑边
+            label: {
+              show: true,
+              position: 'right',
+              width: '200px',
+              align: 'right',
+              formatter: function (params) {
+                return params.data.showname;
+              }
+            },
+            labelLine: {
+              length: 10,
+              lineStyle: {
+                width: 1,
+                type: 'solid'
+              }
+            },
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 1
+            },
+            emphasis: {
+              label: {
+                fontSize: 20
+              }
+            },
+            data: dataY.map((value, index) => {
+              const rank = sortedDataX.indexOf(value) + 1;
+              let p;
+              if (dataY.reduce((a, b) => a + b) === 0) {
+                p = 0
+              } else {
+                p = (accMul(accDiv(value, dataY.reduce((a, b) => a + b)), 100)).toFixed(2)
+              }
+              let d;
+              if (dataY.reduce((a, b) => a + b)) {
+                d = 0
+              } else {
+                d = (accMul(accDiv(value, dataY.reduce((a, b) => a + b)), 100)).toFixed(2)
+              }
+              return {
+                value: rank * 60,
+                name: dataX[index] + "\n" + p + '%',
+                showname: dataX[index],
+                reaVal: d + '%'
+              }
+            })
+          },
+        ]
+      };
+    }
+    else if (type === '41') {
+      let formatUtil = echarts.format
+      opt = {
+        backgroundColor: '#fff',
+        title: { text: "" },
+        legend: {
+          orient: 'horizontal',
+          left: 'center',
+          bottom: 10,
+          selectedMode: true,
+          data: dataX
+        },
+        tooltip: {
+          formatter: function (info) {
+            let value = info.value;
+            let treePathInfo = info.treePathInfo;
+            let treePath = [];
+
+            for (let i = 1; i < treePathInfo.length; i++) {
+              treePath.push(treePathInfo[i].name);
+            }
+            return [
+              '<div class="tooltip-title">' + formatUtil.encodeHTML(treePath.join('')) + '</div>',
+              '占比: ' + formatUtil.addCommas(value) + ' %',
+            ].join('');
+          }
+        },
+        series: [{
+          type: 'treemap',
+          roam: false,
+          nodeClick: false,
+          width: 250,
+          height: 180,
+          breadcrumb: {
+            show: false
+          },
+          label: {
+            show: true,
+            fontSize: 14
+          },
+          itemStyle: {
+            normal: {
+              borderColor: '#fff'
+            }
+          },
+          levels: getLevelOption(),
+          data: generateTestData(dataX, dataY)
+        }]
+      }
+    }
+    else if (type === '42') {
+      let data = []
+      let links = []
+      for (let i = 0; i < dataX.length; i++) {
+        data.push({
+          name: dataX[i],
+          itemStyle: {
+            color: colors[i]
+          }
+        })
+      }
+      for (let i = 0; i < dataY.length; i++) {
+        links.push({
+          source: dataY[i][0],
+          target: dataY[i][1],
+          value: dataY[i][2],
+        })
+      }
+      opt = {
+        backgroundColor: '#fff',
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            type: 'sankey',
+            emphasis: {
+              focus: 'trajectory',
+            },
+            data: data,
+            links: links,
+          },
+        ]
+      }
+    } else if (type === '43') {
+      let newArry = [];
+      let dataX_new = dataX[0];
+      let dataY_new = dataY;
+      for (let i = 0; i < dataX_new.length; i++) {
+        newArry.push({
+          'name': dataY_new[i],
+          'value': dataX_new[i],
+        });
+      }
+      let barOut = 65, barIn = 62, barBroad = 4;//控制圆环条宽度  barOut - barIn = 圆环条宽度，barBroad - 圆环条宽度 = 圆环条间距
+      if (dataY.length <= 7) {//根据数据量选择合适的宽度，7条及以下数据将放宽圆环条
+        barOut = 65;
+        barIn = 58;
+        barBroad = 8;
+      } else if (dataY.length >= 14) {
+        barOut = 65;
+        barIn = 63;
+        barBroad = 3;
+      }
+      let series = []
+      for (let index = 0; index < dataY.length; index++) {
+        series.push({
+          type: 'gauge',
+          center: ['50%', '50%'],
+          radius: (barOut + barIn) / 2 - index * barBroad + '%',
+          startAngle: 225,
+          endAngle: -45,
+          clockwise: true,
+          min: 0,
+          max: 100,
+          data: [newArry[index]],
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          pointer: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          axisLine: {
+            roundCap: true,
+            lineStyle: {
+              width: (barOut - barIn)
+            }
+          },
+          title: {
+            show: false,
+            offsetCenter: [0, 0],
+            fontFamily: 'Microsoft YaHei',
+          },
+          progress: {
+            show: true,
+            roundCap: true,
+            width: (barOut - barIn)
+          },
+          detail: {
+            show: false,
+            formatter: "{value}%",
+            fontFamily: 'Microsoft YaHei',
+          }
+        })
+      }
+      opt = {
+        backgroundColor: '#fff',
+        tooltip: {
+          trigger: 'item',
+          // formatter: '{b}:<br/> {d}%<br/>{c}'
+
+        },
+        color: colors,
+        series: series
+      };
+    }
+  }
+  return opt
+}
+
+// 二维数组转置
+function transpose(matrix) {
+  return matrix[0].map((_, colIndex) => matrix.map(row => row[colIndex]));
+}
+
+// 十六进制颜色转RGBA
+const hexToRgba = (hex, opacity) => {
+  const bigint = parseInt(hex.slice(1), 16);
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};