0.0.2 • Published 4 months ago
@zym-com/echart-bar-interval-horizontal v0.0.2
Install
npm install @zym-com/echart-bar-interval-horizontalor
yarn add @zym-com/echart-bar-interval-horizontalBasic Usage
import EchartBarIntervalHorizontal from "@zym-com/echart-bar-interval-horizontal";
import "@zym-com/echart-bar-interval-horizontal/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,
"barWidth": 10,
"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,
"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,
"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": 140,
"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": [
{
"valueRange": {
"min": "0",
"max": "1000"
},
"unitPrefix": "千",
"unitScale": 1000
}
],
"dataSeries": [
{
"seriesMapping": {
"fieldName": "系列一",
"displayName": "系列一"
},
"legendImage": "",
"legendChecked": true,
"stackValue": "",
"verticalAxisSelection": "YAxis",
"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,
"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,
"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,
"seriesBotLabelStyleShow": false,
"seriesBotLabelPosition": "top",
"seriesBotLabelDeviation": {
"deviationX": 0,
"deviationY": 25
},
"seriesBotLabelPointShow": false,
"seriesBotLabelPointWH": {
"x": 15,
"y": 15
},
"seriesBotLabelPointType": "default",
"seriesBotLabelPointColor": "rgba(255,255,255,1)",
"seriesBotLabelPointImage": "",
"seriesBotLabelPointBorderRadius": 15,
"markPointSeries": [],
"markLineSeries": []
},
{
"seriesMapping": {
"fieldName": "系列二",
"displayName": "系列二"
},
"legendImage": "",
"legendChecked": true,
"stackValue": "",
"verticalAxisSelection": "YAxis",
"barStyleColor": {
"startVal": "rgba(30,231,231,0.35)",
"endVal": "rgba(30,231,231,1)",
"direction": 0
},
"barStyleColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"barStyleColorOpacity": 1,
"showBackground": 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,
"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,
"seriesBotLabelStyleShow": false,
"seriesBotLabelPosition": "top",
"seriesBotLabelDeviation": {
"deviationX": 0,
"deviationY": 25
},
"seriesBotLabelPointShow": false,
"seriesBotLabelPointWH": {
"x": 15,
"y": 15
},
"seriesBotLabelPointType": "default",
"seriesBotLabelPointColor": "rgba(255,255,255,1)",
"seriesBotLabelPointImage": "",
"seriesBotLabelPointBorderRadius": 15,
"markPointSeries": [],
"markLineSeries": []
}
],
"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": 250
},
"dataSource": [
{
"s": "系列一",
"x": "01月",
"y": 180,
"y2": 280
},
{
"s": "系列一",
"x": "02月",
"y": 200,
"y2": 350
},
{
"s": "系列一",
"x": "03月",
"y": 160,
"y2": 210
},
{
"s": "系列一",
"x": "04月",
"y": 200,
"y2": 340
},
{
"s": "系列一",
"x": "05月",
"y": 180,
"y2": 241
},
{
"s": "系列一",
"x": "06月",
"y": 180,
"y2": 265
},
{
"s": "系列二",
"x": "01月",
"y": 320,
"y2": 410
},
{
"s": "系列二",
"x": "02月",
"y": 120,
"y2": 450
},
{
"s": "系列二",
"x": "03月",
"y": 180,
"y2": 270
},
{
"s": "系列二",
"x": "04月",
"y": 160,
"y2": 250
},
{
"s": "系列二",
"x": "05月",
"y": 220,
"y2": 350
},
{
"s": "系列二",
"x": "06月",
"y": 220,
"y2": 390
}
],
bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}
return (
<>
<EchartBarIntervalHorizontal {...options} />
</>
);
}