onesight-charts 0.0.1

package/dist/components/one-table/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/one-table/index.scss

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

package/dist/components/pie/index.js

@@ -0,0 +1,94 @@
+import * as echarts from 'echarts';
+import { useEffect } from 'react';
+import "./index.scss";
+export default function Pie() {
+  var chartID = 'chart-pie';
+  useEffect(function () {
+    ceartChart();
+  }, []);
+  var ceartChart = function ceartChart() {
+    var myChart = echarts.init(document.getElementById(chartID), null, {
+      renderer: 'svg'
+    });
+    var option = {
+      tooltip: {
+        show: false,
+        className: 'pie-tooltip',
+        trigger: 'item',
+        padding: 0
+      },
+      series: [{
+        type: 'pie',
+        radius: [70, 95],
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: true,
+            formatter: function formatter() {
+              return '';
+            },
+            rich: {
+              n: {
+                height: 40,
+                padding: [0, 0, 12, 0],
+                lineHeight: 16,
+                fontWeight: 500,
+                fontSize: 16,
+                color: '#515e5f',
+                align: 'center'
+              },
+              v: {
+                lineHeight: 36,
+                fontWeight: 800,
+                fontSize: 30,
+                color: '#273333',
+                align: 'center',
+                padding: [0, 0, 15, 0]
+              }
+            }
+          }
+        },
+        data: [{
+          value: 5325,
+          name: 'positive',
+          proportion: 0.0595,
+          type: 1,
+          itemStyle: {
+            color: '#1DA9A0'
+          }
+        }, {
+          value: 1879,
+          name: 'negative',
+          proportion: 0.021,
+          type: 2,
+          itemStyle: {
+            color: '#EE6666'
+          }
+        }, {
+          value: 82344,
+          name: 'neutral',
+          proportion: 0.9195,
+          type: 3,
+          itemStyle: {
+            color: '#bbbbbb'
+          }
+        }],
+        selectedMode: true,
+        selectedOffset: 0,
+        minAngle: 3
+      }]
+    };
+    myChart.setOption(option);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: chartID,
+    className: "onesight-chart-pie"
+  });
+}

package/dist/components/pie/index.scss

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