提交

package.json

@@ -21,8 +21,6 @@
     "@antv/l7-three": "^2.8.31",
     "d3": "^7.4.4",
     "dayjs": "^1.11.1",
-    "echarts": "^5.3.2",
-    "echarts-gl": "^2.0.9",
     "solid-app-router": "^0.1.9",
     "solid-js": "^1.1.3",
     "three": "^0.139.2"

src/pages/bigScreen/components/Column.jsx

@@ -1,111 +0,0 @@
-import { onMount } from "solid-js";
-import * as echarts from "echarts";
-import 'echarts-gl'
-
-import "../../../assets/style/BigScreenHome.css"
-
-function Column(prop) {
-    let $canvas = undefined;
-    function TrendChart(width, height, $canvas) {
-        var myChart = echarts.init($canvas, null, {
-            width,
-            height
-        });
-        // prettier-ignore
-        var hours = [''];
-        // prettier-ignore
-        var channelName = [];
-        // prettier-ignore
-
-        var data = [];
-
-        (prop.list || []).map((v, i)=>{
-            channelName.push(v.channelName)
-            data.push([
-                0, i, v.watchRate
-            ])
-        })
-        let option = {
-            tooltip: {
-                show: false
-            },
-            xAxis3D: {
-                type: 'category',
-                data: hours,
-                axisLabel: {
-                    color: '#ffffff'
-                },
-                splitLine:{
-                  show: false
-                },
-                axisLine:{
-                   lineStyle:{
-                     color: "#ffffff"
-                   }
-                },
-                name: ""
-            },
-            yAxis3D: {
-                type: 'category',
-                data: channelName,
-                axisLabel: {
-                    color: '#ffffff'
-                },
-                splitLine:{
-                  show: false
-                },
-                axisLine:{
-                   lineStyle:{
-                     color: "#ffffff"
-                   }
-                },
-                name: ""
-            },
-            zAxis3D: {
-                type: 'value',
-                name: "",
-                axisLabel: {
-                    color: '#ffffff'
-                },
-                splitLine:{
-                  show: false
-                },
-                axisLine:{
-                   lineStyle:{
-                     color: "#ffffff"
-                   }
-                }
-            },
-            grid3D: {
-                boxWidth: 10,
-                boxDepth: width,
-                viewControl: {
-                    // projection: 'orthographic'
-                },
-            },
-            series: [
-                {
-                    type: 'bar3D',
-                    data,
-                    shading: 'lambert',
-                    label: {
-                        fontSize: 16,
-                        borderWidth: 1
-                    },
-                }
-            ]
-        };
-        option && myChart.setOption(option);
-    }
-    onMount(() => {
-        TrendChart(prop.width, prop.height, $canvas)
-    })
-    return (
-        <div className="livRang" style={`width:${prop.width}px;`}>
-            <div className="head">{prop.title}</div>
-            <div ref={$canvas}></div>
-        </div>
-    );
-}
-
-export default Column;

src/pages/bigScreen/components/Column_g2.jsx

@@ -1,15 +1,96 @@
 import { onMount } from "solid-js";
-import { Chart } from '@antv/g2';
+import { Chart, registerShape } from '@antv/g2';
 // import DataSet from '@antv/data-set';
 
 import "../../../assets/style/BigScreenHome.css"
 
