Install
npm install @zym-com/echart-pictorialor
yarn add @zym-com/echart-pictorialBasic Usage
import EchartPictorial from "@zym-com/echart-pictorial";
import "@zym-com/echart-pictorial/dist/style.css";
function App() {
const options = {
"configuration": {
"overallSituationMargin": {
"top": 50,
"bottom": 25,
"left": 45,
"right": 35
},
"dataAnimation": true,
"legendType": "legendTypePreset",
"legendIcon": "",
"legendGraphicalSize": {
"legendIconWidth": 15,
"legendIconHeight": 2
},
"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,
"barWidth": 0,
"barMaxWidth": 0,
"barMinWidth": 0,
"barMinHeight": 0,
"barGap": 0,
"barCategoryGap": 10,
"timedRenderingTime": 10,
"axisXEnable": true,
"axisXPositionFlip": false,
"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,
"axisXInside": false,
"dashedLineStyle": "3,3",
"axisXGridLineColor": "rgba(230,247,255,0.2)",
"axisXGridLineThickness": 1,
"axisYEnable": true,
"axisYLabelValueRange": {
"axisYminValue": "",
"axisYmaxValue": ""
},
"axisYscaleAdaptation": false,
"axisYLabelsuffixText": "",
"axisYLabelDeviation": {
"axisYLabelDeviationX": 6,
"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,
"axisYInside": false,
"axisYGridDashedStyle": "3,3",
"axisYGridLineColor": "rgba(230,247,255,0.2)",
"axisYGridLineThickness": 1,
"axisZEnable": false,
"axisZLabelValueRange": {
"axisZminValue": "",
"axisZmaxValue": ""
},
"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,
"axisZInside": false,
"axisZGridDashedStyle": "3,3",
"axisZGridLineColor": "rgba(230,247,255,0.2)",
"axisZGridLineThickness": 1,
"automaticRotation": false,
"hoverTrigger": true,
"residenceTime": 2,
"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",
"seriesZindex": 1,
"seriesLineColor": {
"startVal": "rgba(24,144,255,0.35)",
"endVal": "rgba(24,144,255,1)",
"direction": 0
},
"symbolStyleType": "default",
"symbol": "rect",
"symbolSvgPath": "M29.902,23.275c1.86,0,3.368-1.506,3.368-3.365c0-1.859-1.508-3.365-3.368-3.365 c-1.857,0-3.365,1.506-3.365,3.365C26.537,21.769,28.045,23.275,29.902,23.275z M36.867,30.74c-1.666-0.467-3.799-1.6-4.732-4.199 c-0.932-2.6-3.131-2.998-4.797-2.998s-7.098,3.894-7.098,3.894c-1.133,1.001-2.1,6.502-0.967,6.769 c1.133,0.269,1.266-1.533,1.934-3.599c0.666-2.065,3.797-3.466,3.797-3.466s0.201,2.467-0.398,3.866 c-0.599,1.399-1.133,2.866-1.467,6.198s-1.6,3.665-3.799,6.266c-2.199,2.598-0.6,3.797,0.398,3.664 c1.002-0.133,5.865-5.598,6.398-6.998c0.533-1.397,0.668-3.732,0.668-3.732s0,0,2.199,1.867c2.199,1.865,2.332,4.6,2.998,7.73 s2.332,0.934,2.332-0.467c0-1.401,0.269-5.465-1-7.064c-1.265-1.6-3.73-3.465-3.73-5.265s1.199-3.732,1.199-3.732 c0.332,1.667,3.335,3.065,5.599,3.399C38.668,33.206,38.533,31.207,36.867,30.74z",
"symbolImage": "",
"symbolSize": {
"symbolSizeW": 20,
"symbolSizeH": 4
},
"symbolOffset": {
"symbolOffsetX": 0,
"symbolOffsetY": 0
},
"seriesLineColorOpacity": 1,
"symbolRotate": 0,
"symbolRepeat": true,
"symbolRepeatNumber": 0,
"symbolRepeatDirection": "start",
"symbolMargin": 10,
"symbolClip": false,
"seriesLineType": "solid",
"seriesLineWidth": 2,
"seriesBorderColor": {
"startVal": "rgba(24,144,255,0.35)",
"endVal": "rgba(24,144,255,0.35)",
"direction": 0
},
"symbolBoundingDataShow": false,
"symbolBoundingDataType": "series",
"symbolBoundingData": 400,
"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": 0
},
"markPointSeries": [],
"markLineSeries": []
},
{
"seriesMapping": {
"fieldName": "系列二",
"displayName": "系列二"
},
"legendImage": "",
"verticalAxisSelection": "YAxis",
"seriesZindex": 1,
"seriesLineColor": {
"startVal": "rgba(30,231,231,0.35)",
"endVal": "rgba(30,231,231,1)",
"direction": 0
},
"symbolStyleType": "default",
"symbol": "rect",
"symbolSvgPath": "M29.902,23.275c1.86,0,3.368-1.506,3.368-3.365c0-1.859-1.508-3.365-3.368-3.365 c-1.857,0-3.365,1.506-3.365,3.365C26.537,21.769,28.045,23.275,29.902,23.275z M36.867,30.74c-1.666-0.467-3.799-1.6-4.732-4.199 c-0.932-2.6-3.131-2.998-4.797-2.998s-7.098,3.894-7.098,3.894c-1.133,1.001-2.1,6.502-0.967,6.769 c1.133,0.269,1.266-1.533,1.934-3.599c0.666-2.065,3.797-3.466,3.797-3.466s0.201,2.467-0.398,3.866 c-0.599,1.399-1.133,2.866-1.467,6.198s-1.6,3.665-3.799,6.266c-2.199,2.598-0.6,3.797,0.398,3.664 c1.002-0.133,5.865-5.598,6.398-6.998c0.533-1.397,0.668-3.732,0.668-3.732s0,0,2.199,1.867c2.199,1.865,2.332,4.6,2.998,7.73 s2.332,0.934,2.332-0.467c0-1.401,0.269-5.465-1-7.064c-1.265-1.6-3.73-3.465-3.73-5.265s1.199-3.732,1.199-3.732 c0.332,1.667,3.335,3.065,5.599,3.399C38.668,33.206,38.533,31.207,36.867,30.74z",
"symbolImage": "",
"symbolSize": {
"symbolSizeW": 20,
"symbolSizeH": 4
},
"symbolOffset": {
"symbolOffsetX": 0,
"symbolOffsetY": 0
},
"seriesLineColorOpacity": 1,
"symbolRotate": 0,
"symbolRepeat": true,
"symbolRepeatNumber": 0,
"symbolRepeatDirection": "start",
"symbolMargin": 10,
"symbolClip": false,
"seriesLineType": "solid",
"seriesLineWidth": 2,
"seriesBorderColor": {
"startVal": "rgba(24,144,255,0.35)",
"endVal": "rgba(24,144,255,0.35)",
"direction": 0
},
"symbolBoundingDataShow": false,
"symbolBoundingDataType": "series",
"symbolBoundingData": 400,
"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": 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": 600,
"height": 400
},
"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 (
<>
<EchartPictorial {...options} />
</>
);
}