tvision-charts-component 3.3.24

package/dist/esm/basicLine/_example/DottedLine.d.ts

@@ -0,0 +1 @@
+export default function DottedLine(): JSX.Element;

package/dist/esm/basicLine/_example/DottedLine.js

@@ -0,0 +1,105 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicLine } from '@tencent/tcharts-component';
+export default function DottedLine() {
+    var options = {
+        pointSelectedAnimation: true,
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: [
+                0, 60, 120, 180, 240, 300, 360, 420, 480, 540, 600, 660, 720, 780, 840, 900, 960, 1020, 1080, 1140, 1200, 1260,
+                1320, 1380, 1440, 1500, 1560, 1620, 1680, 1740, 1800, 1860, 1920, 1980, 2040, 2100, 2160, 2220, 2280, 2340,
+                2400, 2460, 2520, 2580, 2640, 2700, 2760, 2820, 2880, 2940, 3000, 3060, 3120, 3180, 3240, 3300, 3360, 3420,
+                3480, 3540,
+            ],
+            axisLabel: {
+                autoHidden: false,
+            },
+        },
+        interaction: {
+            hover: true,
+        },
+        tooltip: {
+            trigger: 'axis',
+            show: true,
+            axisPointer: {
+                type: 'cross',
+                shadowStyle: {
+                    color: '#e5e5e5',
+                },
+            },
+            enterable: true,
+            position: function (params) {
+                var chartDom = params.chartDom, tooltip = params.tooltip, point = params.point;
+                var chartPositionX = chartDom.getBoundingClientRect().left + document.documentElement.scrollLeft;
+                var tipX = point[0] + chartPositionX - tooltip.clientWidth;
+                return [tipX, '98%'];
+            },
+        },
+        dataZoom: [{ start: 0 }, { type: 'inside', show: false, showResetBtn: true, resetText: '重置', enable: true }],
+        yAxis: [
+            {
+                type: 'value',
+                axisLabel: {
+                    inside: false,
+                },
+            },
+            {
+                type: 'value',
+                axisLabel: { inside: false },
+            },
+        ],
+        legend: {
+            show: false,
+        },
+        dataSource: [
+            {
+                data: [
+                    22.582429596735743, 39.03700273396308, 30.43923427099554, 34.540295118300094, 29.226544588873157,
+                    39.9931793280816, 28.520135628011754, 21.859215546116925, 22.66124331228199, 31.52681744042895,
+                    20.041660527479685, 33.257794926794, 38.929623025156424, 35.97887657088139, 25.105117555483247,
+                    38.815766545308435, 38.23682152556107, 30.533258015440133, 33.5639327963679, 36.73211572135028,
+                    33.43723729524274, 23.537519728539596, 31.492092810861504, 35.14118074964095, 20.515952895414262,
+                    26.993826914733567, 36.17764845538533, 36.300357041872914, 20.05626230557858, 22.36750318031726,
+                    29.684928404242903, 34.15560439736058, 24.01138303447167, 28.825533302684864, 32.61564227596638,
+                    35.95518378267869, 20.11605601988346, 36.28427771114907, 24.64706877682879, 33.285506377227264,
+                    20.380653344670193, 37.13937869006801, 33.56693374070528, 30.9007143723009, 23.26616302022873,
+                    39.9684104120309, 39.92194452638584, 29.720710487620803, 33.45614715776539, 23.32406754481515,
+                    20.433117181316046, 23.98592974999691, 27.591808658431894, 25.30366437316555, 36.715269007085574,
+                    23.23426424939861, 34.465809517839766, 20.836702836473474, 36.51382775034999, 21.480516895171707,
+                ],
+                type: 'line',
+                smooth: true,
+                name: 'ins-a3e6ekue-0',
+                sampling: true,
+                lineStyle: { width: 2, type: 'dotted' },
+            },
+            {
+                data: [
+                    38.18825998681686, 30.882280929631918, 36.808263553580815, 34.377059679565924, 38.70846152612019,
+                    39.5413604094435, 26.41306376408508, 23.872698784295178, 26.90247829881276, 31.042961818807623,
+                    29.79591764861429, 38.47769287156959, 23.56805499917568, 21.707527236544657, 20.940902721915577,
+                    36.32402845783882, 28.671087492428, 31.121826621953165, 20.436117399514547, 35.88051856073844,
+                    25.015264888142358, 35.83332361528544, 22.042426026764268, 20.448963243451924, 21.849074439986296,
+                    34.4853703257658, 26.422793836856037, 34.54548911603548, 35.245175764268474, 20.395814144174086,
+                    21.96013420023292, 37.99147600590213, 31.792670280511718, 25.46972087334683, 32.62373076184505,
+                    25.391024673276966, 28.796299882377923, 23.372309494170693, 21.87942329515952, 38.68424382106277,
+                    26.39814770562024, 20.77929428968629, 27.35656267225581, 20.75319378128599, 27.980418667865912,
+                    26.74261862223566, 26.612032398492854, 38.1139275917596, 22.72328035564067, 25.642117385010504,
+                    30.484525978689376, 23.407706968341436, 34.35185456741479, 28.332905680998998, 31.15778524242414,
+                    26.223565748132955, 29.42733222457465, 23.678715453294718, 34.27325219904294, 34.13761896381733,
+                ],
+                type: 'line',
+                smooth: true,
+                name: 'ins-a3e6ekue-1',
+                sampling: true,
+                lineStyle: { width: 2, type: 'dotted' },
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u7ED8\u5236\u865A\u7EBF"),
+        React.createElement(BasicLine, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=DottedLine.js.map

package/dist/esm/basicLine/_example/DottedLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DottedLine.js","sourceRoot":"","sources":["../../../../src/basicLine/_example/DottedLine.jsx"],"names":[],"mappings":"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"}

package/dist/esm/basicLine/_example/DottedLine.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { BasicLine } from '@tencent/tcharts-component';
+
+export default function DottedLine() {
+  const options = {
+    // 是否使用离线canvas，默认是使用离线canvas
+    // useOfflineCanvas:false,
+    // theme: 'dark',
+    pointSelectedAnimation: true,
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: [
+        0, 60, 120, 180, 240, 300, 360, 420, 480, 540, 600, 660, 720, 780, 840, 900, 960, 1020, 1080, 1140, 1200, 1260,
+        1320, 1380, 1440, 1500, 1560, 1620, 1680, 1740, 1800, 1860, 1920, 1980, 2040, 2100, 2160, 2220, 2280, 2340,
+        2400, 2460, 2520, 2580, 2640, 2700, 2760, 2820, 2880, 2940, 3000, 3060, 3120, 3180, 3240, 3300, 3360, 3420,
+        3480, 3540,
+      ],
+      axisLabel: {
+        autoHidden: false,
+      },
+    },
+    interaction: {
+      hover: true,
+    },
+    tooltip: {
+      trigger: 'axis',
+      show: true,
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: 'cross', // 默认为直线，可选为：'line' | 'shadow'
+        shadowStyle: {
+          color: '#e5e5e5',
+        },
+      },
+      enterable: true,
+      position(params) {
+        const { chartDom, tooltip, point } = params;
+        const chartPositionX = chartDom.getBoundingClientRect().left + document.documentElement.scrollLeft;
+        const tipX = point[0] + chartPositionX - tooltip.clientWidth;
+        return [tipX, '98%'];
+      },
+    },
+    // color: ['#8B3A62', '#7D9EC0', '#fff0aa'],
+    dataZoom: [{ start: 0 }, { type: 'inside', show: false, showResetBtn: true, resetText: '重置', enable: true }],
+    yAxis: [
+      {
+        type: 'value',
+        axisLabel: {
+          inside: false,
+        },
+      },
+      {
+        type: 'value',
+        axisLabel: { inside: false },
+      },
+    ],
+    // legend: { data: ['降雨量', '湿度'] },
+    legend: {
+      show: false,
+      // formatter: function(name) {
+      //     return "test"
+      // }
+    },
+    // color: ['#ff00ff'],
+    dataSource: [
+      {
+        data: [
+          22.582429596735743, 39.03700273396308, 30.43923427099554, 34.540295118300094, 29.226544588873157,
+          39.9931793280816, 28.520135628011754, 21.859215546116925, 22.66124331228199, 31.52681744042895,
+          20.041660527479685, 33.257794926794, 38.929623025156424, 35.97887657088139, 25.105117555483247,
+          38.815766545308435, 38.23682152556107, 30.533258015440133, 33.5639327963679, 36.73211572135028,
+          33.43723729524274, 23.537519728539596, 31.492092810861504, 35.14118074964095, 20.515952895414262,
+          26.993826914733567, 36.17764845538533, 36.300357041872914, 20.05626230557858, 22.36750318031726,
+          29.684928404242903, 34.15560439736058, 24.01138303447167, 28.825533302684864, 32.61564227596638,
+          35.95518378267869, 20.11605601988346, 36.28427771114907, 24.64706877682879, 33.285506377227264,
+          20.380653344670193, 37.13937869006801, 33.56693374070528, 30.9007143723009, 23.26616302022873,
+          39.9684104120309, 39.92194452638584, 29.720710487620803, 33.45614715776539, 23.32406754481515,
+          20.433117181316046, 23.98592974999691, 27.591808658431894, 25.30366437316555, 36.715269007085574,
+          23.23426424939861, 34.465809517839766, 20.836702836473474, 36.51382775034999, 21.480516895171707,
+        ],
+        type: 'line',
+        smooth: true,
+        name: 'ins-a3e6ekue-0',
+        sampling: true,
+        lineStyle: { width: 2, type: 'dotted' },
+      },
+      {
+        data: [
+          38.18825998681686, 30.882280929631918, 36.808263553580815, 34.377059679565924, 38.70846152612019,
+          39.5413604094435, 26.41306376408508, 23.872698784295178, 26.90247829881276, 31.042961818807623,
+          29.79591764861429, 38.47769287156959, 23.56805499917568, 21.707527236544657, 20.940902721915577,
+          36.32402845783882, 28.671087492428, 31.121826621953165, 20.436117399514547, 35.88051856073844,
+          25.015264888142358, 35.83332361528544, 22.042426026764268, 20.448963243451924, 21.849074439986296,
+          34.4853703257658, 26.422793836856037, 34.54548911603548, 35.245175764268474, 20.395814144174086,
+          21.96013420023292, 37.99147600590213, 31.792670280511718, 25.46972087334683, 32.62373076184505,
+          25.391024673276966, 28.796299882377923, 23.372309494170693, 21.87942329515952, 38.68424382106277,
+          26.39814770562024, 20.77929428968629, 27.35656267225581, 20.75319378128599, 27.980418667865912,
+          26.74261862223566, 26.612032398492854, 38.1139275917596, 22.72328035564067, 25.642117385010504,
+          30.484525978689376, 23.407706968341436, 34.35185456741479, 28.332905680998998, 31.15778524242414,
+          26.223565748132955, 29.42733222457465, 23.678715453294718, 34.27325219904294, 34.13761896381733,
+        ],
+        type: 'line',
+        smooth: true,
+        name: 'ins-a3e6ekue-1',
+        sampling: true,
+        lineStyle: { width: 2, type: 'dotted' },
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>绘制虚线</div>
+      <BasicLine height={500} {...options} />
+    </>
+  );
+}

package/dist/esm/basicLine/_example/DualaxisLine.d.ts

@@ -0,0 +1 @@
+export default function DualaxisLine(): JSX.Element;

package/dist/esm/basicLine/_example/DualaxisLine.js

@@ -0,0 +1,91 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicLine } from '@tencent/tcharts-component';
+export default function DualaxisLine() {
+    var options = {
+        grid: { top: 16, left: 0, bottom: 10, right: 0 },
+        xAxis: {
+            data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'],
+            axisLabel: {},
+            axisLine: {
+                show: true,
+                lineStyle: { color: '#f2f2f2', width: 1, type: 'solid' },
+            },
+            axisTick: { show: false },
+        },
+        yAxis: [
+            {
+                type: 'value',
+                axisLine: {
+                    show: true,
+                    lineStyle: { color: '#f2f2f2', width: 1, type: 'solid' },
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: { color: '#f2f2f2', width: 1, type: 'solid' },
+                },
+                defaultData: ['0', '20', '40', '60', '80', '100'],
+                axisLabel: {
+                    show: true,
+                    inside: false,
+                    margin: 8,
+                    formatter: function (value) {
+                        return "".concat(value, "%");
+                    },
+                },
+                min: null,
+                max: null,
+            },
+            {
+                type: 'value',
+                axisLine: {
+                    show: true,
+                    lineStyle: { color: '#f2f2f2', width: 1, type: 'solid' },
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: { color: '#f2f2f2', width: 1, type: 'solid' },
+                },
+                defaultData: ['0', '20', '40', '60', '80', '100'],
+                axisLabel: {
+                    show: true,
+                    inside: false,
+                    margin: 8,
+                    formatter: function (value) {
+                        return "".concat(value, "MBytes");
+                    },
+                },
+                min: null,
+                max: null,
+            },
+        ],
+        dataSource: [
+            {
+                name: 'CPU利用率',
+                type: 'line',
+                showType: ['line'],
+                smooth: false,
+                connectNulls: false,
+                fullNulls: false,
+                lineStyle: { normal: { width: '1' }, opacity: 0 },
+                data: [99.72, 99.39, 85, 60, 77, 99.76, 80, 70, 80, 90, 95, 88],
+                yAxisIndex: 0,
+            },
+            {
+                name: '内存使用量',
+                type: 'line',
+                showType: ['line'],
+                smooth: false,
+                connectNulls: false,
+                fullNulls: false,
+                lineStyle: { normal: { width: '1' }, opacity: 0 },
+                data: [360, 326, 200, 300, 400, 870, 300, 666, 500, 700, 800, 790],
+                yAxisIndex: 1,
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u53CC\u8F74\u6298\u7EBF\u56FE"),
+        React.createElement(BasicLine, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=DualaxisLine.js.map

package/dist/esm/basicLine/_example/DualaxisLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DualaxisLine.js","sourceRoot":"","sources":["../../../../src/basicLine/_example/DualaxisLine.jsx"],"names":[],"mappings":"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"}

package/dist/esm/basicLine/_example/DualaxisLine.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { BasicLine } from '@tencent/tcharts-component';
+
+export default function DualaxisLine() {
+  const options = {
+    grid: { top: 16, left: 0, bottom: 10, right: 0 },
+    xAxis: {
+      data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'],
+      axisLabel: {},
+      axisLine: {
+        show: true,
+        lineStyle: { color: '#f2f2f2', width: 1, type: 'solid' },
+      },
+      axisTick: { show: false },
+    },
+    yAxis: [
+      {
+        type: 'value',
+        axisLine: {
+          show: true,
+          lineStyle: { color: '#f2f2f2', width: 1, type: 'solid' },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: { color: '#f2f2f2', width: 1, type: 'solid' },
+        },
+        defaultData: ['0', '20', '40', '60', '80', '100'],
+        axisLabel: {
+          show: true,
+          inside: false,
+          margin: 8,
+          formatter(value) {
+            return `${value}%`;
+          },
+        },
+        min: null,
+        max: null,
+      },
+      {
+        type: 'value',
+        axisLine: {
+          show: true,
+          lineStyle: { color: '#f2f2f2', width: 1, type: 'solid' },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: { color: '#f2f2f2', width: 1, type: 'solid' },
+        },
+        defaultData: ['0', '20', '40', '60', '80', '100'],
+        axisLabel: {
+          show: true,
+          inside: false,
+          margin: 8,
+          formatter(value) {
+            return `${value}MBytes`;
+          },
+        },
+        min: null,
+        max: null,
+      },
+    ],
+    dataSource: [
+      {
+        name: 'CPU利用率',
+        type: 'line',
+        showType: ['line'], // 展示类型
+        smooth: false,
+        connectNulls: false,
+        fullNulls: false,
+        lineStyle: { normal: { width: '1' }, opacity: 0 },
+        data: [99.72, 99.39, 85, 60, 77, 99.76, 80, 70, 80, 90, 95, 88],
+        yAxisIndex: 0,
+      },
+      {
+        name: '内存使用量',
+        type: 'line',
+        showType: ['line'], // 展示类型
+        smooth: false,
+        connectNulls: false,
+        fullNulls: false,
+        lineStyle: { normal: { width: '1' }, opacity: 0 },
+        data: [360, 326, 200, 300, 400, 870, 300, 666, 500, 700, 800, 790],
+        yAxisIndex: 1,
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>双轴折线图</div>
+      <BasicLine height={500} {...options} />
+    </>
+  );
+}

package/dist/esm/basicLine/_example/LabelLine.d.ts

@@ -0,0 +1 @@
+export default function LabelLine(): JSX.Element;

package/dist/esm/basicLine/_example/LabelLine.js

@@ -0,0 +1,83 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicLine } from '@tencent/tcharts-component';
+export default function LabelLine() {
+    var options = {
+        pointSelectedAnimation: true,
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: [0, 60, 120, 180, 240, 300, 360, 420, 480, 540],
+            axisLabel: {
+                autoHidden: false,
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#E5E5E5',
+                    width: 1,
+                    type: 'solid',
+                },
+            },
+        },
+        interaction: {
+            hover: true,
+        },
+        tooltip: {
+            trigger: 'axis',
+            show: true,
+            axisPointer: {
+                type: 'cross',
+                shadowStyle: {
+                    color: '#e5e5e5',
+                },
+            },
+            enterable: true,
+            position: function (params) {
+                var chartDom = params.chartDom, tooltip = params.tooltip, point = params.point;
+                var chartPositionX = chartDom.getBoundingClientRect().left + document.documentElement.scrollLeft;
+                var tipX = point[0] + chartPositionX - tooltip.clientWidth;
+                return [tipX, '98%'];
+            },
+        },
+        dataZoom: [{ start: 0 }, { type: 'inside', show: false, showResetBtn: true, resetText: '重置', enable: true }],
+        yAxis: [
+            {
+                type: 'value',
+                axisLabel: {
+                    inside: false,
+                },
+            },
+            {
+                type: 'value',
+                axisLabel: { inside: false },
+            },
+        ],
+        legend: {
+            show: false,
+        },
+        dataSource: [
+            {
+                data: [
+                    37.79904216758467, 27.125250301837642, 24.02003895096223, 24.885652873549976, 23.38346278947867,
+                    21.744818720718232, 27.13729476792196, 37.647296608652, 38.576391558111474, 29.257637209770614,
+                ],
+                type: 'line',
+                smooth: false,
+                label: {
+                    show: true,
+                    position: 'top',
+                    formatter: function (item) { return "".concat(item.getValue().toFixed(2), "M"); },
+                },
+                name: 'ins-a3e6ekue-0',
+                sampling: true,
+                lineStyle: { normal: { width: 1 } },
+                yAxisIndex: 0,
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u7EBF\u4E0A\u663E\u793A label"),
+        React.createElement(BasicLine, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=LabelLine.js.map

package/dist/esm/basicLine/_example/LabelLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelLine.js","sourceRoot":"","sources":["../../../../src/basicLine/_example/LabelLine.jsx"],"names":[],"mappings":"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"}

package/dist/esm/basicLine/_example/LabelLine.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { BasicLine } from '@tencent/tcharts-component';
+
+export default function LabelLine() {
+  const options = {
+    // 是否使用离线canvas，默认是使用离线canvas
+    // useOfflineCanvas:false,
+    // theme: 'dark',
+    pointSelectedAnimation: true,
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: [0, 60, 120, 180, 240, 300, 360, 420, 480, 540],
+      axisLabel: {
+        autoHidden: false,
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#E5E5E5',
+          width: 1,
+          type: 'solid',
+        },
+      },
+    },
+    interaction: {
+      hover: true,
+    },
+    tooltip: {
+      trigger: 'axis',
+      show: true,
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: 'cross', // 默认为直线，可选为：'line' | 'shadow'
+        shadowStyle: {
+          color: '#e5e5e5',
+        },
+      },
+      enterable: true,
+      position(params) {
+        const { chartDom, tooltip, point } = params;
+        const chartPositionX = chartDom.getBoundingClientRect().left + document.documentElement.scrollLeft;
+        const tipX = point[0] + chartPositionX - tooltip.clientWidth;
+        return [tipX, '98%'];
+      },
+    },
+    // color: ['#8B3A62', '#7D9EC0', '#fff0aa'],
+    dataZoom: [{ start: 0 }, { type: 'inside', show: false, showResetBtn: true, resetText: '重置', enable: true }],
+    yAxis: [
+      {
+        type: 'value',
+        axisLabel: {
+          inside: false,
+        },
+      },
+      {
+        type: 'value',
+        axisLabel: { inside: false },
+      },
+    ],
+    // legend: { data: ['降雨量', '湿度'] },
+    legend: {
+      show: false,
+      // formatter: function(name) {
+      //     return "test"
+      // }
+    },
+    // color: ['#ff00ff'],
+    dataSource: [
+      {
+        data: [
+          37.79904216758467, 27.125250301837642, 24.02003895096223, 24.885652873549976, 23.38346278947867,
+          21.744818720718232, 27.13729476792196, 37.647296608652, 38.576391558111474, 29.257637209770614,
+        ],
+        type: 'line',
+        smooth: false,
+        label: {
+          show: true,
+          position: 'top',
+          formatter: item => `${item.getValue().toFixed(2)}M`,
+        },
+        name: 'ins-a3e6ekue-0',
+        sampling: true,
+        lineStyle: { normal: { width: 1 } },
+        yAxisIndex: 0,
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>线上显示 label</div>
+      <BasicLine height={500} {...options} />
+    </>
+  );
+}

package/dist/esm/basicLine/_example/LegendLeftLine.d.ts

@@ -0,0 +1 @@
+export default function LegendLeftLine(): JSX.Element;