0.0.2 • Published 4 months ago
@zym-com/echart-radar-base v0.0.2
Install
npm install @zym-com/echart-radar-baseor
yarn add @zym-com/echart-radar-baseBasic Usage
import EchartRadarBase from "@zym-com/echart-radar-base";
import "@zym-com/echart-radar-base/dist/style.css";
function App() {
const options = {
"configuration": {
"radarCenter": {
"X": 40,
"Y": 50
},
"radarRadius": {
"X": 0,
"Y": 70
},
"startAngle": 90,
"splitNumber": 5,
"shape": "polygon",
"axisNameStyleTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 12,
"fontStyle": "normal"
},
"axisNameStyleNameGap": 8,
"axisMin": 0,
"axisMax": 400,
"axisLineStyleColor": "rgba(34,34,34,1)",
"axisLineStyleOpacity": 1,
"axisLineStyleLineType": "solid",
"axisLineStyleLineWidth": 2,
"axisLabelStyleTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 12,
"fontStyle": "normal"
},
"axisLabelStyleMargin": 8,
"splitLineStyleLineType": "solid",
"splitLineStyleLineWidth": 2,
"splitLineStyleOpacity": 1,
"splitAreaStyleOpacity": 1,
"timedRenderingTime": 10,
"legendShow": true,
"legendType": "legendTypePreset",
"legendIcon": "imgApi/component-resources/2D/other/dian1.png",
"legendGraphicalSize": {
"legendIconWidth": 10,
"legendIconHeight": 10
},
"legendIconSize": {
"legendIconWidth": 20,
"legendIconHeight": 20
},
"graphicFillet": 0,
"legendSpacing": 5,
"clickInteraction": true,
"legendCategoryTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 12,
"fontStyle": "normal"
},
"layoutNumberColumns": 1,
"layoutSpacing": {
"layoutRowSpacing": 20,
"layoutColumnSpacing": 10
},
"legendPosition": 5,
"layoutDeviation": {
"layoutDeviationX": 0,
"layoutDeviationY": 0
},
"legendTransparency": 30,
"automaticRotation": false,
"hoverTrigger": true,
"residenceTime": 2,
"promptBoxDeviation": {
"deviationX": 0,
"deviationY": 0
},
"promptBoxBackground": "",
"promptBoxsize": {
"promptBoxwidth": 120,
"promptBoxheight": 200
},
"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"
},
"splitLineColorSeries": [
{
"splitLineColor": "rgba(80,88,97,1)"
},
{
"splitLineColor": "rgba(46,50,59,1)"
}
],
"splitAreaColorSeries": [],
"dataSeriesArray": [
{
"seriesMapping": {
"fieldName": "系列一",
"displayName": "系列一"
},
"legendImage": "",
"seriesLabelStyleShow": false,
"seriesLabelTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 12,
"fontStyle": "normal"
},
"seriesLabelOffset": {
"X": 0,
"Y": 0
},
"seriesLineType": "solid",
"seriesLineWidth": 2,
"seriesLineColor": {
"startVal": "rgba(24, 144, 255, 1)",
"endVal": "rgba(24,144,255,0.35)",
"direction": 0
},
"seriesLineColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"seriesLineColorOpacity": 0.3,
"seriesAreaColor": {
"startVal": "rgba(24,144,255,0.35)",
"endVal": "rgba(24,144,255,1)",
"direction": 0
},
"seriesAreaColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"seriesAreaColorOpacity": 0.3,
"symbolStyleType": "default",
"symbol": "circle",
"symbolStyleColor": "rgba(24, 144, 255, 1)",
"symbolImage": "",
"symbolSize": {
"symbolSizeW": 4,
"symbolSizeH": 4
},
"symbolOffset": {
"symbolOffsetX": 0,
"symbolOffsetY": 0
}
},
{
"seriesMapping": {
"fieldName": "系列二",
"displayName": "系列二"
},
"legendImage": "",
"seriesLabelStyleShow": false,
"seriesLabelTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 12,
"fontStyle": "normal"
},
"seriesLabelOffset": {
"X": 0,
"Y": 0
},
"seriesLineType": "solid",
"seriesLineWidth": 2,
"seriesLineColor": {
"startVal": "rgba(30, 231, 231, 1)",
"endVal": "rgba(24,144,255,0.35)",
"direction": 0
},
"seriesLineColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"seriesLineColorOpacity": 0.3,
"seriesAreaColor": {
"startVal": "rgba(30, 231, 231, 1)",
"endVal": "rgba(24,144,255,0.35)",
"direction": 0
},
"seriesAreaColorXY": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
},
"seriesAreaColorOpacity": 0.3,
"symbolStyleType": "default",
"symbol": "circle",
"symbolStyleColor": "rgba(30, 231, 231, 1)",
"symbolImage": "",
"symbolSize": {
"symbolSizeW": 4,
"symbolSizeH": 4
},
"symbolOffset": {
"symbolOffsetX": 0,
"symbolOffsetY": 0
}
}
],
"axisNameStyle": true,
"axisLineStyle": true,
"axisLabelStyle": false,
"splitLineStyle": true,
"splitAreaStyle": true,
"timedRendering": false,
"legendCategory": true
},
"base": {
"width": 400,
"height": 250
},
"dataSource": [
{
"s": "系列一",
"x": "纬度一",
"y": 180
},
{
"s": "系列二",
"x": "纬度一",
"y": 320
},
{
"s": "系列一",
"x": "纬度二",
"y": 200
},
{
"s": "系列二",
"x": "纬度二",
"y": 120
},
{
"s": "系列一",
"x": "纬度三",
"y": 160
},
{
"s": "系列二",
"x": "纬度三",
"y": 130
},
{
"s": "系列一",
"x": "纬度四",
"y": 230
},
{
"s": "系列二",
"x": "纬度四",
"y": 80
},
{
"s": "系列一",
"x": "纬度五",
"y": 140
},
{
"s": "系列二",
"x": "纬度五",
"y": 210
}
],
bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}
return (
<>
<EchartRadarBase {...options} />
</>
);
}