0.0.1 • Published 5 months ago
@zym-com/echart-map v0.0.1
Install
npm install @zym-com/echart-mapor
yarn add @zym-com/echart-mapBasic Usage
import EchartMap from "@zym-com/echart-map";
import "@zym-com/echart-map/dist/style.css";
function App() {
const options = {
"configuration": {
"dataAnimation": true,
"legendCategoryTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 12,
"fontStyle": "normal"
},
"layoutNumberColumns": 10,
"layoutSpacing": {
"layoutRowSpacing": 30,
"layoutColumnSpacing": 25
},
"legendPosition": 1,
"layoutDeviation": {
"layoutDeviationX": 0,
"layoutDeviationY": 0
},
"legendTransparency": 0.4,
"perspectiveShow": false,
"transformRotateX": 0,
"transformRotateY": 0,
"transformRotateZ": 0,
"timelineOpen": false,
"timelineShow": true,
"timelineAutoPlay": true,
"timelineLoop": true,
"playInterval": 2000,
"timelinePosition": {
"t": "auto",
"r": "20",
"b": "20",
"l": "20"
},
"timelineItemStyleColor": {
"startVal": "rgba(18,149,219,1)",
"endVal": "rgba(18,149,219,1)",
"direction": 0
},
"timelineSymbolType": "circle",
"timelineSymbolSize": {
"w": 20,
"h": 20
},
"timelineLabelTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 8,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"fontStyle": "normal"
},
"timelineLineType": "solid",
"timelineLineWidth": 1,
"timelineLineColor": {
"startVal": "rgba(18, 150, 219,1)",
"endVal": "rgba(18, 150, 219,0.1)",
"direction": 0
},
"timelineActiveItemStyleColor": {
"startVal": "rgba(18,149,219,1)",
"endVal": "rgba(18,149,219,1)",
"direction": 0
},
"timelineActiveSymbolType": "circle",
"timelineActiveSymbolSize": {
"w": 20,
"h": 20
},
"timelineActiveLabelTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 8,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"fontStyle": "normal"
},
"timelineActiveLineType": "solid",
"timelineActiveLineWidth": 1,
"timelineActiveLineColor": {
"startVal": "rgba(18, 150, 219,1)",
"endVal": "rgba(18, 150, 219,0.1)",
"direction": 0
},
"mapTreeSelect": "100000",
"mapLayoutCenter": {
"w": 50,
"h": 50
},
"layoutSize": "100%",
"aspectScale": 0.75,
"geoSilent": false,
"cliclDrillDown": true,
"mapLabelTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 10,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"fontStyle": "normal"
},
"mapLabelRotate": 0,
"mapLabelOffset": {
"X": 0,
"Y": -10
},
"chartColorType": "radialColor",
"chartSolidColor": "rgba(218,222,12,1)",
"mapItemStyleOpacity": 1,
"geoItemShadow": {
"shadowOffsetX": 5,
"shadowOffsetY": 5,
"shadowBlur": 5,
"shadowColor": "rgba(56,164,255,0.26)"
},
"mapItemStyleAreaColor": {
"startVal": "rgba(255,255,0,0.35)",
"endVal": "rgba(255,255,0,1)",
"direction": 0
},
"mapItemStyleAreaColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"mapItemStyleAreaRadialColor": {
"startVal": "rgba(147, 235, 248, 0)",
"endVal": "rgba(147, 235, 248, 0.2)",
"direction": 0
},
"mapItemStyleAreaRadialColorXY": {
"x": 0.5,
"y": 0.5,
"r": 0.8
},
"textureFillImage": "http://192.168.1.14:88/component-resources/2D/other/image1.png",
"repeatType": "repeat",
"geoItemBorderWidth": 0,
"geoItemBorderType": "solid",
"geoItemBorderColor": "rgba(0,0,0,1)",
"geoEmphasisLabelTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 15,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"fontStyle": "normal"
},
"geoEmphasisItemStyleAreaColor": {
"startVal": "rgba(30,231,231,0.35)",
"endVal": "rgba(30,231,231,1)",
"direction": 0
},
"geoEmphasisItemStyleAreaColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"geoEmphasisItemStyleOpacity": 1,
"geoSelectLabelTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 8,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"fontStyle": "normal"
},
"geoSelectItemStyleAreaColor": {
"startVal": "rgba(30,231,231,0.35)",
"endVal": "rgba(30,231,231,1)",
"direction": 0
},
"geoSelectItemStyleAreaColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"geoSelectItemStyleOpacity": 1,
"hoverTrigger": true,
"automaticRotation": false,
"residenceTime": {
"t": 2
},
"showDelay": {
"t": 0
},
"hideDelay": {
"t": 0
},
"transitionDuration": {
"t": 2
},
"alwaysShowContent": false,
"promptBoxsize": {
"promptBoxwidth": 180,
"promptBoxheight": 130
},
"promptBoxMargin": {
"top": 30,
"bottom": 0,
"left": 40,
"right": 0
},
"promptBoxDeviation": {
"deviationX": -20,
"deviationY": -10
},
"toolTipBaseBorderWidth": 0,
"toolTipBaseBorderType": "solid",
"toolTipBaseBorderColor": "rgba(0,0,0,1)",
"promptBoxBackgroundType": "image",
"promptBoxBackgroundColor": {
"startVal": "rgba(24,144,255,0.35)",
"endVal": "rgba(24,144,255,1)",
"direction": 0
},
"promptBoxBackgroundImage": "http://192.168.1.14:88/component-resources/2D/other/top-left.png",
"promptBoxBgBGSize": {
"w": 100,
"h": 100
},
"promptBoxBgBGPosition": {
"w": 50,
"h": 50
},
"promptBoxBorderRadius": 0,
"currentPointImage": "http://192.168.1.14:88/component-resources/2D/other/chinaMap2dBG2.png",
"currentPointWH": {
"w": 50,
"h": 50
},
"currentPointOffset": {
"X": -18,
"Y": -18
},
"currentPointRotate": true,
"currentAreaColorType": "radialColor",
"currentAreaSolidColor": "rgba(218,222,12,1)",
"currentAreaOpacity": 1,
"currentAreaShadow": {
"shadowOffsetX": 5,
"shadowOffsetY": 5,
"shadowBlur": 5,
"shadowColor": "rgba(56,164,255,0.26)"
},
"currentLinearAreaColor": {
"startVal": "rgba(255,255,0,0.35)",
"endVal": "rgba(255,255,0,1)",
"direction": 0
},
"currentLinearAreaColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"currentAreaRadialColor": {
"startVal": "rgba(222,104,20,0.16)",
"endVal": "rgba(222,104,20,1)",
"direction": 0
},
"currentRadialColorXY": {
"x": 0.5,
"y": 0.5,
"r": 0.8
},
"currentAreaBorderWidth": 0,
"currentAreaBorderType": "solid",
"currentAreaBorderColor": "rgba(0,0,0,1)",
"toolTipComType": "custom",
"labelFormatSeries": [
{
"labelLastName": "内蒙古自治区",
"labelNewName": "内蒙"
},
{
"labelLastName": "西藏自治区",
"labelNewName": "西藏"
},
{
"labelLastName": "新疆维吾尔自治区",
"labelNewName": "新疆"
},
{
"labelLastName": "宁夏回族自治区",
"labelNewName": "宁夏"
},
{
"labelLastName": "广西壮族自治区",
"labelNewName": "广西"
},
{
"labelLastName": "香港特别行政区",
"labelNewName": "香港"
},
{
"labelLastName": "澳门特别行政区",
"labelNewName": "澳门"
}
],
"toolTipSeries": [
{
"toolTipFieldName": "",
"toolTipDisplayName": "",
"toolTipUnit": "",
"toolTipMargin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"toolTipOffset": {
"X": 0,
"Y": 0
},
"toolTipLabelTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 12,
"fontStyle": "normal"
},
"toolTipLabelWH": {
"w": 0,
"h": 0
},
"toolTipLabelAlign": "center",
"toolTipLabelMargin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"toolTipLabelOffset": {
"X": 0,
"Y": 0
},
"toolTipLabelWrap": false,
"toolTipValueTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 12,
"fontStyle": "normal"
},
"toolTipValueWH": {
"w": 0,
"h": 0
},
"toolTipValueAlign": "center",
"toolTipValueMargin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"toolTipValueOffset": {
"X": 0,
"Y": 0
},
"toolTipValueWrap": false,
"toolTipUnitTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 12,
"fontStyle": "normal"
},
"toolTipUnitWH": {
"w": 0,
"h": 0
},
"toolTipUnitAlign": "center",
"toolTipUnitMargin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"toolTipUnitOffset": {
"X": 0,
"Y": 0
},
"toolTipUnitWrap": false
}
],
"legend": false,
"legendCategory": true,
"clickInteraction": true,
"mapLabel": true,
"geoItemTextureFill": true,
"geoItemBorderStyle": true,
"toolTipBaseBorderStyle": true,
"currentAreaBorderStyle": true
},
"base": {
"width": 1000,
"height": 800,
"id": "main-1n4A4xh4"
},
"dataSource": [
{
"name": "",
"code": "",
"lnt": "",
"lat": ""
}
],
"childrenComponent": [],
bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}
return (
<>
<EchartMap {...options} />
</>
);
}0.0.1
5 months ago