[feat][生涯彩虹图][试验生涯彩虹图]

src/views/xjc-integratedmachine/common/ai/TestColorCanvas.vue

@@ -1,172 +1,92 @@
 <template>
     <div>
-        <div id="chart" style="width: 1920px;height:1080px;background: #cbccd0"/>
+        <div style="height: 1700px; height:900px;display: flex;justify-content: center">
+            <canvas width="1700" height="900" style="border: 1px solid blue; background-color: white;" id="can"></canvas>
+        </div>
     </div>
 </template>
 <script setup>
     import {onMounted} from 'vue'
     import * as echarts from "echarts";
 
-    let CENTER_X = 960;
-    let CENTER_Y = 540;
-    let CENTER_X_PX = '960px';
-    let CENTER_Y_PX = '540px';
-    let elementById = "";
-    let myChart = "";
+    let CENTER_X = 850;
+    let CENTER_Y = 900;
     let startMouse = { x: 0, y: 0 };
     let moveMouse = { x: 0, y: 0 };
 
-    // 第一个职业轻度
-    let startAngle11 = 180;
-    let dataValue11 = 0;
-    // 第一个职业中度
-    let startAngle12 = 180;
-    let dataValue12 = 0;
-    // 第一个职业重度
-    let startAngle13 = 180;
-    let dataValue13 = 0;
-
-    const placeItemStyle = {
-        label: {
-            show: false,
-        },
-        labelLine: {
-            show: false,
-        },
-        itemStyle: {
-            color: "#cbccd0",
-        },
-        emphasis: {
-            label: {
-                show: false,
-            },
-            labelLine: {
-                show: false,
-            },
-        },
-    };
-    let option = {
-        title: {
-            text: "销售分布",
-        },
-        series: [
-            {
-                name: "销量",
-                type: "pie",
-                startAngle: startAngle11,
-                endAngle: 360,
-                radius: ["50px", "100px"],
-                center: [CENTER_X_PX, CENTER_Y_PX],
-                color: ["#afdd8a", "#cbccd0", "#afdd8a"],
-                zlevel: 1,
-                hoverAnimation: false, //鼠标移入变大
-                data: [
-                    {
-                        value: dataValue11,
-                    },
-                    {
-                        value: 100,
-                    }
-                ],
-            },
-            {
-                name: "销量",
-                type: "pie",
-                startAngle: startAngle12,
-                endAngle: 360,
-                radius: ["100px", "150px"],
-                center: [CENTER_X_PX, CENTER_Y_PX],
-                color: ["#afdd8a", "#cbccd0"],
-                zlevel: 2,
-                hoverAnimation: false, //鼠标移入变大
-                data: [
-                    {
-                        value: dataValue12,
-                    },
-                    {
-                        value: 100,
-                        ...placeItemStyle,
-                    },
-                ],
-            },
-            {
-                name: "销量",
-                type: "pie",
-                startAngle: startAngle13,
-                endAngle: 360,
-                radius: ["150px", "200px"],
-                center: [CENTER_X_PX, CENTER_Y_PX],
-                color: ["#afdd8a", "#cbccd0"],
-                zlevel: 3,
-                hoverAnimation: false, //鼠标移入变大
-                data: [
-                    {
-                        value: dataValue13,
-                    },
-                    {
-                        value: 100,
-                        ...placeItemStyle,
-                    },
-                ],
-            }]
-    }
+    // 第一个职业
+    let startAngle11 = 0;
+    let startAngle12 = 0;
+    let startAngle13 = 0;
+
+    // 第二个职业
+    let startAngle21 = 0;
+    let startAngle22 = 0;
+    let startAngle23 = 0;
 
     function changes() {
-        elementById.onmousedown = function (el) {
+        can.onmousedown = function (el) {
             startMouse.x = el.offsetX;
             startMouse.y = el.offsetY;
             calcStartRadius();
-            elementById.onmousemove = function (e) {
+            can.onmousemove = function (e) {
                 moveMouse.x = startMouse.x;
                 moveMouse.y = startMouse.y;
                 startMouse.x = e.pageX - this.offsetLeft;
                 startMouse.y = e.pageY - this.offsetTop;
-                console.log("last_mouse.x="+moveMouse.x);
-                console.log("last_mouse.y="+moveMouse.y);
-                calcEndRadius();
-                // calcEndAngle();
+        /*        console.log("last_mouse.x="+moveMouse.x);
+                console.log("last_mouse.y="+moveMouse.y);*/
+                if(startMouse.x !== moveMouse.x && startMouse.y !== moveMouse.y){
+                    calcEndRadius();
+                }
             }
         }
-        elementById.onmouseup = function () {
-            elementById.onmousemove = null;
+        can.onmouseup = function () {
+            can.onmousemove = null;
         }
     }
 
     /*计算起始点*/
     function calcStartRadius(){
         let sum = Math.pow(startMouse.x-CENTER_X, 2)+ Math.pow(CENTER_Y-startMouse.y, 2);
+        // 第一个职业
         if(sum < Math.pow(100,2) && sum > Math.pow(50,2)){
-            if(dataValue11 === 0){
-                startAngle11 = calcAngle();
-                option.series[0].startAngle = 180 - startAngle11;
-            }else{
-
-            }
+            startAngle11 = calcAngle();
         }else if(sum < Math.pow(150,2) && sum > Math.pow(100,2)){
             startAngle12 = calcAngle();
-            option.series[1].startAngle = 180 - startAngle12;
         }else if(sum < Math.pow(200,2) && sum > Math.pow(150,2)){
             startAngle13 = calcAngle();
-            option.series[2].startAngle = 180 - startAngle13;
         }
-        myChart.setOption(option);
+        // 第二个职业
+        else if(sum < Math.pow(300,2) && sum > Math.pow(250,2)){
+            startAngle21 = calcAngle();
+        }else if(sum < Math.pow(350,2) && sum > Math.pow(300,2)){
+            startAngle22 = calcAngle();
+        }else if(sum < Math.pow(400,2) && sum > Math.pow(350,2)){
+            startAngle23 = calcAngle();
+        }
     }
 
     /*计算终点*/
     function calcEndRadius(){
         let sum = Math.pow(moveMouse.x-CENTER_X, 2)+ Math.pow(CENTER_Y-moveMouse.y, 2);
         let ret = calcAngle();
+        // 第一个职业
         if(sum < Math.pow(100,2) && sum > Math.pow(50,2)){
-            dataValue11 = (ret - startAngle11)*100/(180-ret)
-            option.series[0].data[0].value = dataValue11;
+            paint("green", 75, startAngle11 ,ret);
         }else if(sum < Math.pow(150,2) && sum > Math.pow(100,2)){
-            let value = (ret - startAngle12)*100/(180-ret)
-            option.series[1].data[0].value = value;
+            paint("green", 125, startAngle12 ,ret);
         }else if(sum < Math.pow(200,2) && sum > Math.pow(150,2)){
-            let value = (ret - startAngle13)*100/(180-ret)
-            option.series[2].data[0].value = value;
+            paint("green", 175, startAngle13 ,ret);
+        }
+        // 第二个职业
+        else if(sum < Math.pow(300,2) && sum > Math.pow(250,2)){
+            paint("#ffd309", 275, startAngle21 ,ret);
+        }else if(sum < Math.pow(350,2) && sum > Math.pow(300,2)){
+            paint("#ffd309", 325, startAngle22 ,ret);
+        }else if(sum < Math.pow(400,2) && sum > Math.pow(350,2)){
+            paint("#ffd309", 375, startAngle23 ,ret);
         }
-        myChart.setOption(option);
     }
 
     /*计算角度0-180度*/
@@ -179,26 +99,53 @@
         if (ret < 0) {
             ret += 450;
         }
-        console.log('角度：'+ret);
-        return ret;
+        let num = ret * Math.PI/180 +Math.PI;
+        // console.log('角度：'+num);
+        return num;
     }
 
+    let can = "";
+    let ctx = "";
     function init(){
-        elementById = document.getElementById("chart");
-        myChart = echarts.init(elementById);
-        myChart.setOption(option, true);
-        window.addEventListener("resize", () => {
-            myChart.resize();
-        });
+        can = document.getElementById('can');
+        ctx = can.getContext('2d');
     }
 
-/*    watch(startAngle11, (newValue, oldValue) => {
-        console.log('old:' + oldValue);
-    });*/
+    function arc(num){
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.arc(CENTER_X, CENTER_Y, num,  Math.PI,  2*Math.PI, false);
+        ctx.stroke();
+    }
+
+
+    function paint(color, radius, startAngle, endAngle){
+        ctx.lineWidth = 50;
+        ctx.strokeStyle = color;
+        ctx.beginPath();
+        ctx.arc(CENTER_X, CENTER_Y, radius, startAngle, endAngle, false);
+        ctx.stroke();
+    }
 
     onMounted(() => {
         init();
         changes();
+        arc(50);
+        arc(100);
+        arc(150);
+        arc(200);
+
+        arc(250);
+        arc(300);
+        arc(350);
+        arc(400);
+
+        arc(450);
+        arc(500);
+        arc(550);
+        arc(600);
+
+        arc(700);
     });
 </script>