Echarts (Enterprise Charts Commercial Product Chart library)

Source: Internet
Author: User

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: 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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.