1. Use event mapping

Index. Js file

this.emit('itemClick', e.point.options)
Copy the code

Package. The json file

"itemClick": {
    "description": "Click event"."fields": {
      "id": {
        "description": "id"}}}Copy the code

2. Quick configuration of JSON panel

array

"array": {
    "name": "Header content block"."type": "array"."default": [{
        "name": "1"."width": "Rgba (233233233,0.1)"}, {"name": "2"."width": "#83C686",}],"child": {
        "name": "Column <%= I +1%"."type": "object"."child": {
            "width": {
                "name": "Width"."type": "text"."default": "<%=step=i+1%>"}}}},Copy the code

border

"border": {
    "name": "Border"."type": "group"."children": {
        "style": {
            "description": "Border Type"."name": "style"."type": "select"."useFont": true."default": "dashed"."options": [{
                    "value": "dotted"."label": "dotted"
                },
                {
                    "value": "dashed"."label": "dashed"
                },
                {
                    "value": "solid"."label": "solid"
                },
                {
                    "value": "double"."label": "double"
                },
                {
                    "value": "groove"."label": "groove"
                },
                {
                    "value": "ridge"."label": "ridge"
                },
                {
                    "value": "inset"."label": "inset"
                },
                {
                    "value": "outset"."label": "outset"
                },
                {
                    "value": "hidden"."label": "hidden"}},"width": {
            "description": "Border width"."name": "width"."type": "number"."default": "1"."suffix": "px"
        },
        "color": {
            "description": "Border color"."name": "color"."type": "fill"."default": "#e69f3c"."suffix": "px"}}}Copy the code

color

"bgColor": {
    "name": "Color"."type": "fill"."default": "#fff"
}

Copy the code

Group

"Group": {
    "name": "Group group group group in"."type": "group"."children": {}}Copy the code

heightWidth

"size": {
    "name": "Size"."type": "group"."children": {
        "width": {
            "name": "Width"."type": "number"."default": "400"."suffix": "px"
        },
        "heihgt": {
            "name": "Height"."type": "number"."default": "50"."suffix": "px"}}}Copy the code

img

"imgs": {
    "name": "Built-in images"."type": "group"."children": {
        "size": {
            "name": "Size"."type": "number"."default": 70."suffix": "%"
        },
        "url": {
            "name": "Picture address"."type": "image"."default": "http://datav.oss-cn-hangzhou.aliyuncs.com/uploads/images/c4ba3c6518c1997f4baa612a600c3fbe.png"}}}Copy the code

margin

{
    "marginc": {
        "name": "Margin"."type": "group"."children": {
            "top": {
                "name": "Top distance"."type": "number"."default": 0."suffix": "px"
            },
            "right": {
                "name": "Right margin"."type": "number"."default": 0."suffix": "px"
            },
            "bottom": {
                "name": "Bottom distance"."type": "number"."default": 0."suffix": "px"
            },
            "left": {
                "name": "Left margin"."type": "number"."default": 0."suffix": "px"}}},"margin": {
        "name": "Margin"."type": "margin"."enableHide": true."default": {
            "top": 10."left": 10."right": 10."bottom": 10}}} {"marginComponents": {
        "name": "Margin"."type": "margin"."enableHide": true."components": ["top"."bottom"]}}Copy the code

menu

{
	"menu": {
		"name": "Menu"."type": "menu"."children": {
			"whole": {
				"name": "Overall configuration"."mode": "single"."children": {
					"colWidth": {
						"description": "Please control the width and height of the chart to control whether to overhide and automatically scroll."."name": "Width per column"."type": "slider"."default": 300."step": 1."min": 0."max": 2000."suffix": "px"}}},"animation": {
				"name": "Animation Configuration"."mode": "single"."children": {
					"colWidth": {
						"description": "Please control the width and height of the chart to control whether to overhide and automatically scroll."."name": "Width per column"."type": "slider"."default": 300."step": 1."min": 0."max": 2000."suffix": "px"
					}
				}
			}
		}
	}

}

Copy the code

number

"nmuner": {
    "name": "Digital"."type": "number"."default": "0"."suffix": "px"
}

Copy the code

padding

"padding": {
    "name": "Inside margin"."type": "group"."children": {
        "top": {
            "name": "Top distance"."type": "number"."default": 0."suffix": "px"
        },
        "right": {
            "name": "Right margin"."type": "number"."default": 0."suffix": "px"
        },
        "bottom": {
            "name": "Bottom distance"."type": "number"."default": 0."suffix": "px"
        },
        "left": {
            "name": "Left margin"."type": "number"."default": 0."suffix": "px"}}}Copy the code