@zym-com/echart-bar-line
v0.0.3
Published
线柱图
Downloads
3
Readme
Install
npm install @zym-com/echart-bar-lineor
yarn add @zym-com/echart-bar-lineBasic Usage
import EchartBarLine 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": "imgApi/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,
"barWidth": 15,
"barMaxWidth": 0,
"barMinWidth": 0,
"barMinHeight": 0,
"barGap": 40,
"barCategoryGap": 50,
"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": "系列一"
},
"seriesType": "bar",
"legendImage": "",
"legendChecked": true,
"stackValue": "",
"verticalAxisSelection": "YAxis",
"seriesLineLabelStyleShow": false,
"barBGStyleColor": {
"startVal": "rgba(141, 145, 154,0.35)",
"endVal": "rgba(141, 145, 154,1)",
"direction": 0
},
"barBGStyleColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"barBGStyleColorOpacity": 1,
"seriesLabelStyleShow": 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(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(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"
},
"barStyleColor": {
"startVal": "rgba(24,144,255,0.35)",
"endVal": "rgba(24,144,255,1)",
"direction": 0
},
"barStyleColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"barStyleColorOpacity": 1,
"showBackground": false,
"seriesLabelPosition": "top",
"valueLabelTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 12,
"fontStyle": "normal"
},
"labelDeviation": {
"deviationX": 0,
"deviationY": 5
},
"seriesLabelPointShow": false,
"seriesLabelPointWH": {
"x": 15,
"y": 15
},
"seriesLabelPointType": "default",
"seriesLabelPointColor": "rgba(255,255,255,1)",
"seriesLabelPointImage": "",
"seriesLabelPointBorderRadius": 15,
"markPointSeries": [],
"markLineSeries": [],
"cutsomLineDataSeries": [],
"cutsomBarDataSeries": [],
"markPointLabelOffset": {
"x": 0,
"y": 0
},
"cutsombarStyleColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"seriesLineAreaStyle": false
},
{
"seriesMapping": {
"fieldName": "系列二",
"displayName": "系列二"
},
"seriesType": "line",
"legendImage": "",
"legendChecked": true,
"stackValue": "",
"verticalAxisSelection": "YAxis",
"seriesLineLabelStyleShow": false,
"barBGStyleColor": {
"startVal": "rgba(141, 145, 154,0.35)",
"endVal": "rgba(141, 145, 154,1)",
"direction": 0
},
"barBGStyleColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"barBGStyleColorOpacity": 1,
"seriesLabelStyleShow": 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(24,144,255,0.35)",
"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,0.35)",
"direction": 0
},
"areaStyleColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"areaStyleColorOpacity": 0.3,
"symbolStyleType": "default",
"symbol": "circle",
"symbolStyleColor": {
"startVal": "rgba(30, 231, 231, 1)",
"endVal": "rgba(30,231,231,0.35)",
"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, 1)",
"endVal": "rgba(24,144,255,0.35)",
"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"
},
"barStyleColor": {
"startVal": "rgba(24,144,255,0.35)",
"endVal": "rgba(24,144,255,0.35)",
"direction": 0
},
"barStyleColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"barStyleColorOpacity": 1,
"showBackground": false,
"seriesLabelPosition": "top",
"valueLabelTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 12,
"fontStyle": "normal"
},
"labelDeviation": {
"deviationX": 0,
"deviationY": 5
},
"seriesLabelPointShow": false,
"seriesLabelPointWH": {
"x": 15,
"y": 15
},
"seriesLabelPointType": "default",
"seriesLabelPointColor": "rgba(255,255,255,1)",
"seriesLabelPointImage": "",
"seriesLabelPointBorderRadius": 15,
"markPointSeries": [],
"markLineSeries": [],
"cutsomLineDataSeries": [],
"cutsomBarDataSeries": [],
"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
},
{
"s": "系列一",
"x": "02月",
"y": 200
},
{
"s": "系列一",
"x": "03月",
"y": 160
},
{
"s": "系列一",
"x": "04月",
"y": 200
},
{
"s": "系列一",
"x": "05月",
"y": 180
},
{
"s": "系列一",
"x": "06月",
"y": 180
},
{
"s": "系列二",
"x": "01月",
"y": 320
},
{
"s": "系列二",
"x": "02月",
"y": 120
},
{
"s": "系列二",
"x": "03月",
"y": 180
},
{
"s": "系列二",
"x": "04月",
"y": 160
},
{
"s": "系列二",
"x": "05月",
"y": 220
},
{
"s": "系列二",
"x": "06月",
"y": 220
}
],
bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}
return (
<>
<EchartBarLine {...options} />
</>
);
}