onesight-charts 0.0.1

package/dist/components/tooltip/index.js

@@ -0,0 +1,128 @@
+import ReactECharts from 'echarts-for-react';
+import React from 'react';
+var LineChart = function LineChart(_ref) {
+  var data = _ref.data;
+  var getOption = function getOption() {
+    return {
+      legend: {
+        // data: legendData,
+        x: 'center',
+        type: 'plain',
+        bottom: 0,
+        padding: 0,
+        left: 'center',
+        icon: 'rect',
+        itemWidth: 16,
+        itemHeight: 4,
+        itemGap: 8,
+        // formatter: function (name) {
+        //   let value = legendCustom
+        //     ? handleCompareSeries(name, series)
+        //     : handleSeries(name, series);
+        //   let showName = name;
+        //   if (series.length >= 4) {
+        //     const strLen = 15;
+        //     if (name.length > strLen) {
+        //       showName = name.substring(0, strLen) + '...';
+        //     }
+        //   }
+        //   return isTranslation
+        //     ? `{labelName|${formatMessage({
+        //         id: `listening_${name}`,
+        //       })} }\n{labelMark|${value}}`
+        //     : legendCustom
+        //     ? `{labelName|${showName}}\n{labelMark|${value}}`
+        //     : `${name}`;
+        // },
+        textStyle: {
+          fontWeight: 500,
+          fontSize: 12,
+          color: '#364141',
+          lineHeight: 6,
+          rich: {
+            // 给labelName添加样式
+            labelName: {
+              fontWeight: 500,
+              fontSize: 12,
+              padding: [6, 6, 0, 0]
+            },
+            // 给labelMark添加样式
+            labelMark: {
+              color: '#7A8283',
+              fontSize: 12,
+              padding: [30, 0, 0, 0]
+            }
+          }
+        }
+      },
+      tooltip: {
+        trigger: 'axis'
+      },
+      xAxis: {
+        type: 'category',
+        axisLine: {
+          lineStyle: {
+            color: '#e5e5e5'
+          }
+        },
+        axisTick: {
+          show: true,
+          alignWithLabel: true,
+          length: 5
+        },
+        axisLabel: {
+          // formatter: function (value, index) {
+          //   return xAxisType === 'date'
+          //     ? formatDateXaxis(value)
+          //     : formatMessage({ id: `listening_${value}` });
+          // },
+          interval: 'auto',
+          margin: 12,
+          color: '#515E5F',
+          fontWeight: 500,
+          fontSize: 12,
+          lineHeight: 20
+        },
+        splitLine: {
+          show: false,
+          interval: 0
+        },
+        boundaryGap: false
+        // data: xAxisData,
+      },
+      yAxis: {
+        type: 'value',
+        minInterval: 1,
+        axisLabel: {
+          // formatter: function (value) {
+          //   let formatted = customize.numberFormatNull(value);
+          //   if (formatted.length < 4) {
+          //     // 假设最大长度为4
+          //     formatted = '   ' + formatted; // 在前面添加空格
+          //   }
+          //   return formatted;
+          // },
+          margin: 14,
+          color: '#515E5F',
+          fontSize: 12,
+          lineHeight: 20
+        },
+        splitLine: {
+          lineStyle: {
+            type: 'dashed',
+            color: '#E5E5E5'
+          }
+        }
+      },
+      series: data,
+      animation: true
+    };
+  };
+  return /*#__PURE__*/React.createElement(ReactECharts, {
+    option: getOption(),
+    style: {
+      height: 400
+    }
+  });
+};
+export default LineChart;

package/dist/components/tooltip/index.scss

@@ -0,0 +1,5 @@
+.onesight-chart-pie {
+  width: 500px;
+  height: 340px;
+  border: 1px solid #e5e5e5;
+}

package/dist/index.js

@@ -0,0 +1 @@
+export { default as line } from "./components/line";

package/dist/umd/onesight-charts.min.css

@@ -0,0 +1 @@
+.onesight-line-tooltip{border-color:#ddd;border-radius:8px;box-shadow:0 6px 20px 0 rgba(0,0,0,.13);min-width:280px;padding:0}.onesight-line-tooltip .tooltip-wrap{position:relative}.onesight-line-tooltip .tooltip-head{border-bottom:1px solid #eee;color:#364141;font-size:15px;font-weight:700;line-height:22px;overflow:hidden;padding:10px 16px;text-overflow:ellipsis;white-space:nowrap}.onesight-line-tooltip .tooltip-body{max-height:213.64px;overflow-y:auto;padding:0 0 0 8px}.onesight-line-tooltip .tooltip-body .total{color:#364141;font-weight:600;padding:14px 8px 2px}.onesight-line-tooltip .tooltip-body .item,.onesight-line-tooltip .tooltip-body .total{align-items:center;display:flex;font-size:14px;justify-content:space-between;line-height:20px}.onesight-line-tooltip .tooltip-body .item{border-radius:6px;color:#515e5f;cursor:pointer;font-weight:400;height:32px;margin-right:1px;margin-top:8px;padding:0 8px}.onesight-line-tooltip .tooltip-body .item .l{flex-basis:auto;flex-grow:1;flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.onesight-line-tooltip .tooltip-body .item .l-color{display:inline-block;height:4px;margin-bottom:3px;margin-left:2px;margin-right:6px;vertical-align:middle;width:16px}.onesight-line-tooltip .tooltip-body .item .r{flex-grow:0;flex-shrink:0;padding-left:6px;white-space:nowrap}.onesight-line-tooltip .tooltip-body .item .r .num{font-weight:700;vertical-align:baseline}.onesight-line-tooltip .tooltip-body .item:last-child{border-bottom:none;margin-bottom:8px}.onesight-line-tooltip .tooltip-body .item:only-child{line-height:32px}.onesight-line-tooltip .tooltip-body .item:hover{background:#f3f4f4}.onesight-line-tooltip .triangle-down{background:transparent;bottom:-12px;height:12px;left:50%;position:absolute;transform:translateX(-50%);width:280px}.onesight-line-tooltip .triangle-down:after{border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #fff;content:"";filter:drop-shadow(0 1px 0 #dddddd);height:0;left:50%;position:absolute;transform:translateX(-50%);width:0}