User interactions trigger corresponding events in ECharts. Developers can listen to these events and handle accordingly through callback functions, e.g., redirecting to an address, popping out a dialog box, or drilling down data and so on.
Binding events in ECharts 3 is though on method, same as in ECharts 2. But event names are much simpler than it is in 2. Event names in ECharts 3 are the same as DOM event names, in lowercases. Below is an example of binding clicking operation.
myChart.on('click', function (params) {
// printing data name in console
console.log(params.name);
});
Event in ECharts can be divided in two kinds. One is mouse event, which is triggered when mouse clicks on certain component, the other is triggered with interaction components, such as triggering 'legendselectchanged' event when toggling legend (Notice here, that 'legendselected' event will not be triggered when toggling legend), triggering 'datazoom' event when data zooming in some area.
ECharts support regular mouse events, which includes 'click', 'dblclick', 'mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout'. Next let's see an example of opening Baidu search page when clicks a bar chart.
// initialize ECharts instance based on prepared dom
var myChart = echarts.init(document.getElementById('main'));
// data and configuration item of specific chart
var option = {
xAxis: {
data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
},
yAxis: {},
series: [{
name: 'sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// use specified configuration item and data to show chart
myChart.setOption(option);
// handle click event and redirect to corresponding Baidu search page
myChart.on('click', function (params) {
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
All types of mouse events have a common parameter called params, which is an object that contains data information of the clicked chart, whose format is as followed:
{
// component name of clicked component
// e.g., 'series', 'markLine', 'markPoint', 'timeLine'
componentType: string,
// series type (useful when componentType is 'series')
// e.g., 'line', 'bar', 'pie'
seriesType: string,
// series index in option.series (useful when componentType is 'series')
seriesIndex: number,
// series name (useful when componentType is 'series')
seriesName: string,
// data name, or category name
name: string,
// data index in input data array
dataIndex: number,
// raw input data item
data: Object,
// Some series, such as sankey or graph, maintains both nodeData and edgeData,
// in which case, dataType is set to be 'node' or 'edge' to identify.
// On the other hand, most other series have only one type of data,
// where dataType is not needed.
dataType: string,
// input data value
value: number|Array
// color of component (useful when componentType is 'series')
color: string
}
How to know where the mouse clicked:
myChart.on('click', function (params) {
if (params.componentType === 'markPoint') {
// clicked on markPoint
if (params.seriesIndex === 5) {
// clicked on a markPoint which belongs to a series indexed with 5
}
}
else if (params.componentType === 'series') {
if (params.seriesType === 'graph') {
if (params.dataType === 'edge') {
// clicked on an edge of the graph
}
else {
// clicked on a node of the graph
}
}
}
});
You may update chart or show customized layer with information got from your own data warehouse, indexed from data name or series name of an object received from a callback function. Sample code is shown as followed:
myChart.on('click', function (parmas) {
$.get('detail?q=' + params.name, function (detail) {
myChart.setOption({
series: [{
name: 'pie',
// present data distribution of a single bar through pie chart
data: [detail.data]
}]
});
});
});
Basically all component interactions in ECharts trigger corresponding events. Frequently used events and corresponding parameters are listed in events.
Below is example that listens to a legend toggling:
// legend toggling triggers legendselectchanged event only
myChart.on('legendselectchanged', function (params) {
// obtain selecting status of clicked legend
var isSelected = params.selected[params.name];
// print in console
console.log((isSelected ? 'select' : 'unselect') + 'legend' + params.name);
// print all legend status
console.log(params.selected);
});
Actions like 'legendselectchanged' mentioned above will be triggered by component interaction. Besides that, sometimes we need to trigger certain actions in our program, such as showing tooltip, or selecting legend.
ECharts 2.x triggers actions through myChart.component.tooltip.showTip, whose entrance is deep and involves organization of inner components. On the other hand, ECharts 3 triggers actions through myChart.dispatchAction({ type: '' }), which manages all actions in a uniformed way, and may record user's event path when need.
Frequently used actions and the parameters are listed in action.
Below displays how to highlight each sector of pie chart in turn through dispatchAction.
Data visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual tunnels.
Every type of charts in ECharts has this built-in mapping procedure. For example, line charts map data into lines, bar charts map data into length. Some more complicated charts, like graph, themeRiver, and treemap have their own built-in mapping.
Besides, ECharts provides viusalMap component for general visual mapping. Visual elements allowed in visualMap component are:
symbol, symbolSize
color, opacity, colorAlpha,
colorLightness, colorSaturation, colorHue
Next, we are going to introduce how to use visualMap component.
Data are usually stored in series.data in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of dataItems. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions).
For example, series.data is the most common form, which is a list, a common array:
series: {
data: [
{ // every item here is a dataItem
value: 2323, // this is data value
itemStyle: {...}
},
1212, // it can also be a value of dataItem, which is a more common case
2323, // every data value here is one dimension
4343,
3434
]
}
series: {
data: [
{ // every item here is a dataItem
value: [3434, 129, 'San Marino'], // this is data value
itemStyle: {...}
},
[1212, 5454, 'Vatican'], // it can also be a value of dataItem, which is a more common case
[2323, 3223, 'Nauru'], // every data value here is three dimension
[4343, 23, 'Tuvalu'] // If is scatter chart, usually map the first dimension to x axis,
// the second dimension to y axis,
// and the third dimension to symbolSize
]
}
Usually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, visualMap is what you need. Most likely, scatter charts use radius to represent the third dimension.
visualMap component defines the mapping from which dimension of data to what visual elements.
The following two types of visualMap components are supported, identified with visualMap.type.
Its structure is defined as:
option = {
visualMap: [ // can define multiple visualMap components at the same time
{ // the first visualMap component
type: 'continuous', // defined as continuous viusalMap
...
},
{ // the second visualMap component
type: 'piecewise', // defined as discrete visualMap
...
}
],
...
};
Piecewise visual map component has three types:
分段型视觉映射组件（visualMapPiecewise），有三种模式：
Configuration of visualMap mapping method
As we have introduced above, visualMap maps a certain dimension to a certain visual element, we can configure which dimension of the data (see in visualMap.dimension) to be mapped to which visual elements (see in visualMap.inRange and visualMap.outOfRange).
Example A:
option = {
visualMap: [
{
type: 'piecewise'
min: 0,
max: 5000,
dimension: 3, // the fourth dimension of series.data, or value[3], is mapped
seriesIndex: 4, // map with the fourth series
inRange: { // visual configuration items in selected range
color: ['blue', '#121122', 'red'], // defines color list of mapping
// The largest value will be mapped to 'red',
// and others will be interpolated
symbolSize: [30, 100] // the smallest value will be mapped to size of 30,
// the largest to 100,
// and others will be interpolated
},
outOfRange: { // visual configuration items out of selected range
symbolSize: [30, 100]
}
},
...
]
};
Example B:
option = {
visualMap: [
{
...,
inRange: { // visual configuration items in selected range
colorLightness: [0.2, 1], // map to lightness, which will process lightness based on original color
// original color may be selected from global color palette,
// which is not concerned by visualMap component
symbolSize: [30, 100]
},
...
},
...
]
};
For more information, please refer to visualMap.inRange and visualMap.outOfRange.
ECharts works in DOM nodes with user defined width and height. ECharts component and series are both in this DOM node, whose location can be assigned by user seperately. Inner components of charts are not suitable for implementing DOM flow layout. Instead, we use a simpler and more understandable layout similar to absolute layout. But sometimes when container is of extreme size, this method cannot avoid component overlapping automatically, especially on small screens on mobile-end.
Besides, sometimes one chart may need to be displayed on both PC and mobile-end, which involves the ability of ECharts inner components to be responsive with different container sizes.
To solve this problem, ECharts improved component location algorithm, and implemented responsive ability similar to CSS Media Query.
Most component and series follow two locating methods:
left/right/top/bottom/width/height locating method:
Each of those six parameters can be absolute value or percentage or location description.
Absolute value
in browser pixels (px); in form of number (no unit); e.g.: {left: 23, height: 400}.
Percentage
to the width and height of DOM container; in form of string; e.g.: {right: '30%', bottom: '40%'}.
Location Description
left: 'center', for horizontally centering.top: 'middle', for vertically centering.The concept of these six parameters is similar to that in CSS:
Two out of the three horizontal parameters, left, right, width, are enough to determine the component location. For example, left and right, or right and width can both determine component location and size.
The same goes for vertical paramters top, bottom and height.
Locating method of center / radius:
center
an array in form of [x, y], in which x and y can either be absolute value or percentage, as described above.
radius
an array in form of [innerRadius, outerRadius], in which innerRadius and outerRadius can either be absolute value or percentage, as described above.
Percentage location turns out to be very useful for responsive positioning.
Horizontal and vertical
Most of ECharts's long and narrow components (such as legend,visualMap,dataZoom,timeline and so on), provide option to set them to be horizontal or vertical. For example, long and narrow screen of mobile-end, vertical layout may be a more suitable choice, while horizontal may more suit for PC's wide screen.
Setting of horizontal or vertical layout is usually with component or series's orient or layout option, which can be set to 'horizontal' or 'vertical'.
Compatibility with ECharts2:
Naming of x/x2/y/y2 in ECharts2 is still compatible, as well as the newly added left/right/top/bottom. But left/right/top/bottom is recommended.
To be compatible with ECharts2, there may be settings that seems to be odd, e.g.: left: 'right', left: 'left', top: 'bottom', top: 'top', which are equal to: right: 0, left: 0, bottom: 0, top: 0, in a more normal expression.
Media Query provides the ability to be responsive with container size.
As shown in the following example, you may drag the circle in bottom-right corner to see the legend and series change layout position and method with container size.
The following format should be followed if you need to set Media Query in option:
option = {
baseOption: { // here defines base option
title: {...},
legend: {...},
series: [{...}, {...}, ...],
...
},
media: [ // each rule of media query is defined here
{
query: {...}, // write rule here
option: { // write options accordingly
legend: {...},
...
}
},
{
query: {...}, // the second rule
option: { // the second option
legend: {...},
...
}
},
{ // default with no rules,
option: { // when all rules fail, use this option
legend: {...},
...
}
}
]
};
In the above example, baseOption and every option in media are all simple options, which are regular options containing components and series. baseOption is always be used, while options of every will be merged with chart.mergeOption() when given query condition is satisfied with.
query:
A query is in the following format:
{
minWidth: 200,
maxHeight: 300,
minAspectRatio: 1.3
}
Currently there are three supported attributes:width, height, aspectRatio (length-to-width ratio), each of which can add min or max as prefix. E.g., minWidth: 200 stands for when width is greater than or equal to 200px. When two attributes are written together, it means and in Bool logic. For example, {minWidth: 200, maxHeight: 300} stands for when width is greater than or equal to 200px and height is smaller than or equal to 300px.
option:
Since option in media is simple option, technically speaking, you can write every option configuration item. But usually we only write those related to layout. Take part of the above query option as example:
media: [
...,
{
query: {
maxAspectRatio: 1 // when length-to-width ratio is less than 1
},
option: {
legend: { // legend is placed in middle-bottom
right: 'center',
bottom: 0,
orient: 'horizontal' // horizontal layout of legend
},
series: [ // left and right layout of two pie charts
{
radius: [20, '50%'],
center: ['50%', '30%']
},
{
radius: [30, '50%'],
center: ['50%', '70%']
}
]
}
},
{
query: {
maxWidth: 500 // when container width is smaller than 500
},
option: {
legend: {
right: 10, // legend is placed in middle-right
top: '15%',
orient: 'vertical' // vertical layout
},
series: [ // top and bottom layout of two pie charts
{
radius: [20, '50%'],
center: ['50%', '30%']
},
{
radius: [30, '50%'],
center: ['50%', '75%']
}
]
}
},
...
]
Priority when multiple queries are satisfied:
Attention: When multiple query are satisfied at the same time, all of them will be merged with mergeOption and those are defined later will be merged later, thus provides them with higher priority.
Query by default:
If an item in media has no not query, then it means default value, which will be used when all other rules fail.
Pay attention when container size changes:
In many cases, container DOM node doesn't need to change size with user dragging. Instead, it may set to several sizes on varied ends.
But if the container DOM node needs to change size with dragging, you need to pay attention to this: if certain configuration item appears in one query option, then it should also appeared in other query option, or it will not be able to return to the original state. (left/right/top/bottom/width/height are not restricted to this rule.)
media in composite option does not support merge
When chart.setOption(rawOption) for the second, third, fourth, fifth, and etc. times, if rawOption is composite option (which means it contains media list), then, the new rawOption.media list will not merge with the old media. instead, it will simply replace the option. Of course, rawOption.baseOption will still merge with the old option normally.
Finally, let's see an example combining with timeline:
Echarts provides many interaction components besides chart. For example:
legend component legend、title component title、visualmap component visualMap、datazoom component dataZoom、dataline component timeline
Following is an example of datazoom component dataZoom as an introduction of how to add this kind of component.
Data overview by default, and detail by requirement is a basic interaction need of data visualization. dataZoom component can implement this function in rectangular coordinate (grid) and polar coordinate (polar.
For example:
dataZoom component operates data window zoom and data window translation on axis.Use dataZoom.xAxisIndex, dataZoom.yAxisIndex to specify which axis
dataZoomcontrols.
Multiple dataZoom components can exist at the same time to control function together. Components controling the same axis will be connected automatically. The example below explains in detail.
Operation principle of dataZoom achieves data window zooming through data filtering.
Different settings of data filtering modes lead to different data window zooming effects, please see: dataZoom.filterMode.
Setting of dataZoom data window range supports two formats currently:
Percentage: see dataZoom.start and dataZoom.end.
Absolute value: see dataZoom.startValue and dataZoom.endValue.
dataZoom component supports several child components:
Inside data zoom component (dataZoomInside): inside coordinates.
Slider data zoom component (dataZoomSlider): has seperate slide option.
Select data zoom component (dataZoomSelect): full-screen box for zoom data area. Entrance and configuration item are both in toolbox.
First, only add dataZoom component to x-axis. Following examples shows the code.
option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
dataZoom: [
{ // This dataZoom component controls x-axis by dafault
type: 'slider', // this dataZoom component is dataZoom component of slider
start: 10, // the left is located at 10%
end: 60 // the right is located at 60%
}
],
series: [
{
type: 'scatter', // this is scatter chart
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
}
]
}
which will show the following result:
The chart above can only change window by dragging dataZoom component. If you want to drag in coordinate, or use mouse wheel (or slides with two fingers on mobile) to zoom, then another inside dataZoom component needs to be added. You can just add in the option.dataZoom above:
option = {
...,
dataZoom: [
{ // this dataZoom component controls x-axis by dafault
type: 'slider', // this dataZoom component is dataZoom component of slider
start: 10, // the left is located at 10%
end: 60 // the right is located at 60%
},
{ // This dataZoom component controls x-axis by dafault
type: 'inside', // this dataZoom component is dataZoom component of inside
start: 10, // the left is located at 10%
end: 60 // the right is located at 60%
}
],
...
}
Following results can be seen (you can now slide or use mouse wheel to zoom in coordinate) :
If you want to enable zooming on y-axis, then you need to add dataZoom componet on y-axis:
option = {
...,
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
start: 10,
end: 60
},
{
type: 'inside',
xAxisIndex: 0,
start: 10,
end: 60
},
{
type: 'slider',
yAxisIndex: 0,
start: 30,
end: 80
},
{
type: 'inside',
yAxisIndex: 0,
start: 30,
end: 80
}
],
...
}
Following result can be seen:
Data in Get started is directly filled in setOption after initialization, but in some cases, data may be filled after asynchronous loading. Data updating asynchronously in ECharts is very easy. After initialization, you can pass in data and configuration item through setOption after data obtained through jQuery and other tools at any time.
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function (data) {
myChart.setOption({
title: {
text: 'asynchronous data loading example'
},
tooltip: {},
legend: {
data:['Sales']
},
xAxis: {
data: ["shirts","cardigan","chiffon shirt","pants","heels","sockes"]
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});
Or, you may set other styles, displaying an empty rectangular axis, and then fill in data when ready.
var myChart = echarts.init(document.getElementById('main'));
// show title. legend and empty axis
myChart.setOption({
title: {
text: 'asynchronous data loading example'
},
tooltip: {},
legend: {
data:['Sales']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: []
}]
});
// Asynchronous data loading
$.get('data.json').done(function (data) {
// fill in data
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// find series by name
name: 'Sales',
data: data.data
}]
});
});
For example:
In ECharts, updating data need to find the corresponding series through name. In the above example, updating can be performed correctly according to series order if name is not defined. But in most cases, it is recommended to update data with series name information.
If data loading time is too long, an empty axis on the canvas may confuse users. In this case, a loading animation is needed to tell the user that it's still loading.
ECharts provides a simple loading animation by default. You only need showLoading to show, and then use hideLoading to hide loading animation after data loading.
myChart.showLoading();
$.get('data.json').done(function (data) {
myChart.hideLoading();
myChart.setOption(...);
});
Effects are as followed:
ECharts is driven by data. Change of data changes the presentation of chart, therefore, implementing dynamic data updating is extremely easy.
All data updating are through setOption. You only need to get data as you wish, fill in data to setOption without considering the changes brought by data, ECharts will find the difference between two group of data and present the difference through proper animation.
In ECharts 3, addData in ECharts 2 is removed.If a single data needs to be added, you can first data.push(value) and then setOption.
See details in the following example:
ECharts provides a rich amount of configurable items, which can be set in global, series, and data three different levels. Next, let's see an example of how to use ECharts to implement the following Nightingale rose chart:
Getting started tutorial introduced how to make a simple bar chart. This time, we are going to make a pie chart. Pie charts use arc length of fans to represent ratio of a certain series in total share. It's data format is simpler than bar chart, because it only contains one dimension without category. Besides, since it's not in rectangular system, it doesn't need xAxis，yAxis either.
myChart.setOption({
series : [
{
name: 'Reference Page',
type: 'pie',
radius: '55%',
data:[
{value:400, name:'Searching Engine'},
{value:335, name:'Direct'},
{value:310, name:'Email'},
{value:274, name:'Alliance Advertisement'},
{value:235, name:'Video Advertisement'}
]
}
]
})
With the above code, we can create a simple pie chart:
Here, the value of data is not a single value, as that of the example in get started. Instead, it's an object containing name and value. Data in ECharts can always be a single value, or a configurable object with name, style and label. You may refer to data for more information.
Pie charts of EChart can be made into Nightingale rose charts with roseType field.
roseType: 'angle'
Nightingale rose charts use radius to represent data value.
Commonly used styles of ECharts, like shadow, opacity, color, border-color, border-width, and etc., are set by itemStyle in series.
itemStyle: {
normal: {
// shadow size
shadowBlur: 200,
// horizontal offset of shadow
shadowOffsetX: 0,
// vertical offset of shadow
shadowOffsetY: 0,
// shadow color
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
The effect after added shadow is:
Each itemStyle has two children, normal and emphasis. normal is the style by default, while emphasis is the highlighted style when mouse hovered. The last example shows the effect of adding shadow by default. But in most situations, we may probably need to add shadow to emphasis when mouse is hovered.
itemStyle: {
emphasis: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
Now, we need to change the whole theme as that shown in the example at the beginning of this tutorial. This can be achieved by changing background color and text color.
Background is a global configurable object, so we can set it directly with backgroundColor of option.
setOption({
backgroundColor: '#2c343c'
})
Text style can also be set globally in textStyle.
setOption({
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
})
On the other hand, we can also set them in label.normal.textStyle of each series.
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
}
We also need to set line color of pie chart to be lighter.
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
}
Thus, we can get the following effect.
Similar to itemStyle, label and labelLine also have normal and emphasis children.
Fan colors can be set in itemStyle:
itemStyle: {
normal: {
// 设置扇形的颜色
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
This is quite similar to our expect effect, except that fan colors should be made darker within shadow area, so as to make a sense of layering and space with blocked light.
Each fan's color can be set under data:
data: [{
value:400,
name:'搜索引擎',
itemStyle: {
normal: {
color: 'c23531'
}
}
}, ...]
But since we only need the variation of color in this example, there's a simpler way to map data value to lightness through visualMap.
visualMap: {
// hide visualMap component; use lightness mapping only
show: false,
// mapping with min value at 80
min: 80,
// mapping with max value at 600
max: 600,
inRange: {
// mapping lightness from 0 to 1
colorLightness: [0, 1]
}
}
The final effect is:
Webpack is a popular module packaging tool, which can be used easily to import and packaging ECharts. Here we assume you already have certain understanding about webpack and used it in your project.
Before 3.1.1 version, ECharts package on npm was maintained by third-party. Since 3.1.1, ECharts and zrender on npm are maintained officially by EFE team.
You can use the following command to install ECharts with npm.
npm install echarts --save
ECharts and zrender installed by npm will be placed under node_modules. You can obtain echarts directly in project with require('echarts').
var echarts = require('echarts');
// initialize echarts instance with prepared DOM
var myChart = echarts.init(document.getElementById('main'));
// draw chart
myChart.setOption({
title: { text: 'ECharts entry example' },
tooltip: {},
xAxis: {
data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
},
yAxis: {},
series: [{
name: 'sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
By default, require('echarts') returns the whole ECharts package including all charts and components, so the package size is a bit large. If you have a strict demand of package size, you may include packages on demand.
For example, the code above only uses bar chart, tooltip and title component, so you only need to include these modules, effectively making the package size from more than 400 KB to about 170 KB.
// include ECharts main module
var echarts = require('echarts/lib/echarts');
// include bar chart
require('echarts/lib/chart/bar');
// include tooltip and title component
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
// initialize echarts instance with prepared DOM
var myChart = echarts.init(document.getElementById('main'));
// draw chart
myChart.setOption({
title: { text: 'ECharts introductory example' },
tooltip: {},
xAxis: {
data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
},
yAxis: {},
series: [{
name: 'sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
Available modules see https://github.com/ecomfe/echarts/blob/master/index.js
The same goes for another popular packaging tool browserify, which will not be introduced again here.
You can get ECharts through the following ways.
Choose the version you need and download from official download page. Based on developer's varied need of function and package size, we provide different download packages. If you have concern about package size, you can download full version directly.
Download the latest release version in ECharts GitHub, and you can find the latest version of echarts in dist directory of the unzipped files.
Alternatively, you may get echarts through npm by npm install echarts --save. See detail in use echarts in webpack
ECharts 3 no longer emphysis on using AMD to load packages on need, and AMD loader is no longer included in ECharts. Therefore, it is much easier to include ECharts, in that you only need to include ECharts in script label like most other JavaScript libraries require.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- including ECharts file -->
<script src="echarts.min.js"></script>
</head>
</html>
Before drawing charts, we need to prepare a DOM container with width and height for ECharts.
<body>
<!-- preparing a DOM with width and height for ECharts -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
Then we can initialize an echarts instance through echarts.init, and create a simple bar chart through setOption. Below is the complete code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- including ECharts file -->
<script src="echarts.js"></script>
</head>
<body>
<!-- prepare a DOM container with width and height -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'ECharts entry example'
},
tooltip: {},
legend: {
data:['Sales']
},
xAxis: {
data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
</script>
</body>
</html>
Here is your first chart!
You can also go to ECharts Gallery to view examples.
ECharts, a pure Javascript chart library, can run smoothly on PC and mobile devices, being compatible with most of current Web browsers (IE8/9/10/11, Chrome, Firefox, Safari and so on), it relies on a lightweight Canvas library ZRender, and provides intuitive, vivid, interactive, and highly customizable data visualization charts.
More over, ECharts 3 adds richer interactive functions and more visualization effects, and optimizes more deeply on mobile end.
ECharts provides regular line charts, bar charts, scatter charts, pie charts, K line charts, box charts used for statistics, maps used for geo-data visualization, heatmaps, line charts, Graph charts used for data relationship visualization, treemap, parallel charts for multi-dimensional data visualization, funnel maps for BI, gauge charts, and supports connection and interaction between graphics.
You can download a whole package of all chart components, or you may select the ones you need with online construction builder, if the full package is too large for you.
ECharts started to seperate the concept of "coordinate" from 3.0, supporting rectangular coordinate (containing catesian, as well as grid), polar coordinate (polar), geographic coordinate (geo). Charts can cross coordinate. For example, line chart, bar chart and scatter chart can be placed in the same rectangular coordinate or polar coordinate or even geographic coordinate.
Below is an example that a line chart is in polar coordinate:
Below is an example that a scatter chart is in geographic coordinate:
Precious bandwidth limits Mobile devices with small chart library size. Reconstructing ECharts and ZRender code minimizes it to the smallest size. ECharts has a large number of components and the number is still increasing. So we provide a finer-grained packaging method on demand. The minimum size has been shrunk to 40% of ECharts 2.
Interaction on mobile has also been optimized, like zooming and translating in coordinates with fingers on small screen of mobile. Zooming and translating are also available with mouse scrolling on PC. See the example below:
Interaction is an important way to dig information from data. Overview by default, zoom and filter to check details based on needs are basic requirements of data visualization interaction.
ECharts is constantly moving forward on the road of interaction, we provide components like legend, visualMap, dataZoom, tooltip, as well as data roaming. Operations like selecting enables you to filter data, zoom viewport, and display details.
ECharts 3 comprehensively strenghtens these components. Such as supporting filtering and zooming on all kinds of data axis and dimensions, and enables these components in more types of charts. See the example below:
With the help of Canvas, ECharts can easily display tens of thousands, or even hundreds of thousands data in scatter chart.
The following Weibo signing chart displays 100k+ signing data.
ECharts 3 enhances the support of multi-dimensional data. Besides adding common multi-dimensional data visualization tools like parallel coordinates, it supports mult-dimensional for charts like traditional scatter charts. And with the help of visualMap, you can map data of different dimensions to color, size, opacity, lightness and other different visual tunnels, which provides an even richer visual presentation.
ECharts is data-driven, in that the change of data changes the presentation of chart. Therefore, dymatic data is extremely easy to implement. You only need to get data, fill them in, and ECharts will find the difference between two group of data and present data change through proper animation. With timeline component, you can present data information at higher time dimensions.
ECharts provides eye-catching special effects for visualization of line data, point data and geo-data, and so on.