echarts property settings (complete)

Posted Jun 5, 202015 min read

//The default background of the whole picture

//backgroundColor: rgba(0,0,0,0) ,

//Default swatches

color:[`'#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed' `,

'#ff69b4'`,'#ba55d3','#cd5c5c','#ffa500','#40e0d0',`

'#1e90ff'`,'#ff6347','#7b68ee','#00fa9a','#ffd700',`

'#6699FF'`,'#ff6666','#3cb371','#b8860b','#30e0e0'],`

//Chart title

title:{

x: 'left'`, //Horizontal placement position, left-aligned by default, optional:`

//'center' ¦'left' ¦'right'

//¦ {number}(x coordinate, unit px)

y: 'top'`, //Vertical placement position, the default is the top of the whole picture, optional:`

//'top' ¦'bottom' ¦'center'

//¦ {number}(y coordinate, unit px)

//textAlign:null //horizontal alignment, default is automatically adjusted according to x settings

backgroundColor: 'rgba(0,0,0,0)'`,`

borderColor: '#ccc'`, //title border color`

borderWidth:0, //Header border line width, unit px, default is 0(no border)

padding:5, //Title padding, unit px, default padding in each direction is 5,

//Accept the array to set the upper right and lower left margins, same as css

itemGap:10, //Vertical spacing of main and subtitles, unit px, default is 10,

textStyle:{

fontSize:18,

fontWeight: 'bolder'`,`

color: '#333' â â â â â â â â â â â â â ties â the main title text color`

},

subtextStyle:{

color: '#aaa' //Subtitle text color`

}

},

`//Legend

legend:{

orient: 'horizontal'`, //layout, the default is horizontal layout, optional:`

//'horizontal' ¦'vertical'

x: 'center'`, //Horizontal placement position, the default is to center the whole picture, optional:`

//'center' ¦'left' ¦'right'

//¦ {number}(x coordinate, unit px)

y: 'top'`, //Vertical placement position, the default is the top of the whole picture, optional:`

//'top' ¦'bottom' ¦'center'

//¦ {number}(y coordinate, unit px)

backgroundColor: 'rgba(0,0,0,0)'`,`

borderColor: '#ccc'`, //Legend border color`

borderWidth:0, //Legend border line width, unit px, default is 0(no border)

padding:5, `//Legend padding, unit px, default padding in each direction is 5,

//Accept the array to set the upper right and lower left margins, same as css

itemGap:10, //The interval between each item, unit px, default is 10,

//Horizontal spacing for horizontal layout and vertical spacing for vertical layout

itemWidth:20, //Legend graphic width

itemHeight:14, ``//Legend graphic height

textStyle:{

color: '#333' â â â â â â â â â â â â â â s in the legend text color`

}

},

//value range

