|
|
@@ -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>
|
hizhangling