箱线图
npm install @zym-com/echart-boxplot``bash`
npm install @zym-com/echart-boxplot
or
`bash`
yarn add @zym-com/echart-boxplot
`jsx
import EchartBoxplot from "@zym-com/echart-boxplot";
import "@zym-com/echart-boxplot/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": 15,
"legendIconHeight": 10
},
"legendIconSize": {
"legendIconWidth": 15,
"legendIconHeight": 2
},
"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,
"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": 20,
"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": {
"textStyleDeviationx": 0,
"textStyleDeviationy": 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"
},
"indicatorColor": "rgba(255,255,255,0.3)",
"dataSeries": [
{
"seriesMapping": {
"fieldName": "系列一",
"displayName": "系列一"
},
"legendImage": "",
"verticalAxisSelection": "YAxis",
"seriesBoxWidth": {
"min": "7",
"max": "50"
},
"seriesItemColor": {
"startVal": "rgba(24,144,255,0.35)",
"endVal": "rgba(24,144,255,0.35)",
"direction": 0
},
"seriesItemColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"seriesItemColorOpacity": 1,
"seriesBorderType": "solid",
"seriesBorderWidth": 1,
"seriesBorderColor": {
"startVal": "rgba(24,144,255,0.35)",
"endVal": "rgba(24,144,255,1)",
"direction": 0
},
"seriesBorderColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"seriesEmphasisFocus": "none",
"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,
"seriesEmphasisBorderType": "solid",
"seriesEmphasisBorderWidth": 2,
"seriesEmphasisBorderColor": {
"startVal": "rgba(24,144,255,0.35)",
"endVal": "rgba(24,144,255,1)",
"direction": 0
},
"seriesEmphasisBorderColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"markPointSeries": [],
"markLineSeries": []
},
{
"seriesMapping": {
"fieldName": "系列二",
"displayName": "系列二"
},
"legendImage": "",
"verticalAxisSelection": "YAxis",
"seriesBoxWidth": {
"min": "7",
"max": "50"
},
"seriesItemColor": {
"startVal": "rgba(30,232,232,0.35)",
"endVal": "rgba(30,232,232,1)",
"direction": 0
},
"seriesItemColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"seriesItemColorOpacity": 1,
"seriesBorderType": "solid",
"seriesBorderWidth": 1,
"seriesBorderColor": {
"startVal": "rgba(30,232,232,0.35)",
"endVal": "rgba(30,232,232,1)",
"direction": 0
},
"seriesBorderColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"seriesEmphasisFocus": "none",
"seriesEmphasisLineColor": {
"startVal": "rgba(30,232,232,0.35)",
"endVal": "rgba(30,232,232,1)",
"direction": 0
},
"seriesEmphasisLineColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"seriesEmphasisLineColorOpacity": 1,
"seriesEmphasisBorderType": "solid",
"seriesEmphasisBorderWidth": 2,
"seriesEmphasisBorderColor": {
"startVal": "rgba(30,232,232,0.35)",
"endVal": "rgba(30,232,232,1)",
"direction": 0
},
"seriesEmphasisBorderColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"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": 210
},
"dataSource": [
{
"s": "系列一",
"x": "01月",
"y": [
3,
5,
8,
12,
13
]
},
{
"s": "系列二",
"x": "01月",
"y": [
5,
8,
10,
11,
14
]
},
{
"s": "系列一",
"x": "02月",
"y": [
2,
5,
6,
9,
13
]
},
{
"s": "系列二",
"x": "02月",
"y": [
1,
3,
5,
7,
9
]
},
{
"s": "系列一",
"x": "03月",
"y": [
2,
4,
7,
11,
14
]
},
{
"s": "系列二",
"x": "03月",
"y": [
4,
6,
9,
13,
15
]
},
{
"s": "系列一",
"x": "04月",
"y": [
3,
6,
7,
10,
12
]
},
{
"s": "系列二",
"x": "04月",
"y": [
2,
4,
6,
8,
11
]
},
{
"s": "系列一",
"x": "05月",
"y": [
1,
3,
6,
9,
12
]
},
{
"s": "系列二",
"x": "05月",
"y": [
3,
5,
8,
12,
14
]
},
{
"s": "系列一",
"x": "06月",
"y": [
2,
5,
7,
10,
13
]
},
{
"s": "系列二",
"x": "06月",
"y": [
1,
3,
5,
7,
10
]
}
],
bindCallbackParams:(evenName: string, data: Record
}
return (
<>
);
}
``