1

src/view/echart_analyze/right2.vue

@@ -10,7 +10,6 @@ import * as echarts from "echarts";
 const chart = ref(); // 创建DOM引用
 
 const colors = [
-
   {
     left: "rgba(234, 162, 57, .16)",
     right: "rgba(234, 162, 57, .6)",
@@ -32,11 +31,13 @@ const colors = [
     bottom: "rgba(60, 143, 255, .46)",
     front: "rgba(60, 143, 255, .66)",
   },
-
 ];
-const maxList = [90, 90, 90, 90, 90, 90, 90];
-const valueList = [20, 53, 47, 65, 29, 11, 50];
-
+const maxList = ref([]);
+const valueList = [20, 53, 47, 65, 29, 11, 10];
+const data = reactive({
+  option: {},
+  Max: 100,
+});
 // 注册5个面图形:左侧、前面、右面、上面、下面
 //c0:左下角，c1：右下角,c2:右上角，c3：左上角
 // 绘制左侧面-ok rgba(103, 180, 233, 0.04)
@@ -145,8 +146,8 @@ echarts.graphic.registerShape("CubeFront_1", CubeFront_1);
 echarts.graphic.registerShape("CubeRight_1", CubeRight_1);
 echarts.graphic.registerShape("CubeTop_1", CubeTop_1);
 echarts.graphic.registerShape("CubeBottom_1", CubeBottom_1);
-
-const option = {
+const getOption = () => {
+  data.option = {
     tooltip: {
       trigger: "axis",
       formatter: "{b0}:{c1}",
@@ -183,7 +184,6 @@ const option = {
           color: "#fff",
           fontSize: 16,
           formatter: function (value) {
-
             return value.length > 3 ? value.slice(0, 2) + "..." : value;
           },
         },
@@ -216,7 +216,8 @@ const option = {
     ],
     yAxis: {
       min: 0,
-    max: 100,
+      // max: 200,
+      max: data.Max,
       interval: 20,
       type: "value",
       axisLine: {
@@ -314,7 +315,7 @@ const option = {
             ],
           };
         },
-      data: maxList,
+        data: maxList.value,
       },
       {
         type: "custom",
@@ -422,13 +423,27 @@ const option = {
       },
     ],
   };
-
-onMounted(() => {
+};
+const setChart = () => {
   var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+};
+const getMaxCeilingValue = (arr) => {
+  let max = Math.max(...arr);
+  return Math.ceil(max / 100) * 100;
+};
 
-  myChart.setOption(option);
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.Max = getMaxCeilingValue(valueList);
+    maxList.value = valueList.map((item) => data.Max * 0.9);
+    getOption();
+    setChart();
+  }, 600);
 });
+
 </script>
 
 <style lang="scss" scoped>
 </style>
+