First, Introduction
In the era of big data, it was time to redefine the chart, so the echarts came along.
Echarts (Enterprise Charts Commercial Product Chart library) is a canvas-based, pure JavaScript Chart library that provides intuitive, vivid, interactive, customizable
Data visualization charts. Innovative drag-and-drop computing, Data View, range roaming and other features greatly enhance the user experience, giving users the ability to dig and integrate data.
Echarts refers to Enterprise Charts (commercial product Chart library), which provides a library of common charts for commercial products, based on Zrender, creates a coordinate system, legends, hints, work
A basic component such as a box and a line chart (area chart), histogram (bar chart), scatter (bubble), candlestick chart, pie chart (doughnut chart), map, force-guided layout
graphs, and supports both stacking and multi-chart blending of any dimension.
Second, simple examples of interventional learning
Need to import jar
Learning method: http://echarts.baidu.com/official website
Bar Chart page display
Third, as shown in the Simple JSP page access (according to the Help document view properties)-----Need a Ehcache-1.2.3.jar
<%@ Pagelanguage= "Java"Import= "java.util.*"pageencoding= "Utf-8"%><% StringPath= Request.getcontextpath (); String BasePath= Request.getscheme ()+ "://" + request.getservername () + ":" + request.getserverport () + path + "/";%><!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"><HTML><Head><Basehref= "<%=basePath%>"><title>Bar chart</title><!--introduction of Echarts.js -<Scripttype= "Text/javascript"src= "<%=path%>/js/echarts.js"></Script></Head><Body> <!--prepare a DOM with size for Echarts - <DivID= "Main"style= "width:900px;height:600px"></Div></Body><Scripttype= "Text/javascript"> Based on the prepared DOM, initialize the Echarts instance var mychart = Echarts.init (document.getElementById ("main")); var option = {//Header component title: {text: ' Company's weekly sales chart ', subtext: ' Purely fictitious ', left: ' Left ', TextStyle: {fontsize:20},},//Legend legend: { Data: [' Sales ']},//color: [' red '],//Cue Box component tooltip: {Trigger : ' Axis ', Axispointer: {//Axis indicator, axis trigger valid type: ' Shadow '//default is line, Optional: ' Lines ' | ' Shadow ' | ' Cross '}},//toolbar toolbox: {show:true,//displays feature: { The Data View tool, which can show the data used in the current chart, can be updated dynamically after editing. DataView: {show:true, readonly:false},//dynamic type switch Magictype: {show:true, type: [' Pie ', ' bar '] }, Datazoom: {show:true},//config item restore Restore: {show:true},//Save as Picture saveasimage: { Show:true}},//x axis xaxis: [{position : ' Bottom ', position of//x axis. Optional: ' Top ', ' Bottom ' type: ' Category ', data: [' Mon ', ' Tue ', ' Wed ', ' Thu ', ' Fri ', ' Sat ', ' Sun '], Axistick: {alignwithlabel:true}}],//y axis yaxis: [{ Type: ' value '}],//Series list: [{name: ' Sales ', type: ' Bar ', BarWidth: ' 60% ', data: [10, 52, 200, 334, 390, 330, 220],//Chart callout Markpoint: { Data: [{type: ' Max ', Name: ' Maximum value '}, {Type: ' min ', name: ' Minimum '} '},//Chart marking Markline: { Data: [{type: ' Average ', Name: ' Average '}] }}, {name: ' Output ', type: ' line ', data: [50, 55, 200, 340, 390, 400, 220] } ], }; Displays the chart mychart.setoption (option) using a configuration item and data that you have just specified;</Script></HTML>
The rest can be displayed in the Help document view to find the code you need
Echarts (Enterprise Charts Commercial Product Chart library)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
