Use of Echart.js with API

---restore content starts---

The use and API1.echart.js of echart.js Use of:

The first step : Create a script tag in the head tag or body to refer to Echart.js, (the file can be in the official homepage of Echart Download the latest and most comprehensive JS file, official website: http://echart.baidu.com);

<src= "./js/echarts.js"></script>

Step Two : Create a DOM (DIV) with size in the body;

<id= "main"  style= "width:600px height:400px;" ></ Div >

Third cloth : Based on the created DOM, create script, and initialize the Echart chart;

var mychart = Echart.init (document.getElementById (' main '));

Fourth Step: Create an option in the Script tab and lay out the parameters;

var option={// custom parameters, see parameters below};

Fifth step: After the parameters are laid out, load the data for the Echart object at the end

mychart.setoption (option);

2.API

1.tooltip: Hint box, information hint when mouse hover interaction

Parameter: 1.show: Display policy, default to True (display), optional false (hidden);

2.trigger: Trigger type, default to item (trigger), optional axis (custom trigger);

3.zlevel: Cascade control, the default value is 1, render canvas, the same will be rendered on the same canvas, but do not recommend too many settings,

The increase in canvas objects consumes more memory and performance, so most of them can be controlled by a level two cascade

4.Z: Cascade control of Level two, default value 8, the Zlevel on the same upper z higher the top layer.

5.showContent: Default is True, can be configured to False (hidden) when show or axispointer triggers but does not display content

6.position: Position specified, default display coordinates are output parameters, user specified new coordinates for output return

such as: function ([x, Y]) {return [Newx,newy]}

7.formatter: Content Formatter, default value is NULL, support asynchronous callback

8.islandFormatter: Drag-and-drop recalculation unique, data island content formatter

9.showDelay: Display delay, default value is 20, unit MS, add display delay can avoid frequent switching.

10.hideDelay: Hidden delay, default value is 100, unit is MS

11.transitionDuration: Animation transform duration, default value is 0.4, unit is s, Change interactive experience

12.enterable:false mouse can enter the details bubble, the default is false, such as adding details of interaction, such as add links, can be set to True

13.BACKGROUNDCOLOR: Hint background color, default ' Rgba (0,0,0,0.7) ', default transparency is 0.7 black

14.borderColor: Hint border color, default is #333;

15.borderRadius: Tip border Rounded, default is 4, px

16.borderWidth: Tip Border line width, default is 0, px

17.padding: Hint padding, default to 5, accept array to set each margin with CSS

18.textStyle: Text style, default is white, {color: ' #fff '}

19.axisPointer: Axis indicator, default type:line, optional ' line\cross\shadow\none ' corresponding setting style is in effect

such as: type: ' line ', linestyle:{},crossstyle:{},shadowstyle:{}

2.legend: Legend

1.data: An array of legend contents, each of which represents the name of a series, based on the value of the icon type and item used by the family with the same name in the series

And ItemStyle, if the index is not reached, the item will default to no start state, parameter Name,textstyle,icon

2.orient: Layout mode, default to horizontal horizontal layout, optional vertical vertical.

3.x: placement, default full center, optional: Left,right

4.Y: Placement, default full-image top, optional top,bottom,center

5.itemGap: The spacing of each item, default is 10, Unit px, with Orient layout

6.itemWidth: The width of the legend graphic, which defaults to 20px.

7.itemHeight: Height of legend graphic, default is 14px

8.textStyle: Default setting legend text color, Color:auto, default = {color: ' #333 '}

9.selectedMode: Select mode, turn on legend switch by default, true, optional single,multiple,true,

10.selected: Configure the default check state to do Dynamic Data loading with legend,selected events

11.formatter: Text formatter, default is NULL

12.show: Display policy, default to True (display), optional false (hidden)

13.zlevel: Cascade control, the default value is 1, render canvas, the same will be rendered on the same canvas, but do not recommend too many,

The increase in canvas objects consumes more memory and performance, so most of them can be controlled by a level two cascade

14.Z: Cascade control of Level two, default value 8, the Zlevel on the same upper z higher the top layer.

15.borderRadius: Tip border Rounded, default is 4, px

16.borderWidth: Tip Border line width, default is 0, px

17.padding: Hint padding, default to 5, accept array to set each margin with CSS

18.borderColor: Hint border color, default is #333;

3.series: An array of data content generated by the drive graph, with each item in the array being a series of options and data to determine the applicable type:

1.name: series name, such as Enable ledgend, restructuring will be Legend.data index related

2.type: Chart type, necessary Parameters! is empty or unsupported type, the series data is not displayed and can be selected as:

' Line chart ', ' Bar (histogram) ', ' Scatter (scatter chart ') ', ' K (candlestick chart) ', ' Pie (pie chart) ', ' Radar (radar chart) ', ' chord (chord chart) '

' Force-oriented layout map ', ' map '

3.data: Data, default value []

4.zlevel: Cascade control at the first level.

5.Z: Level two cascade control

6.clickable: Data graphics are clickable, default on, True if no Click event response can be turned off

7.markPoint: Callout

8.markLine: Marking

　　　　　　　

Different types have individual attributes that differ or increase

4.title: Title, with a maximum of one header control per icon, each header control can have a main subtitle

1.show: Display policy, default to True (display), optional false (hidden);

2.text: Main title text, default value ', ' \ n ' specifies line break;

3.zlevel: Cascade control, the default value is 1, render canvas, the same will be rendered on the same canvas, but do not recommend too many settings,

The increase in canvas objects consumes more memory and performance, so most of them can be controlled by a level two cascade

4.Z: Cascade control of Level two, default value 8, the Zlevel on the same upper z higher the top layer.

5.link: Main Title text hyperlink

6.target: Specify the window to open the main caption hyperlink, default NULL, support Self,blank, do not specify the equivalent of blank (new window)

7.subtext: subtitle text, ' \ n ' specifies line breaks,

8.sublink: Subtitle Text hyperlink

9.subtarget: Specify window to open subtitle hyperlink, default NULL, support Self,blank, do not specify blank (new window)

10.textAlign: horizontal alignment, default automatically adjusts according to X setting, Left,right,center

11.backgroundColor: Title background color, default transparent

12.borderColor: Title border color, default is #ccc

13.borderWidth: Header border line width, default is 0, unit px

14.padding: Hint padding, default to 5, accept array to set each margin with CSS

15.ITEMGAP: Primary subtitle longitudinal interval, default is 10, unit px

16.textStyle: Main caption Text style, accept array set each margin with CSS

17.subtextStyle: Subtitle Text style

18.x: Horizontal placement, default to left, optional left,center,right

19.Y: Vertical placement, default to top, optional top,bottom,center

5.xaxis,yaxis: Vertical axis in Cartesian coordinate system

Axis type, the horizontal axis defaults to Category ' category '. The vertical axis defaults to the value type ' value ' such as:

Xaxis:[{type: ' Category ', data:[' shirt ', ' cardigan ', ' chiffon shirt ', ' Pants ']},

Yaxis:[{type: ' Value '}]

6.axis: There are three types of axes:

• Category: You need to specify a list of categories, and only those assigned class coordinates within the axis
• Numeric type: You need to specify a range of values, do not specify when the calculation of numerical ranges, the axis contains the numerical interval content all coordinates
• Time: The time-type axis uses the same numeric type, only the target processing and the formatted display are automatically converted to time, and automatic switching over time span needs to be displayed of the Granularity of Time

　　　　　　　1.type: Required, vertical axis is value, horizontal axis is category

2.show: Display policy, default to True (display), optional false (hidden)

3.zlevel: Cascade control at the first level.

4.Z: Level two cascade control

5.position: Axis type, the default is bottom, ordinate default is left, optional value bottom,top,left,right

6.name: Axis name, default is empty

7.nameLocation: Coordinates the name position, default is end, optional start

8.nameTextStyle: Axis Name text style, default take global configuration, color follows Axisline main color, false then head

9.boundaryGap: Class In fact and end two blank policy, default True null, False the head

10.BOUNDARYGAP: Axis Two-paragraph blank policy, default value [0,0], optional [original minimum and final gap, original maximum and final gap]

11.min: The specified minimum value, default is NULL, is automatically adjusted according to the numeric value, after the specified ignore boundarygap[0]

12.max: The specified maximum value, default is NULL, is automatically adjusted according to the value, specified after ignoring boundarygap[1]

13.scale: Out of the 0-value ratio, zoom in and focus to the final _min,_max interval,

14.splitNumber: Split segment number, not specified when adjusted according to Min, Max algorithm

15.loglabelbase:axis.type=== ' log ' is in effect. When specified, Axislabel displays an exponential form such as 4², which is not specified for normal form such as: 1000,

16.logpositive:axis.type=== ' log ' in effect, specifies whether to use the reverse log axis, the default adaptive, that is, if value is all negative, false otherwise true

17.axisLine: Axis line, not displayed by default

18.axisTick: Axis Small mark, not displayed by default

19.axisLabel: Axis text label.

20.splitLine: Split line, default display

21.splitArea: Split area, not displayed by default

22.data: List of categories

7.timeline: Timeline with up to one timeline control per icon

1.type: Mode is the time type, the default is times, can be selected as ' number '

2.notMerge: When multiple option switches on the timeline, the merge operation is performed, the same setoption the second parameter

3.realtime: Drag or click to change whether the timeline is displayed in real time, by default true, to force false in browsers that do not support canvas

4.autoPlay: Auto Play, default to False

5.loop: Whether to loop playback, default to True

6.playInterval: Playback time interval, default 2000, Unit MS

7.controlPosition: Player position, left by default, optional left, right, none

8.X,Y,X2,Y2: The upper-left corner of the timeline horizontal ordinate, the upper-right corner of the timeline's horizontal axis

9.width: Width of the timeline, default self-adapting

10.height: The height of the timeline, default 50, unit%;

11.lineStyle: Timeline axis style, LineStyle control line style

12.label: Sorry text

13.checkpointStyle: Timeline Current point

14.controlStyle: Time axis Controller style

15.symbol: Pivot point symbol, same as Serie,symbol

16.symbolSize: Pivot point symbol, same as Serie,symbolsize

17.currentIndex: The current index position, corresponding to the option array, for specifying a specific series

18.data: Timeline list, also axis label content

The above is a common API, I will learn to continue to summarize ~

　　　　　　　

Use of Echart.js with API