dataRange:{

orient: 'vertical'`, //Layout, the default is vertical layout, optional:`

//'horizontal' ¦'vertical'

x: 'left'`, //Horizontal placement position, the default is left alignment of the whole image, optional:`

//'center' ¦'left' ¦'right'

//¦ {number}(x coordinate, unit px)

y: 'bottom'`, //Vertical placement position, the default is the bottom of the whole picture, optional:`

//'top' ¦'bottom' ¦'center'

//¦ {number}(y coordinate, unit px)

backgroundColor: 'rgba(0,0,0,0)'`,`

borderColor: '#ccc'`, //Range border color`

borderWidth:0, //Range border width, unit px, default is 0(no border)

padding:5, //Range of padding, unit px, default padding in each direction is 5,

//Accept the array to set the upper right and lower left margins, same as css

itemGap:10, //The interval between each item, unit px, default is 10,

//Horizontal spacing for horizontal layout and vertical spacing for vertical layout

itemWidth:20, //Range graphics width, linear gradient horizontal layout width is this value * 10

itemHeight:14, ``//Range graphics height, linear gradient vertical layout height is this value * 10

splitNumber:5, //The number of split segments, the default is 5, when 0 is a linear gradient

color:[`'#1e90ff','#f0ffff'],//color`

//text:['High','Low'], \\ \\ //text, the default is numeric text

textStyle:{

color: '#333' //The text color of the range`

}

},

toolbox:{

orient: 'horizontal'`, //layout, the default is horizontal layout, optional:`

//'horizontal' ¦'vertical'

x: 'right'`, //Horizontal placement position, the default is right-alignment of the whole picture, optional:`

//'center' ¦'left' ¦'right'

//¦ {number}(x coordinate, unit px)

y: 'top'`, //Vertical placement position, the default is the top of the whole picture, optional:`

//'top' ¦'bottom' ¦'center'

//¦ {number}(y coordinate, unit px)

color:[`'#1e90ff','#22bb22','#4b0082','#d2691e' `),

backgroundColor: 'rgba(0,0,0,0)'`, //toolbox background color`

borderColor: '#ccc'`, //toolbox border color`

borderWidth:0, //Toolbox border line width, unit px, default is 0(no border)

padding:5, //Toolbox padding, unit px, default padding in each direction is 5,

//Accept the array to set the upper right and lower left margins, same as css

itemGap:10, //The interval between each item, unit px, default is 10,

//Horizontal spacing for horizontal layout and vertical spacing for vertical layout

itemSize:16, ``//Toolbox graphic width

featureImageIcon:{}, //custom image icon

featureTitle:{

mark : Auxiliary line switch'`,`

markUndo : Delete auxiliary line'`,`

markClear : Empty auxiliary line'`,`

dataZoom : Zone Zoom\,`

dataZoomReset : Zone zoom back'`,`

dataView : 'data view'`,`

lineChart : Line chart toggle' `,`

barChart:``'bar chart switch' `,`

restore : 'Restore'`,`

saveAsImage : 'Save as picture'

}

},

//prompt box

tooltip:{

trigger: 'item'`, //Trigger type, default data trigger, see the figure below, optional:'item' ¦'axis'`

showDelay:20, //Display delay, add display delay to avoid frequent switching, unit ms

hideDelay:100, //Hide delay, unit ms

transitionDuration:0.4, //animation transition time, unit s

backgroundColor: rgba(0,0,0,0.7)'`, //Prompt the background color, the default is black with transparency 0.7

borderColor: '#333'`, //prompt border color`

borderRadius:4, //Tip border rounded corners, unit px, default is 4

borderWidth:0, //hint border line width, unit px, default is 0(no border)

padding:5, //Prompt padding, unit px, default padding in each direction is 5,

//Accept the array to set the upper right and lower left margins, same as css

axisPointer:{ //Coordinate axis indicator, coordinate axis trigger is valid

type : 'line'`, //The default is a straight line, optional:'line' |'shadow'`

lineStyle:{ //line indicator style setting

color: '#48b'`,`

width:2,

type: 'solid'

},

shadowStyle:{ //Shadow indicator style setting

width: 'auto'`, //shadow size`

color: rgba(150,150,150,0.3)'//shadow color`

}

},

textStyle:{

color: '#fff'

}

},

//Area zoom controller

dataZoom:{

orient: 'horizontal'`, //layout, the default is horizontal layout, optional:`

/`/'horizontal' ¦'vertical'`

//x:{number}, â â â â â â â â â â â â s horizontal placement position, the default is to adapt to grid parameters, and the options are:

//{number}(x coordinate, unit px)

//y:{number}, //Vertical placement position, the default is to adapt to grid parameters, optional:

//{number}(y coordinate, unit px)

//width:{number}, //Specify the width, the default is to adapt to grid parameters in horizontal layout

//height:{number}, //Specify the height, the default is to adapt to the grid parameters in vertical layout

backgroundColor: 'rgba(0,0,0,0)'`, //background color`

dataBackgroundColor: '#eee'`, //data background color`

fillerColor: 'rgba(144,197,237,0.2)'`, //fill color`

handleColor: rgba(70,130,180,0.8)' //handle color`

},

//Grid

grid:{

x:80,

y:60,

x2:80,

y2:60,

//width:{totalWidth}-x-x2,

//height:{totalHeight}-y-y2,

backgroundColor: 'rgba(0,0,0,0)'`,`

borderWidth:1,

borderColor: '#ccc'

},

//Category axis

categoryAxis:{

position: 'bottom'`, //position`

nameLocation: 'end'`, //coordinate name location, support'start' |'end'`

boundaryGap: true`, //blank strategy at the beginning and end of the category`

axisLine:{ //coordinate axis

show: true`, //default display, attribute show controls display or not

lineStyle:{ //attribute lineStyle controls line style

color: '#48b'`,`

width:2,

type: 'solid'

}

},

axisTick:{ //coordinate axis small mark

show: true`, //The property show controls whether to show or not, by default it does not show `

interval: 'auto'`,`

//onGap:null,

inside : false`, //Control whether the small mark is in the grid`

length :5, //The attribute length controls the line length

lineStyle:{ //attribute lineStyle controls line style

color: '#333'`,`

width:1

}

},

axisLabel:{ //coordinate axis text label, see axis.axisLabel for details

show: true`,`

interval: 'auto'`,`

rotate:0,

margin:8,

//formatter:null,

textStyle:{ `//The rest of the attributes use the global text style by default, see TEXTSTYLE for details

color: '#333'

}

},

splitLine:{ //Divider line

show: true`, //default display, attribute show controls display or not

//onGap:null,

lineStyle:{ //property lineStyle(see lineStyle for details) controls line style

color:[`'#ccc' `),

width:1,

type: 'solid'

}

},

splitArea:{ //separate area

show: false`, //Not displayed by default, the attribute show controls whether to display or not`

//onGap:null,

areaStyle:{ //attribute areaStyle(see areaStyle for details) controls the area style

color:[`'rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'`` ``````

}

}

},

//Default parameter of numeric coordinate axis

valueAxis:{

position: 'left'`, //position`

nameLocation: 'end'`, //coordinate name location, support'start' |'end'`

nameTextStyle:{}, //Coordinate axis text style, default is global style

boundaryGap:[0, 0], //blank value strategy at the beginning and end of the value

splitNumber:5, //The number of split segments, the default is 5

axisLine:{ //coordinate axis

show: true`, //default display, attribute show controls display or not

lineStyle:{ //attribute lineStyle controls line style

color: '#48b'`,`

width:2,

type: 'solid'

}

},

axisTick:{ //coordinate axis small mark

show: false`, //The property show controls whether to display it or not, by default it is not displayed`

inside : false`, //Control whether the small mark is in the grid`

length :5, //The attribute length controls the line length

lineStyle:{ //attribute lineStyle controls line style

color: '#333'`,`

width:1

}

},

axisLabel:{ //coordinate axis text label, see axis.axisLabel for details

show: true`,`

rotate:0,

margin:8,

//formatter:null,

textStyle:{ `//The rest of the attributes use the global text style by default, see TEXTSTYLE for details

color: '#333'

}

},

splitLine:{ //Divider line

show: true`, //default display, attribute show controls display or not

lineStyle:{ //property lineStyle(see lineStyle for details) controls line style

color:[`'#ccc' `),

width:1,

type: 'solid'

}

},

splitArea:{ //separate area

show: false`, //Not displayed by default, the attribute show controls whether to display or not`

areaStyle:{ //attribute areaStyle(see areaStyle for details) controls the area style

color:[`'rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'`` ``````

}

}

},

polar:{

center:[`'50%',` `'50%'], //default global center`

radius : '75%'`,`

startAngle:90,

splitNumber:5,

name:{

show: true`,`

textStyle:{ `//The rest of the attributes use the global text style by default, see TEXTSTYLE for details

color: '#333'

}

},

axisLine:{ //coordinate axis

show: true`, //default display, attribute show controls display or not

lineStyle:{ //attribute lineStyle controls line style

color: '#ccc'`,`

width:1,

type: 'solid'

}

},

axisLabel:{ //coordinate axis text label, see axis.axisLabel for details

show: false`,`

textStyle:{ `//The rest of the attributes use the global text style by default, see TEXTSTYLE for details

color: '#333'

}

},

splitArea:{

show : true`,`

areaStyle:{

color:[`'rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'`` ``````

}

},

splitLine:{

show : true`,`

lineStyle:{

width:1,

color : '#ccc'

}

}

},

//Column chart default parameters

bar:{

barMinHeight:0, //The minimum height is changed to 0`

//barWidth:null, //default adaptive

barGap: '30%'`, //Distance between bars, the default is 30%of the width of the bar, and a fixed value can be set`

barCategoryGap: '20%'`, //column distance between categories, default is 20%of category spacing, can be set to a fixed value`

itemStyle:{

normal:{

//color:'Different',

barBorderColor: '#fff'`, //Bar edge\

barBorderRadius:0,``//Bar corner rounded corners, unit px, default is 0

barBorderWidth:1, ``//The width of the bar border, in px, default is 1

label:{

show: false

//position:The default is adaptive, the horizontal layout is'top', the vertical layout is'right', optional

//'inside'|'left'|'right'|'top'|'bottom'

`//textStyle:null //Global text style is used by default, see TEXTSTYLE for details

}

},

emphasis:{

//color:'Different',

barBorderColor: rgba(0,0,0,0)'`, //bar edge`

barBorderRadius:0,``//Bar corner rounded corners, unit px, default is 0

barBorderWidth:1, ``//The width of the bar border, in px, default is 1

label:{

show: false

//position:The default is adaptive, the horizontal layout is'top', the vertical layout is'right', optional

//'inside'|'left'|'right'|'top'|'bottom'

`//textStyle:null //Use global text style by default, see TEXTSTYLE for details

}

}

}

},

//Default parameters for line charts

line:{

itemStyle:{

normal:{

//color:different,

label:{

show: false

//position:The default is adaptive, the horizontal layout is'top', the vertical layout is'right', optional

//'inside'|'left'|'right'|'top'|'bottom'

`//textStyle:null //Use global text style by default, see TEXTSTYLE for details

},

lineStyle:{

width:2,

type: 'solid'`,`

shadowColor : rgba(0,0,0,0)'`, //default transparent`

shadowBlur:5,

shadowOffsetX:3,

shadowOffsetY:3

}

},

emphasis:{

//color:different,

label:{

show: false

//position:The default is adaptive, the horizontal layout is'top', the vertical layout is'right', optional

//'inside'|'left'|'right'|'top'|'bottom'

`//textStyle:null //Use global text style by default, see TEXTSTYLE for details

}

}

},

//smooth:false,

//symbol:null, //Inflection graph type

symbolSize:2, ``//Knee graphic size

//symbolRotate:null,///Knee graphic rotation control

showAllSymbol: false //The logo graphics only show the main axis by default(the strategy is hidden with the main axis label interval)`

},

//K-line chart default parameters

k:{

//barWidth:null //default adaptive

//barMaxWidth:null //default adaptation

itemStyle:{

normal:{

color: '#fff'`, //fill color of the positive line`

color0: '#00aa11'`, //Filling color of negative line`

lineStyle:{

width:1,

color: '#ff3200'`, //The border color of the sun line`

color0: '#00aa11' //the border color of the negative line`

}

},

emphasis:{

//color:different,

//color0:different

}

}

},

//The default parameters of the scatter chart

scatter:{

//symbol:null, //Graphics type

symbolSize:4,``//Graphic size, half width(radius) parameter, when the graphic is direction or diamond, the total width is symbolSize * 2

//symbolRotate:null, //graphic rotation control

large: false`, //Large-scale scatter plot`

largeThreshold:2000, //Large-scale threshold, large is true and large-scale mode is enabled only if the data volume is >largeThreshold

itemStyle:{

normal:{

//color:different,

label:{

show: false

//position:The default is adaptive, the horizontal layout is'top', the vertical layout is'right', optional

//'inside'|'left'|'right'|'top'|'bottom'

`//textStyle:null //Use global text style by default, see TEXTSTYLE for details

}

},

emphasis:{

`//color:'Different'

label:{

show: false

//position:The default is adaptive, the horizontal layout is'top', the vertical layout is'right', optional

//'inside'|'left'|'right'|'top'|'bottom'

`//textStyle:null //Use global text style by default, see TEXTSTYLE for details

}

}

}

},

//Radar chart default parameters

radar:{

itemStyle:{

normal:{

//color:different,

label:{

show: false

},

lineStyle:{

width:2,

type: 'solid'

}

},

emphasis:{

//color:different,

label:{

show: false

}

}

},

`//symbol:null,

symbolSize:2 //Computable characteristic parameters, the size of the empty data drag and drop prompt graphics

//symbolRotate:null, //graphic rotation control

},

//pie chart default parameters

pie:{

center:[`'50%',` `'50%'], //default global center`

radius:[0, '75%'`],`

clockWise : false`, //counterclockwise by default`

startAngle:90,

minAngle:0,//The minimum angle is changed to 0`

selectedOffset:10, //selected is the sector offset

itemStyle:{

normal:{

//color:different,

borderColor: '#fff'`,`

borderWidth:1,

label:{

show: true`,`

position: 'outer'

`//textStyle:null //Use global text style by default, see TEXTSTYLE for details

},

labelLine:{

show: true`,`

length:20,

lineStyle:{

//color:different,

width:1,

type: 'solid'

}

}

},

emphasis:{

//color:different,

borderColor: 'rgba(0,0,0,0)'`,`

borderWidth:1,

label:{

show: false

//position:'outer'

`//textStyle:null //Use global text style by default, see TEXTSTYLE for details

},

labelLine:{

show: false`,`

length:20,

lineStyle:{

//color:different,

width:1,

type: 'solid'

}

}

}

}

},

map:{

mapType: 'china'`, //MapType of each province is temporarily in Chinese`

mapLocation:{

x : 'center'`,`

y : 'center'

//width //Self-adaptive

//height //Self-adaptive

},

showLegendSymbol : true`, //Show legend color identification(small dot of series identification), effective when legend exists`

itemStyle:{

normal:{

//color:different,

borderColor: '#fff'`,`

borderWidth:1,

areaStyle:{

color: '#ccc' //rgba(135,206,250,0.8)

},

label:{

show: false`,`

textStyle:{

color: rgba(139,69,19,1)'

}

}

},

emphasis:{ //is also the selected style

//color:different,

borderColor: 'rgba(0,0,0,0)'`,`

borderWidth:1,

areaStyle:{

color: rgba(255,215,0,0.8)'

},

label:{

show: false`,`

textStyle:{

color: rgba(139,69,19,1)'

}

}

}

}

},

force:{

//The minimum and maximum value of the radius of the data map to the circle

minRadius:10,

maxRadius:20,

density:1.0,

attractiveness:1.0,

//Initialized random size position

initSize:300,

//The centripetal force factor, the greater the centripetal force

centripetal:1,

//Cooling factor

coolDown:0.99,

//If there is a style in the category, it will override the default style of the node

itemStyle:{

normal:{

//color:different,

label:{

show: false

`//textStyle:null //Use global text style by default, see TEXTSTYLE for details

},

nodeStyle:{

brushType : 'both'`,`

color : '#f08c2e'`,`

strokeColor : '#5182ab'

},

linkStyle:{

strokeColor : '#5182ab'

}

},

emphasis:{

//color:different,

label:{

show: false

`//textStyle:null //Use global text style by default, see TEXTSTYLE for details

},

nodeStyle:{},

linkStyle:{}

}

}

},

chord:{

radius:[`'65%',` `'75%'],`

center:[`'50%',` `'50%'],`

padding:2,

sort : 'none'`, //can be'none','ascending','descending'`

sortSub : 'none'`, //can be'none','ascending','descending'`

startAngle:90,

clockWise : false`,`

showScale : false`,`

showScaleText : false`,`

itemStyle:{

normal:{

label:{

show : true

`//textStyle:null //Use global text style by default, see TEXTSTYLE for details

},

lineStyle:{

width:0,

color : '#000'

},

chordStyle:{

lineStyle:{

width:1,

color : '#666'

}

}

},

emphasis:{

lineStyle:{

width:0,

color : '#000'

},

chordStyle:{

lineStyle:{

width:2,

color : '#333'

}

}

}

}

},

island:{

r:15,

calculateStep:0.1 //The wheel can calculate the step size 0.1 = 10%

},

markPoint:{

symbol: 'pin'`, //annotation type`

symbolSize:10,//The size, half width(radius) parameter, when the shape is a direction or a diamond, the total width is symbolSize * 2`

//symbolRotate:null, //Label rotation control

itemStyle:{

normal:{

//color:different,

//borderColor:different, //mark the border color, priority over color

borderWidth:2, //Mark the border line width, unit px, default is 1

label:{

show: true`,`

position: 'inside' //optional as'left'|'right'|'top'|'bottom'

`//textStyle:null //The global text style is used by default, see TEXTSTYLE for details

}

},

emphasis:{

//color:different

label:{

show: true

//position:'inside' ////'left'|'right'|'top'|'bottom'

`//textStyle:null //Use global text style by default, see TEXTSTYLE for details

}

}

}

},

markLine:{

//The symbol introduction type of the start and end of the line, if they are the same, you can directly pass string

symbol:[`'circle',` `'arrow'],`

//The symbol size at the beginning and end of the line, half width(radius) parameter, when the shape is direction or diamond, the total width is symbolSize * 2

symbolSize:[2, 4],

//Symbol rotation control of the start and end of the line

//symbolRotate:null,

itemStyle:{

normal:{

//color:different, //main color of marking line, main color, main color of symbol

//borderColor:With color, //border color of marker symbol, priority over color

borderWidth:2, ``//Line width of the symbol border, in px, the default is 2

label:{

show: false`,`

//Optional as'start'|'end'|'left'|'right'|'top'|'bottom'

position: 'inside'`,`

textStyle:{ `//uses the global text style by default, see TEXTSTYLE for details

color: '#333'

}

},

lineStyle:{

//color:With borderColor, //main color, thread color, priority is higher than borderColor and color

//width:With borderWidth, //takes precedence over borderWidth

type: 'solid'`,`

shadowColor : rgba(0,0,0,0)'`, //default transparent`

shadowBlur:5,

shadowOffsetX:3,

shadowOffsetY:3

}

},

emphasis:{

//color:different

label:{

show: false

//position:'inside'//'left'|'right'|'top'|'bottom'

`//textStyle:null //Use global text style by default, see TEXTSTYLE for details

},

lineStyle:{}

}

}

},

textStyle:{

decoration: 'none'`,`

fontFamily: 'Arial, Verdana, sans-serif'`,`

fontFamily2: 'Microsoft Yahei'`, //IE8- The font is blurry and does not support different fonts, please specify an additional `

fontSize:12,

fontStyle: 'normal'`,`

fontWeight: 'normal'

},

//List of default logo graphics types

symbolList:[

'circle'`,'rectangle',` `'triangle','diamond' `,

'emptyCircle'`,'emptyRectangle',` `'emptyTriangle','emptyDiamond'`

],

loadingText : 'Loading...'`,`

//Computable feature configuration, island, hint color

calculable: false`, //Computable feature is off by default`

calculableColor: rgba(255,165,0,0.6)'`, //Drag the prompt border color`

calculableHolderColor: '#ccc'`, //Countable placeholder hint color`

nameConnector: '&'`,`

valueConnector: ':'`,`

animation: true`,`

animationThreshold:2500, //animation element threshold, the generated graphics element exceeds 2500 and no animation

addDataAnimation: true`, //Whether the dynamic data interface enables animation effects`

animationDuration:2000,

animationEasing: 'ExponentialOut'//BounceOut`