Install
npm install @zym-com/echart-scatter-baseor
yarn add @zym-com/echart-scatter-baseBasic Usage
import EchartScatterBase from "@zym-com/echart-scatter-base";
import "@zym-com/echart-scatter-base/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": 10,
"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,
"axisXLabelValueRange": {
"axisXminValue": "",
"axisXmaxValue": ""
},
"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": 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",
"symbolStyleType": "default",
"symbol": "circle",
"symbolImage": "",
"symbolOffset": {
"symbolOffsetX": 0,
"symbolOffsetY": 0
},
"seriesSymbolSize": {
"w": 10,
"h": 10
},
"seriesLineColor": {
"startVal": "rgba(24, 144, 255, 0.35)",
"endVal": "rgba(24, 144, 255, 1)",
"direction": 90
},
"seriesLineColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"seriesLineColorOpacity": 1,
"seriesLabelStyleShow": false,
"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": [],
"markPointLabelOffset": {
"x": 0,
"y": 0
}
},
{
"seriesMapping": {
"fieldName": "系列二",
"displayName": "系列二"
},
"legendImage": "",
"verticalAxisSelection": "YAxis",
"symbolStyleType": "default",
"symbol": "circle",
"symbolImage": "",
"symbolOffset": {
"symbolOffsetX": 0,
"symbolOffsetY": 0
},
"seriesSymbolSize": {
"w": 10,
"h": 10
},
"seriesLineColor": {
"startVal": "rgba(30, 231, 231, 0.35)",
"endVal": "rgba(30, 231, 231, 1)",
"direction": 90
},
"seriesLineColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"seriesLineColorOpacity": 1,
"seriesLabelStyleShow": false,
"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": [],
"markPointLabelOffset": {
"x": 0,
"y": 0
}
}
],
"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": 177,
"y": 770,
"value": 243
},
{
"s": "系列一",
"x": 176,
"y": 400,
"value": 123
},
{
"s": "系列一",
"x": 200,
"y": 420,
"value": 163
},
{
"s": "系列一",
"x": 150,
"y": 456,
"value": 143
},
{
"s": "系列一",
"x": 177,
"y": 165,
"value": 164
},
{
"s": "系列一",
"x": 185,
"y": 243,
"value": 203
},
{
"s": "系列一",
"x": 190,
"y": 450,
"value": 143
},
{
"s": "系列一",
"x": 195,
"y": 550,
"value": 123
},
{
"s": "系列一",
"x": 165,
"y": 696,
"value": 153
},
{
"s": "系列二",
"x": 200,
"y": 700,
"value": 148
},
{
"s": "系列二",
"x": 185,
"y": 600,
"value": 93
},
{
"s": "系列二",
"x": 183,
"y": 450,
"value": 153
},
{
"s": "系列二",
"x": 159,
"y": 134,
"value": 133
},
{
"s": "系列二",
"x": 173,
"y": 569,
"value": 243
},
{
"s": "系列二",
"x": 156,
"y": 666,
"value": 243
},
{
"s": "系列二",
"x": 173,
"y": 279,
"value": 203
},
{
"s": "系列二",
"x": 150,
"y": 209,
"value": 203
},
{
"s": "系列二",
"x": 163,
"y": 369,
"value": 453
},
{
"s": "系列二",
"x": 200,
"y": 200,
"value": 253
}
],
bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}
return (
<>
<EchartScatterBase {...options} />
</>
);
}