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

src/router/router_common.js

@@ -4,6 +4,14 @@ const router = [
         path: '/xjc-integratedmachine/common/ai/chat',
         component: () => import('@/views/xjc-integratedmachine/common/ai/chat.vue'),
     },
+    {
+        path: '/xjc-integratedmachine/common/testColor',
+        component: () => import('@/views/xjc-integratedmachine/common/ai/TestColor.vue'),
+    },
+    {
+        path: '/xjc-integratedmachine/common/testColorCanvas',
+        component: () => import('@/views/xjc-integratedmachine/common/ai/TestColorCanvas.vue'),
+    },
 
 
 

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

@@ -0,0 +1,210 @@
+<template>
+    <div>
+        <div id="chart" style="width: 1920px;height:1080px;background: #cbccd0"/>
+    </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 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,
+                    },
+                ],
+            }]
+    }
+
+    function changes() {
+        elementById.onmousedown = function (el) {
+            startMouse.x = el.offsetX;
+            startMouse.y = el.offsetY;
+            calcStartRadius();
+            elementById.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();
+            }
+        }
+        elementById.onmouseup = function () {
+            elementById.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{
+
+            }
+        }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);
+    }
+
+    /*计算终点*/
+    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;
+        }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;
+        }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;
+        }
+        myChart.setOption(option);
+    }
+
+    /*计算角度0-180度*/
+    function calcAngle(){
+        let number = Math.atan2(Math.abs(CENTER_Y-startMouse.y), CENTER_X-startMouse.x);
+        let ret = number * 180 / Math.PI; //弧度转角度，方便调试
+        if (ret > 360) {
+            ret -= 360;
+        }
+        if (ret < 0) {
+            ret += 450;
+        }
+        console.log('角度：'+ret);
+        return ret;
+    }
+
+    function init(){
+        elementById = document.getElementById("chart");
+        myChart = echarts.init(elementById);
+        myChart.setOption(option, true);
+        window.addEventListener("resize", () => {
+            myChart.resize();
+        });
+    }
+
+/*    watch(startAngle11, (newValue, oldValue) => {
+        console.log('old:' + oldValue);
+    });*/
+
+    onMounted(() => {
+        init();
+        changes();
+    });
+</script>
+
+<style scoped>
+    #chart3 {
+        width: 500px;
+        height: 400px;
+    }
+</style>

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

@@ -0,0 +1,210 @@
+<template>
+    <div>
+        <div id="chart" style="width: 1920px;height:1080px;background: #cbccd0"/>
+    </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 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,
+                    },
+                ],
+            }]
+    }
+
+    function changes() {
+        elementById.onmousedown = function (el) {
+            startMouse.x = el.offsetX;
+            startMouse.y = el.offsetY;
+            calcStartRadius();
+            elementById.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();
+            }
+        }
+        elementById.onmouseup = function () {
+            elementById.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{
+
+            }
+        }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);
+    }
+
+    /*计算终点*/
+    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;
+        }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;
+        }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;
+        }
+        myChart.setOption(option);
+    }
+
+    /*计算角度0-180度*/
+    function calcAngle(){
+        let number = Math.atan2(Math.abs(CENTER_Y-startMouse.y), CENTER_X-startMouse.x);
+        let ret = number * 180 / Math.PI; //弧度转角度，方便调试
+        if (ret > 360) {
+            ret -= 360;
+        }
+        if (ret < 0) {
+            ret += 450;
+        }
+        console.log('角度：'+ret);
+        return ret;
+    }
+
+    function init(){
+        elementById = document.getElementById("chart");
+        myChart = echarts.init(elementById);
+        myChart.setOption(option, true);
+        window.addEventListener("resize", () => {
+            myChart.resize();
+        });
+    }
+
+/*    watch(startAngle11, (newValue, oldValue) => {
+        console.log('old:' + oldValue);
+    });*/
+
+    onMounted(() => {
+        init();
+        changes();
+    });
+</script>
+
+<style scoped>
+    #chart3 {
+        width: 500px;
+        height: 400px;
+    }
+</style>