gx

src/view/echarts_education/pie5.vue

@@ -20,11 +20,18 @@ const chart = ref(); // 创建DOM引用
 const data = reactive({
   list: [[], []],
   list1: [],
+  list2: [],
+  Max: null,
   option: {},
   initialLegendData: ["县镇", "农村"],
   initialLegendData1: ["副高级", "正高级", "未定级", "员级", "中级", "助理级"],
 });
 
+// data.list(...data.list)
+// const newData2 = data.list.map((item) => parseInt(item));
+// data.list1 = Math.max(...newData2) * 1.05;
+// const newMaxNumber = Math.max(...newData2) * 1.05;
+
 const getOption = () => {
   data.option = {
     tooltip: {
@@ -50,6 +57,14 @@ const getOption = () => {
     xAxis: [
       {
         type: "value",
+        max: data.Max,
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(226, 226, 226, 0.3)",
+            width: 1,
+          },
+        },
         axisLabel: {
           //坐标轴刻度标签的相关设置
           textStyle: {
@@ -61,9 +76,6 @@ const getOption = () => {
           //y轴线的颜色以及宽度
           show: false, // 取消x轴线
         },
-        splitLine: {
-          show: false, //---grid 区域中的分隔线
-        },
         axisTick: {
           show: false, // 设置轴刻度不显示
         },
@@ -82,6 +94,9 @@ const getOption = () => {
         axisTick: {
           show: false, // 设置轴刻度不显示
         },
+        splitLine: {
+          show: false, //---grid 区域中的分隔线
+        },
         axisLabel: {
           //坐标轴刻度标签的相关设置
           textStyle: {
@@ -91,7 +106,6 @@ const getOption = () => {
         },
         data: data.initialLegendData1,
       },
-   
     ],
     series: [
       {
@@ -100,8 +114,8 @@ const getOption = () => {
         barGap: "-50%",
         type: "bar",
         data: data.list[1],
-        barWidth: "25%", //柱宽
+        barWidth: "40%", //柱宽
-        barGap: 1 /*多个并排柱子设置柱子之间的间距*/,
+        barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
         label: {
           show: true,
           position: "inside",
@@ -111,16 +125,18 @@ const getOption = () => {
           },
         },
         itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          normal: {
-            {
+            color: function (params) {
-              offset: 0,
+              var colorList = [
-              color: "rgba(254, 255, 142, 1)",
+                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  { offset: 0, color: "rgba(255, 234, 90, 0)" },
+                  { offset: 0.5, color: "rgba(255, 234, 90, 0.5)" },
+                  { offset: 1, color: "rgba(255, 234, 90, 1)" },
+                ]),
+              ];
+              return colorList[params.dataIndex % colorList.length];
             },
-            {
+          },
-              offset: 1,
-              color: "rgba(251, 255, 142, 0.20)",
-            },
-          ]),
         },
       },
       {
@@ -129,8 +145,8 @@ const getOption = () => {
         type: "bar",
         barGap: "-50%",
         data: data.list[0],
-        barWidth: "25%", //柱宽
+        barWidth: "40%", //柱宽
-        barGap: 1 /*多个并排柱子设置柱子之间的间距*/,
+        barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
         label: {
           show: true,
           position: "inside",
@@ -140,16 +156,18 @@ const getOption = () => {
           },
         },
         itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          normal: {
-            {
+            color: function (params) {
-              offset: 0,
+              var colorList = [
-              color: "rgba(23, 255, 206, 1)",
+                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  { offset: 0, color: "rgba(0, 255, 208,0)" },
+                  { offset: 0.5, color: "rgba(0, 255, 208,0.5)" },
+                  { offset: 1, color: "rgba(0, 255, 208,1)" },
+                ]),
+              ];
+              return colorList[params.dataIndex % colorList.length];
             },
-            {
+          },
-              offset: 1,
-              color: "rgba(23, 255, 202, 0.20)",
-            },
-          ]),
         },
       },
     ],
@@ -162,20 +180,42 @@ const setChart = () => {
   myChart.setOption(data.option);
 };
 const setChart1 = () => {
-  data.list[0].push(data.list1.xzjszcsl.xzfgj); //县镇复高级数量
+  // data.list[0].push(data.list1.xzjszcsl.xzfgj); //县镇复高级数量
-  data.list[0].push(data.list1.xzjszcsl.xzzgj); //县镇正高级数量
+  // data.list[0].push(data.list1.xzjszcsl.xzzgj); //县镇正高级数量
-  data.list[0].push(data.list1.xzjszcsl.xzwdj); //县镇未定级数量
+  // data.list[0].push(data.list1.xzjszcsl.xzwdj); //县镇未定级数量
-  data.list[0].push(data.list1.xzjszcsl.xzyj); //县镇员级数量
+  // data.list[0].push(data.list1.xzjszcsl.xzyj); //县镇员级数量
-  data.list[0].push(data.list1.xzjszcsl.xzzj); //县镇中级数量
+  // data.list[0].push(data.list1.xzjszcsl.xzzj); //县镇中级数量
-  data.list[0].push(data.list1.xzjszcsl.xzzlj); //县镇助理级数量
+  // data.list[0].push(data.list1.xzjszcsl.xzzlj); //县镇助理级数量
-  data.list[1].push(data.list1.ncjszcsl.ncfgj); //农村正高级数量
+  // data.list[1].push(data.list1.ncjszcsl.ncfgj); //农村正高级数量
-  data.list[1].push(data.list1.ncjszcsl.nczgj); //农村正高级数量
+  // data.list[1].push(data.list1.ncjszcsl.nczgj); //农村正高级数量
-  data.list[1].push(data.list1.ncjszcsl.ncwdj); //农村中级数量
+  // data.list[1].push(data.list1.ncjszcsl.ncwdj); //农村中级数量
-  data.list[1].push(data.list1.ncjszcsl.nczlj); //农村助理级数量
+  // data.list[1].push(data.list1.ncjszcsl.nczlj); //农村助理级数量
-  data.list[1].push(data.list1.ncjszcsl.ncyj); //农村员级数量
+  // data.list[1].push(data.list1.ncjszcsl.ncyj); //农村员级数量
-  data.list[1].push(data.list1.ncjszcsl.ncwdj); //农村未定级数量
+  // data.list[1].push(data.list1.ncjszcsl.ncwdj); //农村未定级数量
 
-  console.log(data.list, "乡镇1");
+  const xzjszcsl = data.list1.xzjszcsl;
+  const ncjszcsl = data.list1.ncjszcsl;
+  const xzData = [
+    xzjszcsl.xzfgj,
+    xzjszcsl.xzzgj,
+    xzjszcsl.xzwdj,
+    xzjszcsl.xzyj,
+    xzjszcsl.xzzj,
+    xzjszcsl.xzzlj,
+  ];
+  const ncData = [
+    ncjszcsl.ncfgj,
+    ncjszcsl.nczgj,
+    ncjszcsl.ncwdj,
+    ncjszcsl.nczlj,
+    ncjszcsl.ncyj,
+    ncjszcsl.ncwdj,
+  ];
+  data.list[0].push(...xzData); // 县镇数据
+  data.list[1].push(...ncData); // 农村数据
+  data.list2 = [...data.list[0], ...data.list[1]];
+  let Max = Math.max(...data.list2);
+  data.Max = Math.ceil((Max * 1.2) / 100) * 100;
 };
 
 // 使用生命钩子