A preliminary study on ECHARTSJS--graphical report

Echartsjs-Graphical reports

Before learning Chartjs, the same is the graphical report plug-in, but the overall feeling is small but still a bit unsatisfactory, for example (legend ...) ), after looking for comparisons, or continue to learn this tall ECHARTSJS bar! The most attractive to me is the light weight, beautiful, personalized, many kinds, document details, but also can be well adapted to mobile (MUI frame is also embedded in the Echartjs), undoubtedly the use of beautiful graphical reports can add a lot to the project!

Official website: http://echarts.baidu.com/
MUI Official website: http://dev.dcloud.net.cn/mui/
Chartjs http://blog.csdn.net/macanfa/article/details/50994593

Steps to use:

1. Introducing the Echarts.min.js file,
2. Add Dom container,
3. Initialize the Echarts instance:
   var mychart = echarts.init (document.getElementById (' main '));
4. Specify the configuration items and data for the chart
   var option = {...}
5. Using configuration items and data to display a chart: mychart.setoption (option);

For detailed step examples, please refer to the official website tutorial:

Http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

Nightingale Chart:

Introduce JS files and create DOM containers:

<div id=‘main‘ style=‘width:600px;height:400px;‘></div>

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

varMychart=echarts.init (document.getElementById (' main '));//Configuration Items            varoption={title:{Text:' access source ', Subtext:' test data ',//Sub-titleX:' Center ', textstyle:{fontSize: -, FontWeight:' Bolder ', Color:' #fff '}                },//Custom format Tooltip,{a},{b},{c},{d} corresponds to the name in the series, and the Name,value in the data and the percentage corresponding to each subkeytooltip:{Trigger:' Item ',//Customizable stylesFormatter"<span class= ' text ' >{a} </span><br/>{b}: {c} (<span class= ' percent ' >{d}%</span>)" },//LegendLegend: {Orient:' Horizontal ',//LandscapeLeft:' Center ',//Horizontal CenterBottom0,//Bottomdata:[' Direct access ',' Email marketing ',' affiliate ADS ',' video ads ',' Search engine '],//Set the text color of the legendtextstyle:{Color:"#fff"},//interval between each item subkeyItemgap:5, Itemwidth: -, ItemHeight:Ten,/* bordercolor: "#fff", borderwidth:1*/},//toolbar (6 kinds): Guide mark, marquee area Zoom, Data View, restore, download pictureToolbox: {show:true, feature: {mark: {show:true}, DataView: {show:true, ReadOnly:false}, restore: {show:true}, Saveasimage: {show:true}                            }                  },//Whether the drag-and-drop recalculation feature is enabled, closed by defaultCalculable:true,//Pie core: Just keep this part of the code to implement the pie chartseries:[{Name:' access source ', type:' Pie ', Radius:' 55% ',//Control pie chart Sizedata:[{value:235, Name:' video ads '},                        {value:274, Name:' affiliate ADS '},                        {value:310, Name:' Email marketing '},                        {value:335, Name:' Direct access '},                         {value: -, Name:' Search engine '}                    ]                }],//Custom legend and pie color: The color here corresponds to each element of data in the series above, in order!                 /*color:[' #000 ', ' #0580b9 ', ' #28c6b9 ', ' #84e6f1 ', ' #dddddd '],*/                //Pie chart also supports displaying Chengdu-Nanchong Nightingale graphs by setting Rosetype: The size of the data by radiusRosetype:' Angle ',/* General style, such as shadow, transparency, color, border color, border width, etc., styles are usually set in the ItemStyle of the series. */                //Shadow configurationItemStyle: {//The style under normal displayNormal: {//Shadow sizeShadowblur: $,//Shadow offset in horizontal directionSHADOWOFFSETX:0,//Shadow offset in the vertical directionShadowoffsety:0,/ *//Shadow color Shadowcolor: ' rgba (0, 0, 0, 0.5) ', Set the uniform fan color! Once the sector color is set, it will overwrite the front color: "#c23531", Shadowblur:2 XX, Shadowcolor: ' Rgba (0,0,0,0.5) ' * *},//Hover style when mouse is onEmphasis: {shadowblur: $, Shadowcolor:' Rgba (0, 0, 0, 0.9) '}                },//Background colorBackgroundColor:' #2c343c ',//Global Text styleteststyle:{Color:' Rgba (255,255,255,0.9) '},/*//Each series is set to label: {normal: {textStyle:                {color: ' Rgba (255, 255, 255, 0.3) '}} },//The visual guide line of the tag labelline: {normal: {Li                Nestyle: {color: ' Rgba (255, 255, 255, 0.3) '}} }                */};//Display datamychart.setoption (option);

:

Summary: The above effects practice many configuration items, the location of the legend control, the tooltip content formatting display, global background color and global text color and so on configuration .... Of course, the more appealing is the adaptive multi-terminal media query, and the interactive components that are introduced on demand! Not finish the notes ...

A preliminary study on ECHARTSJS--graphical report