+let cli1 = [
+    "135,206,250",
+    "0,191,255",
+    "127,255,170",
+    "0,255,127",
+    "50,205,50",
+    "240,230,140",
+    "255,215,0",
+    "255,127,80",
+    "255,99,71",
+    "255,0,0",
+], index = 0;
+// 绘制柱状图顶部
+registerShape('interval', 'triangle', {
+    // 1. 定义关键点
+    getPoints(cfg) {
+        const x = cfg.x;
+        const y = cfg.y;
+        const width = cfg.size;
+        return [
+            { x: x - width / 2, y },
+            { x, y: y + width*2 },
+            { x: x + width / 2, y },
+            { x, y: y - width*2 },
+        ];
+    },
+    // 2. 绘制
+    draw(cfg, group) {
+        const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
+        const polygon = group.addShape('path', {
+            attrs: {
+                path: [
+                    ['M', points[0].x, points[0].y],
+                    ['L', points[1].x, points[1].y],
+                    ['L', points[2].x, points[2].y],
+                    ['L', points[3].x, points[3].y],
+                ],
+                fillOpacity: 0.95,
+                fill: `l(90) 0:rgb(${cli1[index % cli1.length]}) 1:rgba(${cli1[index % cli1.length]}, 0.8)`
+            },
+        });
+        index++
+        return polygon;
+    },
+})
+// 绘制柱状图楞线
+registerShape('interval', 'edgeLine', {
+    // 1. 定义关键点
+    getPoints(cfg) {
+        const x = cfg.x;
+        const y = cfg.y;
+        const y0 = cfg.y0;
+        const width = cfg.size;
+        const p1 = (width / 100).toFixed(4) - 0
+        return [
+            { x: x - p1, y: y - width / 2 },
+            { x: x + p1, y: y - width / 2 },
+            { x: x + p1, y: y0 },
+            { x: x - p1, y: y0 },
+        ];
+    },
+    // 2. 绘制
+    draw(cfg, group) {
+        const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
+        const polygon = group.addShape('path', {
+            attrs: {
+                path: [
+                    ['M', points[0].x, points[0].y],
+                    ['L', points[1].x, points[1].y],
+                    ['L', points[2].x, points[2].y],
+                    ['L', points[3].x, points[3].y],
+                ],
+                fillOpacity: 1,
+                fill: `l(90) 0:rgba(${cli1[index % cli1.length]}, 1) 1:rgba(${cli1[index % cli1.length]}, 0.4)`
+            },
+        });
+        index++
+        return polygon;
+    },
+})
+
 function Column(prop) {
     let $canvas = undefined;
     function TrendChart(width, height, $canvas) {
-        const data = prop.list.map(v=> {
+        const data = prop.list.map(v => {
             return {
-                type: v.scheduleName, 
+                type: v.scheduleName,
                 value: v.watchRate
             }
         });
@@ -37,13 +118,13 @@ function Column(prop) {
                 formatter: n => {
                     const nl = n.split(""), len = nl.length > 6 ? 5 : nl.length, out = [];
                     for (let i = 0; i < len; i++) {
-                        if(i%3 !== 2 || i === len - 1) {
+                        if (i % 3 !== 2 || i === len - 1) {
                             out.push(nl[i]);
                             continue
                         }
                         out.push(nl[i] + '\n');
                     }
-                    if(nl.length <= 6) return out.join("")
+                    if (nl.length <= 6) return out.join("")
                     else return out.join("") + "..."
                 },
                 style: {
@@ -55,19 +136,11 @@ function Column(prop) {
 
         chart.tooltip(false);
 
-        chart.interval().position('type*value').color('type',[
-            '#87CEFA',
-            '#00BFFF',
-            '#7FFFAA',
-            '#00FF7F',
-            '#32CD32',
-            '#F0E68C',
-            '#FFD700',
-            '#FF7F50',
-            '#FF6347',
-            '#FF0000'
-        ]);
-        chart.interaction('element-active');
+        chart.interval().position('type*value').color('type', cli1.map(v => `l(90) 0:rgba(${v},0.8) 1:rgba(${v},0.2)`));
+        index = 0;
+        chart.interval().position('type*value').shape('triangle');
+        index = 0;
+        chart.interval().position('type*value').shape('edgeLine');
 
         // 添加文本标注
         data.forEach((item) => {

src/pages/bigScreen/components/ListeningRate.jsx

@@ -1,114 +0,0 @@
-import { onMount } from "solid-js";
-import * as echarts from "echarts";
-import 'echarts-gl'
-
-// import DataSet from '@antv/data-set';
-
-import "../../../assets/style/BigScreenHome.css"
-
-
-function ListeningRate(prop) {
-    let $canvas = undefined;
-    function TrendChart(width, height, $canvas) {
-        var myChart = echarts.init($canvas, null, {
-            width,
-            height
-        });
-        // prettier-ignore
-        var hours = [''];
-        // prettier-ignore
-        var channelName = [];
-        // prettier-ignore
-
-        var data = [];
-
-        (prop.list || []).map((v, i)=>{
-            channelName.push(v.channelName)
-            data.push([
-                0, i, v.watchRate
-            ])
-        })
-        let option = {
-            tooltip: {
-                show: false
-            },
-            xAxis3D: {
-                type: 'category',
-                data: hours,
-                axisLabel: {
-                    color: '#ffffff'
-                },
-                splitLine:{
-                  show: false
-                },
-                axisLine:{
-                   lineStyle:{
-                     color: "#ffffff"
-                   }
-                },
-                name: ""
-            },
-            yAxis3D: {
-                type: 'category',
-                data: channelName,
-                axisLabel: {
-                    color: '#ffffff'
-                },
-                splitLine:{
-                  show: false
-                },
-                axisLine:{
-                   lineStyle:{
-                     color: "#ffffff"
-                   }
-                },
-                name: ""
-            },
-            zAxis3D: {
-                type: 'value',
-                name: "",
-                axisLabel: {
-                    color: '#ffffff'
-                },
-                splitLine:{
-                  show: false
-                },
-                axisLine:{
-                   lineStyle:{
-                     color: "#ffffff"
-                   }
-                }
-            },
-            grid3D: {
-                boxWidth: 10,
-                boxDepth: 100,
-                viewControl: {
-                    // projection: 'orthographic'
-                },
-            },
-            series: [
-                {
-                    type: 'bar3D',
-                    data,
-                    shading: 'lambert',
-                    label: {
-                        fontSize: 16,
-                        borderWidth: 1
-                    },
-                }
-            ]
-        };
-        option && myChart.setOption(option);
-    }
-    onMount(() => {
-        TrendChart(prop.width, prop.height - 10, $canvas)
-    })
-    return (
-        <div className="livRang" style={`width:${prop.width}px;`}>
-            <div className="head">{prop.title}</div>
-            <div ref={$canvas}></div>
-        </div>
-    );
-}
-
-export default ListeningRate;

src/pages/bigScreen/components/ListeningRate_g2.jsx

@@ -1,9 +1,43 @@
 import { onMount } from "solid-js";
-import { Chart } from '@antv/g2';
+import { Chart,registerShape } from '@antv/g2';
 // import DataSet from '@antv/data-set';
 
 import "../../../assets/style/BigScreenHome.css"
 
+// 绘制原型柱状图
+registerShape('point', 'circular', {
+    // 1. 定义关键点
+    getPoints(cfg) {
+        const x = cfg.x;
+        const y = cfg.y;
+        const width = cfg.size;
+        console.log(cfg)
+        return [
+            { x: x - width / 2, y },
+            { x, y: y + width*2 },
+            { x: x + width / 2, y },
+            { x, y: y - width*2 },
+        ];
+    },
+    // 2. 绘制
+    draw(cfg, group) {
+        const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
+        const polygon = group.addShape('path', {
+            attrs: {
+                path: [
+                    ['M', points[0].x, points[0].y],
+                    ['L', points[1].x, points[1].y],
+                    ['L', points[2].x, points[2].y],
+                    ['L', points[3].x, points[3].y],
+                ],
+                fillOpacity: 0.95,
+                fill: `l(90) 0:rgb(${cli1[index % cli1.length]}) 1:rgba(${cli1[index % cli1.length]}, 0.8)`
+            },
+        });
+        index++
+        return polygon;
+    },
+})
 
 function ListeningRate(prop) {
     let $canvas = undefined;

yarn.lock

@@ -2191,11 +2191,6 @@ classnames@2.2.6:
   resolved "https://registry.npmmirror.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
-claygl@^1.2.1:
-  version "1.3.0"
-  resolved "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz#7a6e2903210519ac358848f5d78070ed211685f3"
-  integrity sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==
-
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmmirror.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -2777,22 +2772,6 @@ earcut@^2.0.0, earcut@^2.2.1, earcut@^2.2.2:
   resolved "https://registry.npmmirror.com/earcut/-/earcut-2.2.3.tgz#d44ced2ff5a18859568e327dd9c7d46b16f55cf4"
   integrity sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug==
 
-echarts-gl@^2.0.9:
-  version "2.0.9"
-  resolved "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz#ee228a6c7520a6fb7bbb71ea94394f3637ade033"
-  integrity sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==
-  dependencies:
-    claygl "^1.2.1"
-    zrender "^5.1.1"
-
-echarts@^5.3.2:
-  version "5.3.2"
-  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.3.2.tgz#0a7b3be8c48a48b2e7cb1b82121df0c208d42d2c"
-  integrity sha512-LWCt7ohOKdJqyiBJ0OGBmE9szLdfA9sGcsMEi+GGoc6+Xo75C+BkcT/6NNGRHAWtnQl2fNow05AQjznpap28TQ==
-  dependencies:
-    tslib "2.3.0"
-    zrender "5.3.1"
-
 electron-to-chromium@^1.4.84:
   version "1.4.112"
   resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.112.tgz#ae3a46231d4b2cdc223d6c4d227c06a9a96da7c2"
@@ -4196,11 +4175,6 @@ ts-toolbelt@^9.6.0:
   resolved "https://registry.npmmirror.com/ts-toolbelt/-/ts-toolbelt-9.6.0.tgz#50a25426cfed500d4a09bd1b3afb6f28879edfd5"
   integrity sha512-nsZd8ZeNUzukXPlJmTBwUAuABDe/9qtVDelJeT/qW0ow3ZS3BsQJtNkan1802aM9Uf68/Y8ljw86Hu0h5IUW3w==
 
-tslib@2.3.0:
-  version "2.3.0"
-  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
-  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
-
 tslib@^1.10.0:
   version "1.14.1"
   resolved "https://registry.npmmirror.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -4289,10 +4263,3 @@ wrappy@1:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
-
-zrender@5.3.1, zrender@^5.1.1:
-  version "5.3.1"
-  resolved "https://registry.npmmirror.com/zrender/-/zrender-5.3.1.tgz#fa8e63ac7e719cfd563831fe8c42a9756c5af384"
-  integrity sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==
-  dependencies:
-    tslib "2.3.0"