npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@zym-com/echart-line-base

v0.0.2

Published

基础折线图

Downloads

0

Readme

Install

npm install @zym-com/echart-bar-line

or

yarn add @zym-com/echart-bar-line

Basic Usage

import EchartLineBase from "@zym-com/echart-bar-line";
import "@zym-com/echart-bar-line/dist/style.css";

function App() {
const options = {
    "configuration": {
        "overallSituationMargin": {
            "top": 50,
            "bottom": 25,
            "left": 45,
            "right": 35
        },
        "dataAnimation": true,
        "legendType": "legendTypePreset",
        "legendIcon": "mgApi/component-resources/2D/other/dian1.png",
        "legendGraphicalSize": {
            "legendIconWidth": 10,
            "legendIconHeight": 10
        },
        "legendIconSize": {
            "legendIconWidth": 10,
            "legendIconHeight": 10
        },
        "graphicFillet": 0,
        "legendSpacing": 3,
        "clickInteraction": true,
        "legendCategoryTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 12,
            "fontStyle": "normal"
        },
        "layoutNumberColumns": 2,
        "layoutSpacing": {
            "layoutRowSpacing": 30,
            "layoutColumnSpacing": 25
        },
        "legendPosition": 1,
        "layoutDeviation": {
            "layoutDeviationX": 0,
            "layoutDeviationY": 0
        },
        "legendTransparency": 30,
        "timedRenderingTime": 10,
        "axisXEnable": true,
        "axisXLabelFormat": "taxonomicType",
        "displayForm": "MM月",
        "axisXLabelExhibition": {
            "axisXLabelRotate": 0
        },
        "axisXLabelDeviation": {
            "axisXLabelDeviationX": 0,
            "axisXLabelDeviationY": 0
        },
        "axisXLabelTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 12,
            "fontStyle": "normal"
        },
        "intervalNumber": 0,
        "axisXLabelWidth": 0,
        "axisXLabelOverflow": "break",
        "axisXAxisColor": "rgba(186,231,255,1)",
        "axisXAxisThickness": 1,
        "axisXScaleColor": "rgba(186,231,255,1)",
        "axisXScaleThickness": 1,
        "axisXScaleLength": 6,
        "dashedLineStyle": "3,3",
        "axisXGridLineColor": "rgba(230,247,255,0.2)",
        "axisXGridLineThickness": 1,
        "axisYEnable": true,
        "axisYType": "value",
        "axisYLogBase": 10,
        "axisYLabelValueRange": {
            "axisYminValue": "",
            "axisYmaxValue": ""
        },
        "axisYNullValueRange": {
            "axisYminValue": "",
            "axisYmaxValue": ""
        },
        "axisYscaleAdaptation": false,
        "axisYLabelsuffixText": "",
        "axisYLabelDeviation": {
            "axisYLabelDeviationX": 0,
            "axisYLabelDeviationY": 0
        },
        "axisYLabelTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 12,
            "fontStyle": "normal"
        },
        "axisYpattern": "quantityConstraint",
        "axisYLabelnumberLabels": 3,
        "axisYLabelstep": 100,
        "axisYLabeldecimalPlaces": 0,
        "axisYLabelUnitContent": "单位",
        "axisYLabelUniTtextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 12,
            "fontStyle": "normal"
        },
        "axisYLabelUnitDeviation": {
            "axisYLabelUnitDeviationX": -30,
            "axisYLabelUnitDeviationY": 0
        },
        "axisYAxisColor": "rgba(186,231,255,1)",
        "axisYAxisThickness": 1,
        "axisYScaleColor": "rgba(186,231,255,1)",
        "axisYScaleThickness": 1,
        "axisYScaleLength": 6,
        "axisYGridDashedStyle": "3,3",
        "axisYGridLineColor": "rgba(230,247,255,0.2)",
        "axisYGridLineThickness": 1,
        "axisZEnable": false,
        "axisZType": "value",
        "axisZLogBase": 10,
        "axisZLabelValueRange": {
            "axisZminValue": "",
            "axisZmaxValue": ""
        },
        "axisZNullValueRange": {
            "axisYminValue": "",
            "axisYmaxValue": ""
        },
        "axisZscaleAdaptation": false,
        "axisZLabelsuffixText": "",
        "axisZLabelDeviation": {
            "axisZLabelDeviationX": 6,
            "axisZLabelDeviationY": 0
        },
        "axisZLabelTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 12,
            "fontStyle": "normal"
        },
        "axisZpattern": "quantityConstraint",
        "axisZLabelnumberLabels": 3,
        "axisZLabelstep": 100,
        "axisZLabeldecimalPlaces": 0,
        "axisZLabelUnitContent": "",
        "axisZLabelUniTtextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 12,
            "fontStyle": "normal"
        },
        "axisZLabelUnitDeviation": {
            "axisZLabelUnitDeviationX": -25,
            "axisZLabelUnitDeviationY": 0
        },
        "axisZAxisColor": "rgba(186,231,255,1)",
        "axisZAxisThickness": 1,
        "axisZScaleColor": "rgba(186,231,255,1)",
        "axisZScaleThickness": 1,
        "axisZScaleLength": 6,
        "axisZGridDashedStyle": "3,3",
        "axisZGridLineColor": "rgba(230,247,255,0.2)",
        "axisZGridLineThickness": 1,
        "automaticRotation": false,
        "hoverTrigger": true,
        "residenceTime": 2,
        "tooltipBoxsize": {
            "w": 10,
            "h": 10
        },
        "promptBoxDeviation": {
            "deviationX": 0,
            "deviationY": 0
        },
        "promptBoxBackground": "",
        "promptBoxsize": {
            "promptBoxwidth": 120,
            "promptBoxheight": 100
        },
        "promptBoxMargin": {
            "top": 13,
            "bottom": 10,
            "left": 12,
            "right": 12
        },
        "frameDatalineHeight": 28,
        "frameDataXAxisTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 16,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 12,
            "fontStyle": "normal"
        },
        "textStyleAlignment": "left",
        "textStyleDeviation": {
            "x": 0,
            "y": 0
        },
        "frameDataSeriesName": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 12,
            "fontStyle": "normal"
        },
        "frameDataSeriesValue": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 12,
            "fontStyle": "normal"
        },
        "suffixContent": "",
        "suffixSpacing": 5,
        "indicatorColor": "rgba(255,255,255,0.3)",
        "controlBarShow": false,
        "brushSelect": false,
        "filterMode": "filter",
        "controlBarHeight": 20,
        "moveHandleSize": 7,
        "controlBarBColor": "rgba(20,95,255,0.1)",
        "controlBarMargin": {
            "marginLeft": 35,
            "marginRight": 35
        },
        "dataRange": {
            "start": 0,
            "end": 35
        },
        "controlBarDetailsColor": "rgba(255,255,255,0.3)",
        "axisYLabelUnitSeries": [],
        "axisZLabelUnitSeries": [],
        "dataSeries": [
            {
                "seriesMapping": {
                    "fieldName": "系列一",
                    "displayName": "系列一"
                },
                "legendImage": "",
                "legendChecked": true,
                "stackValue": "",
                "stepType": "close",
                "verticalAxisSelection": "YAxis",
                "seriesLineLabelStyleShow": false,
                "seriesLineLabelPosition": "top",
                "valueLineLabelTextStyle": {
                    "fontFamily": "Microsoft Yahei",
                    "fontSize": 12,
                    "color": "rgba(255,255,255,1)",
                    "fontWeight": "normal",
                    "letterSpacing": 0,
                    "lineHeight": 12,
                    "fontStyle": "normal"
                },
                "labelLineDeviation": {
                    "deviationX": 0,
                    "deviationY": 0
                },
                "seriesLineType": "solid",
                "seriesLineWidth": 2,
                "seriesLineColor": {
                    "startVal": "rgba(24,144,255,0.35)",
                    "endVal": "rgba(24,144,255,1)",
                    "direction": 0
                },
                "seriesLineColorXY": {
                    "x": 0,
                    "y": 1,
                    "x2": 0,
                    "y2": 0
                },
                "seriesLineColorOpacity": 1,
                "smooth": 0,
                "connectNulls": true,
                "areaStyleColor": {
                    "startVal": "rgba(24,144,255,0.35)",
                    "endVal": "rgba(24,144,255,1)",
                    "direction": 0
                },
                "areaStyleColorXY": {
                    "x": 0,
                    "y": 1,
                    "x2": 0,
                    "y2": 0
                },
                "areaStyleColorOpacity": 0.3,
                "symbolStyleType": "default",
                "symbol": "circle",
                "symbolStyleColor": {
                    "startVal": "rgba(24,144,255,0.35)",
                    "endVal": "rgba(24,144,255,1)",
                    "direction": 0
                },
                "symbolStyleColorXY": {
                    "x": 0,
                    "y": 1,
                    "x2": 0,
                    "y2": 0
                },
                "symbolImage": "",
                "symbolSize": {
                    "symbolSizeW": 5,
                    "symbolSizeH": 5
                },
                "symbolOffset": {
                    "symbolOffsetX": 0,
                    "symbolOffsetY": 0
                },
                "seriesEmphasisScale": false,
                "seriesEmphasisFocus": "none",
                "seriesEmphasisLineType": "solid",
                "seriesEmphasisLineWidth": 2,
                "seriesEmphasisLineColor": {
                    "startVal": "rgba(24,144,255,0.35)",
                    "endVal": "rgba(24,144,255,1)",
                    "direction": 0
                },
                "seriesEmphasisLineColorXY": {
                    "x": 0,
                    "y": 1,
                    "x2": 0,
                    "y2": 0
                },
                "seriesEmphasisLineColorOpacity": 1,
                "seriesEmphasisLabelStyleShow": false,
                "seriesEmphasisValueLabelTextStyle": {
                    "fontFamily": "Microsoft Yahei",
                    "fontSize": 12,
                    "color": "rgba(255,255,255,1)",
                    "fontWeight": "normal",
                    "letterSpacing": 0,
                    "lineHeight": 12,
                    "fontStyle": "normal"
                },
                "markPointSeries": [],
                "markLineSeries": [],
                "cutsomLineDataSeries": [],
                "markPointLabelOffset": {
                    "x": 0,
                    "y": 0
                },
                "triggerCondition": {
                    "filed": "y",
                    "character": "==",
                    "value": "200"
                },
                "seriesLineAreaStyle": false
            },
            {
                "seriesMapping": {
                    "fieldName": "系列二",
                    "displayName": "系列二"
                },
                "legendImage": "",
                "legendChecked": true,
                "stackValue": "",
                "stepType": "close",
                "verticalAxisSelection": "YAxis",
                "seriesLineLabelStyleShow": false,
                "seriesLineLabelPosition": "top",
                "valueLineLabelTextStyle": {
                    "fontFamily": "Microsoft Yahei",
                    "fontSize": 12,
                    "color": "rgba(255,255,255,1)",
                    "fontWeight": "normal",
                    "letterSpacing": 0,
                    "lineHeight": 12,
                    "fontStyle": "normal"
                },
                "labelLineDeviation": {
                    "deviationX": 0,
                    "deviationY": 0
                },
                "seriesLineType": "solid",
                "seriesLineWidth": 2,
                "seriesLineColor": {
                    "startVal": "rgba(30, 231, 231, 1)",
                    "endVal": "rgba(30, 231, 231,0.35)",
                    "direction": 0
                },
                "seriesLineColorXY": {
                    "x": 0,
                    "y": 1,
                    "x2": 0,
                    "y2": 0
                },
                "seriesLineColorOpacity": 1,
                "smooth": 0,
                "connectNulls": true,
                "areaStyleColor": {
                    "startVal": "rgba(30, 231, 231,0.35)",
                    "endVal": "rgba(30, 231, 231,1)",
                    "direction": 0
                },
                "areaStyleColorXY": {
                    "x": 0,
                    "y": 1,
                    "x2": 0,
                    "y2": 0
                },
                "areaStyleColorOpacity": 0.3,
                "symbolStyleType": "default",
                "symbol": "circle",
                "symbolStyleColor": {
                    "startVal": "rgba(30,231,231,0.35)",
                    "endVal": "rgba(30,231,231,1)",
                    "direction": 0
                },
                "symbolStyleColorXY": {
                    "x": 0,
                    "y": 1,
                    "x2": 0,
                    "y2": 0
                },
                "symbolImage": "",
                "symbolSize": {
                    "symbolSizeW": 5,
                    "symbolSizeH": 5
                },
                "symbolOffset": {
                    "symbolOffsetX": 0,
                    "symbolOffsetY": 0
                },
                "seriesEmphasisScale": false,
                "seriesEmphasisFocus": "none",
                "seriesEmphasisLineType": "solid",
                "seriesEmphasisLineWidth": 2,
                "seriesEmphasisLineColor": {
                    "startVal": "rgba(30, 231, 231,0.35)",
                    "endVal": "rgba(30, 231, 231,1)",
                    "direction": 0
                },
                "seriesEmphasisLineColorXY": {
                    "x": 0,
                    "y": 1,
                    "x2": 0,
                    "y2": 0
                },
                "seriesEmphasisLineColorOpacity": 1,
                "seriesEmphasisLabelStyleShow": false,
                "seriesEmphasisValueLabelTextStyle": {
                    "fontFamily": "Microsoft Yahei",
                    "fontSize": 12,
                    "color": "rgba(255,255,255,1)",
                    "fontWeight": "normal",
                    "letterSpacing": 0,
                    "lineHeight": 12,
                    "fontStyle": "normal"
                },
                "markPointSeries": [],
                "markLineSeries": [],
                "cutsomLineDataSeries": [],
                "markPointLabelOffset": {
                    "x": 0,
                    "y": 0
                },
                "triggerCondition": {
                    "filed": "y",
                    "character": "==",
                    "value": "200"
                },
                "seriesLineAreaStyle": false
            }
        ],
        "legend": true,
        "legendCategory": true,
        "timedRendering": false,
        "axisXLabel": true,
        "axisXAxis": true,
        "axisXScale": true,
        "axisXGridLine": false,
        "axisYLabel": true,
        "axisYLabelUnit": true,
        "axisYAxis": false,
        "axisYScale": false,
        "axisYGridLine": true,
        "axisZLabel": true,
        "axisZLabelUnit": false,
        "axisZAxis": true,
        "axisZScale": false,
        "axisZGridLine": true
    },
    "base": {
        "width": 420,
        "height": 210
    },
    "dataSource": [
        {
            "s": "系列一",
            "x": "01月",
            "y": 180,
            "y2": ""
        },
        {
            "s": "系列二",
            "x": "01月",
            "y": 320,
            "y2": ""
        },
        {
            "s": "系列一",
            "x": "02月",
            "y": 200,
            "y2": ""
        },
        {
            "s": "系列二",
            "x": "02月",
            "y": 120,
            "y2": ""
        },
        {
            "s": "系列一",
            "x": "03月",
            "y": 160,
            "y2": ""
        },
        {
            "s": "系列二",
            "x": "03月",
            "y": 180,
            "y2": ""
        },
        {
            "s": "系列一",
            "x": "04月",
            "y": 200,
            "y2": ""
        },
        {
            "s": "系列二",
            "x": "04月",
            "y": 160,
            "y2": ""
        },
        {
            "s": "系列一",
            "x": "05月",
            "y": 180,
            "y2": ""
        },
        {
            "s": "系列二",
            "x": "05月",
            "y": 220,
            "y2": ""
        },
        {
            "s": "系列一",
            "x": "06月",
            "y": 180,
            "y2": ""
        },
        {
            "s": "系列二",
            "x": "06月",
            "y": 220,
            "y2": ""
        }
    ],
   bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}

 return (
    <>
      <EchartLineBase {...options} />
    </>
  );
}