Webstorm+webpack+echarts Building Customized data visualization charts && two echarts detailed tutorials (histogram, Nightingale)

Last Update:2017-01-05 Source: Internet

Author: User

Tags set background

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Webstorm+webpack+echarts

Echarts Feature Introduction

Echarts, a pure Javascript chart library that runs smoothly on PCs and mobile devices, is compatible with most current browsers (Ie8/9/10/11,chrome,firefox,safari, etc.) and relies on lightweight Canvas class libraries Zrender provides intuitive, vivid, interactive and highly customizable data visualization charts.

In Echarts 3, more rich interactivity and more visualizations are added, and the mobile side is optimized in depth.

1. NPM Installation Echarts

Prior to the release echarts the package on 3.1.1 NPM was unofficially maintained, starting from the 3.1.1 official EFE maintenance npm on Echarts and Zrender's package.

You can use the following command to install Echarts via NPM

NPM Install Echarts--save

Complete as shown in:

The file structure, under the Node_modules file, has more than Echarts and Zrender two folders.

2. Introduction of Echarts (histogram) in Index.js file

var echarts = require (' echarts '///  based on prepared DOM, initialize echarts instance var mychart = Echarts.init (document.getElementById (' main ')); // Draw a chart mychart.setoption ({    ' echarts Getting Started example ' },    tooltip: {},    Xaxis: {        data: ["Shirt", "cardigan "," chiffon shirt "," trousers "," high Heels "," Socks "    },    YAxis: {},    series: [{        ' sales ',        ' bar ' ,        data: [5, +, +, ten, ten]    }]});

Index.js All Files

/** * Created by on 2017/1/5.*/var$=require (' jquery ');varEcharts = require (' Echarts '));//Initializes a Echarts instance based on the prepared DomvarMyChart = Echarts.init (document.getElementById (' main ')));//Draw a bar chartmychart.setoption ({title: {text:' Echarts starter instance '}, tooltip: {}, Xaxis: {data: ["Shirts", "sweaters", "chiffon shirts", "trousers", "high Heels", "socks"]}, YAxis: {}, Series: [{name:Sales, type:' Bar ', data: [5, 20, 36, 10, 10, 20]    }]});

Note: Add a prepared DOM to index.html and initialize the echarts.

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Title</title></Head><Body><!--prepare a DOM with size (wide height) for echarts -<DivID= "Main"style= "width:600px;height:400px;"></Div><H1>Hello World</H1><Button>Submit</Button><Scriptsrc= "./bundle.js"></Script></Body></HTML>

2.1 Run See results

3. Introduction of Echarts (South Dingertutu) in Index.js file

/** * Created by on 2017/1/5.*/var$=require (' jquery ');varEcharts = require (' Echarts '));//Initializes a Echarts instance based on the prepared DomvarMyChart = Echarts.init (document.getElementById (' main ')));varmychart_01 = Echarts.init (document.getElementById (' main_01 '));//Draw a bar chartmychart.setoption ({title: {text:' Echarts bar chart '}, tooltip: {}, Xaxis: {data: ["Shirts", "sweaters", "chiffon shirts", "trousers", "high Heels", "socks"]}, YAxis: {}, Series: [{name:Sales, type:' Bar ', data: [5, 20, 36, 10, 10, 20]    }]});//pie chart (Nightingale map)mychart_01.setoption ({title: {text:' Echarts Nightingale Map ' },    //Set Background color    //backgroundcolor: ' #2c343c ',Visualmap: {show:false, min:80, Max:600, InRange: {colorlightness: [0, 1]}}, series: [{name:' Access source ', type:' Pie ', Radius:' 55% ', data:[{value:The name: ' Search engine '}, {value:335, Name: ' Direct access '}, {value:310, Name: ' Email marketing '}, {value:274, Name: ' Affiliate AD '}, {value:235, Name: ' Video ad '}], Rosetype:' Angle ',//Nightingale MapItemStyle: {normal: {shadowblur:200, Shadowcolor:' Rgba (0, 0, 0, 0.5) '}}]}) Document.addeventlistener (' Domcontentloaded ',function() {Console.log (' Hi '); $(' button '). Click (function() {alert (' I love YOU1 '))});});

Note: in index.html.

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Title</title></Head><Body><!--prepare a DOM (histogram) with size (wide height) for echarts -<DivID= "Main"style= "width:600px;height:400px;"></Div><!--Nightingale Map -<DivID= "Main_01"style= "width:600px;height:400px; "></Div><H1>Hello World</H1><Button>Submit</Button><Scriptsrc= "./bundle.js"></Script></Body></HTML>

3.1 Run See results

Ps: can refer to the Official document: Http://echarts.baidu.com/tutorial.html#ECharts%20%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D

Webstorm+webpack+echarts Building Customized data visualization charts && two echarts detailed tutorials (histogram, Nightingale)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More