提交

package.json

@@ -21,6 +21,8 @@
     "@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/Home.jsx

@@ -9,8 +9,10 @@ import { getData } from "../../api/bigScreen"
 
 import Usertrend from "./components/Usertrend";
 import SelfPlatform from "./components/SelfPlatform";
-import Column from "./components/Column";
-import ListeningRate from "./components/ListeningRate";
+import Column from "./components/Column_g2";
+// import Column from "./components/Column";
+import ListeningRate from "./components/ListeningRate_g2";
+// import ListeningRate from "./components/ListeningRate";
 import Activity from "./components/Activity";
 import Map from "./components/Map-l7";
 // import Map from "./components/Map";
@@ -244,7 +246,7 @@ function BigScreenHome() {
             <div className="homeHeader">
                 <div className="sz">{TimeDate()}</div>
                 <div className="tq">{Weather()}</div>
-                <div class="headTitle">大数据平台大屏</div>
+                <div class="headTitle">陕西广电融媒体集团大数据平台</div>
                 {/* <div className="tq">
                     <iframe style="height: 5em; " src="//i.tianqi.com/index.php?c=code&id=10&color=%23C6C6C6&icon=1&site=16" frameborder="0"></iframe>
                 </div> */}

src/pages/bigScreen/components/Column.jsx

@@ -1,79 +1,101 @@
 import { onMount } from "solid-js";
-import { Chart } from '@antv/g2';
-// import DataSet from '@antv/data-set';
+import * as echarts from "echarts";
+import 'echarts-gl'
 
 import "../../../assets/style/BigScreenHome.css"
 
 function Column(prop) {
     let $canvas = undefined;
     function TrendChart(width, height, $canvas) {
-        const data = prop.list.map(v=> {
-            return {
-                type: v.scheduleName, 
-                value: v.watchRate
-            }
-        });
-
-        const chart = new Chart({
-            container: $canvas,
-            autoFit: true,
-            height,
+        var myChart = echarts.init($canvas, null, {
             width,
-            padding: [
-                20,
-                20,
-                50,
-                20
-            ]
+            height
         });
-        chart.data(data);
+        // prettier-ignore
+        var hours = [''];
+        // prettier-ignore
+        var channelName = [];
+        // prettier-ignore
 
-        chart.axis('type', {
-            tickLine: {
-                alignTick: false,
+        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: ""
             },
-            label: {
-                autoHide: false,
-                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) {
-                            out.push(nl[i]);
-                            continue
-                        }
-                        out.push(nl[i] + '\n');
-                    }
-                    if(nl.length <= 6) return out.join("")
-                    else return out.join("") + "..."
+            zAxis3D: {
+                type: 'value',
+                name: "",
+                axisLabel: {
+                    color: '#ffffff'
                 },
-                style: {
-                    fill: "#fff"
+                splitLine:{
+                  show: false
+                },
+                axisLine:{
+                   lineStyle:{
+                     color: "#ffffff"
+                   }
                 }
-            }
-        });
-        chart.axis('value', false);
-
-        chart.tooltip({
-            showMarkers: false,
-        });
-        chart.interval().position('type*value');
-        chart.interaction('element-active');
-
-        // 添加文本标注
-        data.forEach((item) => {
-            chart
-                .annotation()
-                .text({
-                    position: [item.type, item.value],
-                    content: item.value,
-                    style: {
-                        textAlign: 'center',
-                        fill: "#fff"
+            },
+            grid3D: {
+                boxWidth: 10,
+                boxDepth: width,
+                viewControl: {
+                    // projection: 'orthographic'
+                },
+            },
+            series: [
+                {
+                    type: 'bar3D',
+                    data,
+                    shading: 'lambert',
+                    label: {
+                        fontSize: 16,
+                        borderWidth: 1
                     },
-                    offsetY: -10,
-                });
-        });
-        chart.render();
+                }
+            ]
+        };
+        option && myChart.setOption(option);
     }
     onMount(() => {
         TrendChart(prop.width, prop.height, $canvas)

src/pages/bigScreen/components/Column_g2.jsx

@@ -0,0 +1,99 @@
+import { onMount } from "solid-js";
+import { Chart } from '@antv/g2';
+// import DataSet from '@antv/data-set';
+
+import "../../../assets/style/BigScreenHome.css"
+
+function Column(prop) {
+    let $canvas = undefined;
+    function TrendChart(width, height, $canvas) {
+        const data = prop.list.map(v=> {
+            return {
+                type: v.scheduleName, 
+                value: v.watchRate
+            }
+        });
+
+        const chart = new Chart({
+            container: $canvas,
+            autoFit: true,
+            height,
+            width,
+            padding: [
+                20,
+                20,
+                50,
+                20
+            ]
+        });
+        chart.data(data);
+        chart.legend(false);
+        chart.axis('type', {
+            tickLine: {
+                alignTick: false,
+            },
+            label: {
+                autoHide: false,
+                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) {
+                            out.push(nl[i]);
+                            continue
+                        }
+                        out.push(nl[i] + '\n');
+                    }
+                    if(nl.length <= 6) return out.join("")
+                    else return out.join("") + "..."
+                },
+                style: {
+                    fill: "#fff"
+                }
+            }
+        });
+        chart.axis('value', false);
+
+        chart.tooltip(false);
+
+        chart.interval().position('type*value').color('type',[
+            '#87CEFA',
+            '#00BFFF',
+            '#7FFFAA',
+            '#00FF7F',
+            '#32CD32',
+            '#F0E68C',
+            '#FFD700',
+            '#FF7F50',
+            '#FF6347',
+            '#FF0000'
+        ]);
+        chart.interaction('element-active');
+
+        // 添加文本标注
+        data.forEach((item) => {
+            chart
+                .annotation()
+                .text({
+                    position: [item.type, item.value],
+                    content: item.value,
+                    style: {
+                        textAlign: 'center',
+                        fill: "#fff"
+                    },
+                    offsetY: -10,
+                });
+        });
+        chart.render();
+    }
+    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/ListeningRate.jsx

@@ -1,5 +1,7 @@
 import { onMount } from "solid-js";
-import { Chart } from '@antv/g2';
+import * as echarts from "echarts";
+import 'echarts-gl'
+
 // import DataSet from '@antv/data-set';
 
 import "../../../assets/style/BigScreenHome.css"
@@ -8,66 +10,95 @@ import "../../../assets/style/BigScreenHome.css"
 function ListeningRate(prop) {
     let $canvas = undefined;
     function TrendChart(width, height, $canvas) {
-        const data = prop.list.map(v => {
-            return {
-                type: v.channelName,
-                value: v.watchRate
-            }
-        }).reverse();
-        const chart = new Chart({
-            container: $canvas,
+        var myChart = echarts.init($canvas, null, {
             width,
-            height,
-            padding: [10, 60, 10, 10]
+            height
         });
-        chart.data(data);
-        chart.axis('value', false);
-        chart.axis('type', {
-            title: null,
-            tickLine: null,
-            subTickLine: null,
-            line: null,
-            title: null,
-            label: {
-                style: {
-                    fill: "#fff"
+        // 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
                 },
-                formatter: () => {
-                    return ""
+                axisLine:{
+                   lineStyle:{
+                     color: "#ffffff"
+                   }
+                },
+                name: ""
+            },
+            zAxis3D: {
+                type: 'value',
+                name: "",
+                axisLabel: {
+                    color: '#ffffff'
+                },
+                splitLine:{
+                  show: false
+                },
+                axisLine:{
+                   lineStyle:{
+                     color: "#ffffff"
+                   }
                 }
-            }
-        });
-        // chart.tooltip({
-        //     shared: true,
-        //     itemTpl: `
-        //     <div style="margin-bottom: 10px;list-style:none;">
-        //         <span style="background-color:{color};" class="g2-tooltip-marker"></span>
-        //         {value}
-        //     </div>
-        //     `
-        // })
-        chart.tooltip(false)
-        chart.legend(false);
-        chart.coordinate().transpose();
-        chart
-            .interval()
-            .position('type*value')
-            .color('l(0) 0:#1890ff 1:#70cdd0');
-        // 添加文本标注
-        data.forEach((item) => {
-            chart
-                .annotation()
-                .text({
-                    position: [item.type, item.value],
-                    content: item.type,
-                    style: {
-                        textAlign: 'center',
-                        fill: '#fff',
+            },
+            grid3D: {
+                boxWidth: 10,
+                boxDepth: 100,
+                viewControl: {
+                    // projection: 'orthographic'
+                },
+            },
+            series: [
+                {
+                    type: 'bar3D',
+                    data,
+                    shading: 'lambert',
+                    label: {
+                        fontSize: 16,
+                        borderWidth: 1
                     },
-                    offsetX: 30,
-                });
-        });
-        chart.render();
+                }
+            ]
+        };
+        option && myChart.setOption(option);
     }
     onMount(() => {
         TrendChart(prop.width, prop.height - 10, $canvas)

src/pages/bigScreen/components/ListeningRate_g2.jsx

@@ -0,0 +1,83 @@
+import { onMount } from "solid-js";
+import { Chart } from '@antv/g2';
+// import DataSet from '@antv/data-set';
+
+import "../../../assets/style/BigScreenHome.css"
+
+
+function ListeningRate(prop) {
+    let $canvas = undefined;
+    function TrendChart(width, height, $canvas) {
+        const data = prop.list.map(v => {
+            return {
+                type: v.channelName,
+                value: v.watchRate
+            }
+        }).reverse();
+        const chart = new Chart({
+            container: $canvas,
+            width,
+            height,
+            padding: [10, 60, 10, 10]
+        });
+        chart.data(data);
+        chart.axis('value', false);
+        chart.axis('type', {
+            title: null,
+            tickLine: null,
+            subTickLine: null,
+            line: null,
+            title: null,
+            label: {
+                style: {
+                    fill: "#fff"
+                },
+                formatter: () => {
+                    return ""
+                }
+            }
+        });
+        // chart.tooltip({
+        //     shared: true,
+        //     itemTpl: `
+        //     <div style="margin-bottom: 10px;list-style:none;">
+        //         <span style="background-color:{color};" class="g2-tooltip-marker"></span>
+        //         {value}
+        //     </div>
+        //     `
+        // })
+        chart.tooltip(false)
+        chart.legend(false);
+        chart.coordinate().transpose();
+        chart
+            .interval()
+            .position('type*value')
+            .color('l(0) 0:#1890ff 1:#70cdd0');
+        // 添加文本标注
+        data.forEach((item) => {
+            chart
+                .annotation()
+                .text({
+                    position: [item.type, item.value],
+                    content: item.type,
+                    style: {
+                        textAlign: 'center',
+                        fill: '#fff',
+                    },
+                    offsetX: 30,
+                });
+        });
+        chart.render();
+    }
+    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/Map-l7.jsx

@@ -1,10 +1,10 @@
-import { onMount } from "solid-js";
+import { onMount, refetchResources } from "solid-js";
 import { Scene, PointLayer, PolygonLayer, LineLayer, Marker } from '@antv/l7';
 import { Mapbox } from '@antv/l7-maps';
 // import { GaodeMap } from '@antv/l7-maps';
 // import DataSet from '@antv/data-set';
 
-// import json from "../../../assets/file/100000_full.json"
+import json from "../../../assets/file/100000_full.json"
 
 import utils from "../../../utils/index"
 import config from "../../../base/config"
@@ -61,23 +61,23 @@ function Map(prop) {
             // map: new GaodeMap({
             //     style: 'blank',
             //     pitch: 50,
-            //     zoom: 3,
+            //     center: [108.2, 35],
+            //     zoom: 2,
             //     maxZoom: 7,
             //     minZoom: 7,
             //     token: config.gaodeToken
             // })
             map: new Mapbox({
-                pitch: 40,
+                pitch: 80,
+                center: [108.2, 35],
                 style: 'blank',
                 zoom: 5.6,
-                rotateEnable: true,
-
+                minZoom: 5.6,
             })
         });
-
-
+        scene.setMapStatus({ dragEnable: false });
         scene.on('loaded', () => {
-            scene.setCenter([108.2, 35])
+
             // 获取地理/天气信息
             // AMap.convertFrom([prop.Geography.longitude, prop.Geography.latitude], 'gps', function (status, result) {
             //     if (result.info !== 'ok') return
@@ -88,7 +88,6 @@ function Map(prop) {
             // });
             getMapfull().then(data => {
                 li = data && data.features && data.features.length ? data.features : [];
-                console.log(prop.li)
                 for (let i = 0; i < li.length; i++) {
                     const v = li[i].properties || { center: [] };
                     const Data = {
@@ -111,13 +110,14 @@ function Map(prop) {
                     .color('backgoundColor')
                     .size(42);
                 // 上层线条
-                const lineUp = new LineLayer({ zIndex: 3, blend: "normal" })
+                const lineUp = new LineLayer({ zIndex: 2, blend: "normal" })
                     .source(data)
                     .shape('line')
                     .color('rgb(0,255,255)')
                     .size(0.5)
                     .style({
-                        raisingHeight: 150000
+                        raisingHeight: 150000,
+                        opacity: 0.8,
                     })
                     .animate({
                         interval: 1, // 间隔
@@ -126,12 +126,11 @@ function Map(prop) {
                     });
                 //  围栏
                 const bottomLayer = new LineLayer({ zIndex: 0, blend: "normal" })
-                    .source(data)
+                    .source(json)
                     .shape('wall')
-                    .color('rgb(0,255,255)')
+                    .color('rgb(255,255,255)')
                     .size(10)
                     .style({
-                        raisingHeight: 0,
                         heightfixed: true,
                         opacity: 1,
                         sourceColor: '#0DCCFF',
@@ -141,16 +140,17 @@ function Map(prop) {
                     .source(data)
                     .size(150000)
                     .shape('extrude')
-                    .color("name", cli)
+                    .color("#3194fb")
+                    // .color("name", cli)
                     .style({
                         heightfixed: true,
                         pickLight: true,
-                        raisingHeight: 10000,
-                        opacity: 0.8
+                        raisingHeight: 0,
+                        opacity: 0.8,
                     });
 
                 // 水波
-                const waveLayer = new PointLayer({ zIndex: 3, blend: 'normal' })
+                const waveLayer = new PointLayer({ zIndex: 2, blend: 'normal' })
                     .source(source,
                         {
                             parser: {
@@ -164,11 +164,13 @@ function Map(prop) {
                     .color("name", cli)
                     .size('size', v => {
                         let p = v / source[0].size;
-                        // p < 0.4 ? p = (p + 0.2).toFixed(2) - 0 : '';
-                        return p * 100
+                        p < 0.3 ? p = (p + 0.2).toFixed(2) - 0 : '';
+                        return 30
                     })
                     .animate(true)
-                    .style({});
+                    .style({
+                        raisingHeight: 150000,
+                    });
 
                 // 柱子
                 const barLayer = new PointLayer({ zIndex: 2, depth: false })
@@ -186,12 +188,12 @@ function Map(prop) {
                     .color("name", cli)
                     .size('size', v => {
                         let p = v / source[0].size;
-                        // p < 0.4 ? p = (p + 0.2).toFixed(2) - 0 : '';
-                        return [5, 5, p * 300]
+                        p < 0.3 ? p = (p + 0.2).toFixed(2) - 0 : '';
+                        return [5, 5, p * 100]
                     })
                     .animate(true)
                     .style({
-                        raisingHeight: 200000,
+                        raisingHeight: 150000,
                         opacityLinear: {
                             enable: true, // true - false
                             dir: 'up' // up - down

src/pages/bigScreen/components/Map.jsx

@@ -14,6 +14,18 @@ import "../../../assets/style/BigScreenHome.css"
 
 
 class chinaMap {
+    cli = [
+        '#87CEFA',
+        '#00BFFF',
+        '#7FFFAA',
+        '#00FF7F',
+        '#32CD32',
+        '#F0E68C',
+        '#FFD700',
+        '#FF7F50',
+        '#FF6347',
+        '#FF0000'
+    ]
     constructor(data) {
         this.$ele = data.ele;
         this.$bg = data.bg;
@@ -187,7 +199,6 @@ class chinaMap {
             })
             // 添加坐标
             const centerv3 = new THREE.Vector3(elem.properties.center[0], -elem.properties.center[1], 0.2);
-            console.log(elem.properties)
             this.map.add(province)
 
         })
@@ -210,6 +221,7 @@ class chinaMap {
 
     showTip() {
         // 显示省份的信息
+        console.log(this.lastPick)
         if (this.lastPick) {
             const properties = this.lastPick.parent.properties
             this.$tooltip.textContent = properties.name

src/pages/bigScreen/components/NewMediaTrend.jsx

@@ -14,7 +14,7 @@ function DataFormmat(timeString) {
 }
 
 function Usertrend(prop) {
-    let $canvas = undefined, origin = prop.list || [], textList = [], maxaxis = "", max = 0;
+    let $canvas = undefined, origin = prop.list || [];
     function getlist() {
         const setli = [];
         for (let i = 0; i < origin.length; i++) {
@@ -68,9 +68,7 @@ function Usertrend(prop) {
             },
             grid: null
         });
-        chart.tooltip({
-            showCrosshairs: true,
-        });
+        chart.tooltip(false);
         chart.axis("value", {
             label: {
                 formatter: n => {
@@ -84,8 +82,20 @@ function Usertrend(prop) {
             grid: null
         });
 
-        chart.line().shape('smooth').color('type').position('Data*value');
-        chart.area().shape('smooth').color('type').position('Data*value');
+        chart.line().shape('smooth').color('type', [
+            '#4fdfff',
+            '#8b78fa',
+            '#78d56c',
+            '#ffcf48',
+            '#00b2da',
+        ]).position('Data*value');
+        chart.area().shape('smooth').color('type', [
+            'l(90) 0:#4fdfff 1:rgba(0,0,0,0)',
+            'l(90) 0:#8b78fa 1:rgba(0,0,0,0)',
+            'l(90) 0:#78d56c 1:rgba(0,0,0,0)',
+            'l(90) 0:#ffcf48 1:rgba(0,0,0,0)',
+            'l(90) 0:#00b2da 1:rgba(0,0,0,0)',
+        ]).position('Data*value');
         chart.scale(li);
         chart.render();
     }

src/pages/bigScreen/components/SelfPlatform.jsx

@@ -87,12 +87,9 @@ function Usertrend(prop) {
             },
             grid: null
         });
-        chart.tooltip({
-            showCrosshairs: true,
-        });
-
-        chart.line().shape('smooth').position('Data*sales');
-        chart.area().shape('smooth').position('Data*sales');
+        chart.tooltip(false);
+        chart.line().shape('smooth').color('#3ae8ef').position('Data*sales');
+        chart.area().shape('smooth').color('l(90) 0:#3ae8ef 1:rgba(0,0,0,0)').position('Data*sales');
         chart.render();
     }
     onMount(() => {

src/pages/bigScreen/components/Usertrend.jsx

@@ -87,12 +87,10 @@ function Usertrend(prop) {
             },
             grid: null
         });
-        chart.tooltip({
-            showCrosshairs: true,
-        });
+        chart.tooltip(false);
 
-        chart.line().shape('smooth').position('Data*sales');
-        chart.area().shape('smooth').position('Data*sales');
+        chart.line().shape('smooth').color('#3ae8ef').position('Data*sales');
+        chart.area().shape('smooth').color('l(90) 0:#3ae8ef 1:rgba(0,0,0,0)').position('Data*sales');
         chart.render();
     }
     onMount(() => {

yarn.lock

@@ -2191,6 +2191,11 @@ 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"
@@ -2772,6 +2777,22 @@ 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"
@@ -4175,6 +4196,11 @@ 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"
@@ -4263,3 +4289,10 @@ 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"