要制作有创新型，个性化的数据体验，大数据时代不应该停留在传统的模式上，应该采用多种模式来满足不同的用户，个性化，创新型是未来数据可视化的发展趋势，近几年，数据可视化快速发展，其中ECharts也受到了非常欢迎。
ECharts是一个使用JavaScript实现的开源可视化库，涵盖各行业图表，满足各种需求，如提供了折线图，柱状图，散点图，饼图，K线图，地图，关系图，漏斗图，仪表盘等。其动态数据的显示也吸引了大量开发者的使用，不仅如此，ECharts提供了Eharts GL,可以实现三位地球，建筑等可视化效果，可应用在VR，大屏场景中，效果酷炫。
小册也将从基础介绍ECharts的入门使用方法，环境，常用组件，可视化图，如何利用ECharts制作一些简单的数据可视化图表，一起学习走进ECharts的大门；再从复杂的动态可视化图一一介绍如何制作及其使用，再到如何使用ECharts开发应用在项目中的案例等。
// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
// 初始化ECharts实例
var myChart1 = echarts.init(document.getElementById('main1'));
option1 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
// 使用刚指定的配置项和数据显示图表
myChart1.setOption(option1);
// 初始化ECharts实例
var myChart2 = echarts.init(document.getElementById('main2'));
option2 = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}]
};
// 使用刚指定的配置项和数据显示图表
myChart2.setOption(option2);
// 初始化ECharts实例
var myChart3 = echarts.init(document.getElementById('main3'));
option3 = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart2.setOption(option3);
// 初始化ECharts实例
var myChart4 = echarts.init(document.getElementById('main4'));
option4 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}]
};
// 使用刚指定的配置项和数据显示图表
myChart4.setOption(option4);
// 初始化ECharts实例
var myChart5 = echarts.init(document.getElementById('main5'));
option5 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
// 使用刚指定的配置项和数据显示图表
myChart5.setOption(option5);
// 初始化ECharts实例
var myChart6 = echarts.init(document.getElementById('main6'));
option6 = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart6.setOption(option6);
// 初始化ECharts实例
var myChart7 = echarts.init(document.getElementById('main7'));
option7 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, {
value: 200,
itemStyle: {
color: '#a90000'
}
}, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
// 使用刚指定的配置项和数据显示图表
myChart7.setOption(option7);
// 初始化ECharts实例
var myChart8 = echarts.init(document.getElementById('main8'));
option8 = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart8.setOption(option8);
// 初始化ECharts实例
var myChart9 = echarts.init(document.getElementById('main9'));
option9 = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart9.setOption(option9);
// 初始化ECharts实例
var myChart10 = echarts.init(document.getElementById('main10'));
option10 = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart10.setOption(option10);
// 初始化ECharts实例
var myChart11 = echarts.init(document.getElementById('main11'));
option11 = {
backgroundColor: '#2c343c',
title: {
text: 'Customized Pie',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item'
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 274, name: '联盟广告'},
{value: 235, name: '视频广告'},
{value: 400, name: '搜索引擎'}
].sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius',
label: {
color: 'rgba(255, 255, 255, 0.3)'
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart11.setOption(option11);
// 初始化ECharts实例
var myChart12 = echarts.init(document.getElementById('main12'));
var symbolSize = 20;
var data = [[40, -10], [-30, -5], [-76.5, 20], [-63.5, 40], [-22.1, 50]];
option12 = {
title: {
text: 'Try Dragging these Points',
left: 'center'
},
tooltip: {
triggerOn: 'none',
formatter: function (params) {
return 'X: ' + params.data[0].toFixed(2) + '< br >Y: ' + params.data[1].toFixed(2);
}
},
grid: {
top: '8%',
bottom: '12%',
},
xAxis: {
min: -100,
max: 70,
type: 'value',
axisLine: {onZero: false}
},
yAxis: {
min: -30,
max: 60,
type: 'value',
axisLine: {onZero: false}
},
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
filterMode: 'none'
},
{
type: 'slider',
yAxisIndex: 0,
filterMode: 'none'
},
{
type: 'inside',
xAxisIndex: 0,
filterMode: 'none'
},
{
type: 'inside',
yAxisIndex: 0,
filterMode: 'none'
}
],
series: [
{
id: 'a',
type: 'line',
smooth: true,
symbolSize: symbolSize,
data: data
}
]
};
setTimeout(function () {
// Add shadow circles (which is not visible) to enable drag.
myChart12.setOption({
graphic: data.map(function (item, dataIndex) {
return {
type: 'circle',
position: myChart12.convertToPixel('grid', item),
shape: {
cx: 0,
cy: 0,
r: symbolSize / 2
},
invisible: true,
draggable: true,
ondrag: function (dx, dy) {
onPointDragging(dataIndex, [this.x, this.y]);
},
onmousemove: function () {
showTooltip(dataIndex);
},
onmouseout: function () {
hideTooltip(dataIndex);
},
z: 100
};
})
});
}, 0);
window.addEventListener('resize', updatePosition);
myChart12.on('dataZoom', updatePosition);
function updatePosition() {
myChart12.setOption({
graphic: data.map(function (item, dataIndex) {
return {
position: myChart12.convertToPixel('grid', item)
};
})
});
}
function showTooltip(dataIndex) {
myChart12.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: dataIndex
});
}
function hideTooltip(dataIndex) {
myChart12.dispatchAction({
type: 'hideTip'
});
}
function onPointDragging(dataIndex, pos) {
data[dataIndex] = myChart12.convertFromPixel('grid', pos);
// Update data
myChart12.setOption({
series: [{
id: 'a',
data: data
}]
});
}
// 使用刚指定的配置项和数据显示图表
myChart12.setOption(option12);
// 初始化ECharts实例
var myChart13 = echarts.init(document.getElementById('main13'));
var weatherIcons = {
'Sunny': 'img/sunny_128.png',
'Cloudy': 'img/cloudy_128.png',
'Showers': 'img/showers_128.png'
};
option13 = {
title: {
text: '天气情况统计',
subtext: '虚构数据',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} < br />{b} : {c} ({d}%)'
},
legend: {
bottom: 10,
left: 'center',
data: ['西凉', '益州', '兖州', '荆州', '幽州']
},
series: [
{
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: [
{
value: 1548,
name: '幽州',
label: {
formatter: [
'{title|{b}}{abg|}',
' {weatherHead|天气}{valueHead|天数}{rateHead|占比}',
'{hr|}',
' {Sunny|}{value|202}{rate|55.3%}',
' {Cloudy|}{value|142}{rate|38.9%}',
' {Showers|}{value|21}{rate|5.8%}'
].join('\n'),
backgroundColor: '#eee',
borderColor: '#777',
borderWidth: 1,
borderRadius: 4,
rich: {
title: {
color: '#eee',
align: 'center'
},
abg: {
backgroundColor: '#333',
width: '100%',
align: 'right',
height: 25,
borderRadius: [4, 4, 0, 0]
},
Sunny: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Sunny
}
},
Cloudy: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Cloudy
}
},
Showers: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Showers
}
},
weatherHead: {
color: '#333',
height: 24,
align: 'left'
},
hr: {
borderColor: '#777',
width: '100%',
borderWidth: 0.5,
height: 0
},
value: {
width: 20,
padding: [0, 20, 0, 30],
align: 'left'
},
valueHead: {
color: '#333',
width: 20,
padding: [0, 20, 0, 30],
align: 'center'
},
rate: {
width: 40,
align: 'right',
padding: [0, 10, 0, 0]
},
rateHead: {
color: '#333',
width: 40,
align: 'center',
padding: [0, 10, 0, 0]
}
}
}
},
{value: 735, name: '荆州'},
{value: 510, name: '兖州'},
{value: 434, name: '益州'},
{value: 335, name: '西凉'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart13.setOption(option13);
// 初始化ECharts实例
var myChart14 = echarts.init(document.getElementById('main14'));
option14 = {
tooltip: {
trigger: 'item',
formatter: '{a} < br />{b}: {c} ({d}%)'
},
legend: {
data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
},
series: [
{
name: '访问来源',
type: 'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
position: 'inner',
fontSize: 14,
},
labelLine: {
show: false
},
data: [
{value: 1548, name: '搜索引擎'},
{value: 775, name: '直达'},
{value: 679, name: '营销广告', selected: true}
]
},
{
name: '访问来源',
type: 'pie',
radius: ['45%', '60%'],
labelLine: {
length: 30,
},
label: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: '#F6F8FC',
borderColor: '#8C8D8E',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#6E7079',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#8C8D8E',
width: '100%',
borderWidth: 1,
height: 0
},
b: {
color: '#4C5058',
fontSize: 14,
fontWeight: 'bold',
lineHeight: 33
},
per: {
color: '#fff',
backgroundColor: '#4C5058',
padding: [3, 4],
borderRadius: 4
}
}
},
data: [
{value: 1048, name: '百度'},
{value: 335, name: '直达'},
{value: 310, name: '邮件营销'},
{value: 251, name: '谷歌'},
{value: 234, name: '联盟广告'},
{value: 147, name: '必应'},
{value: 135, name: '视频广告'},
{value: 102, name: '其他'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart14.setOption(option14);
// 初始化ECharts实例
var myChart15 = echarts.init(document.getElementById('main15'));
var weatherIcons = {
'Sunny': 'img/sunny_128.png',
'Cloudy': 'img/cloudy_128.png',
'Showers': 'img/showers_128.png'
};
var seriesLabel = {
show: true
}
option15 = {
title: {
text: 'Weather Statistics'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['City Alpha', 'City Beta', 'City Gamma']
},
grid: {
left: 100
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'value',
name: 'Days',
axisLabel: {
formatter: '{value}'
}
},
yAxis: {
type: 'category',
inverse: true,
data: ['Sunny', 'Cloudy', 'Showers'],
axisLabel: {
formatter: function (value) {
return '{' + value + '| }\n{value|' + value + '}';
},
margin: 20,
rich: {
value: {
lineHeight: 30,
align: 'center'
},
Sunny: {
height: 40,
align: 'center',
backgroundColor: {
image: weatherIcons.Sunny
}
},
Cloudy: {
height: 40,
align: 'center',
backgroundColor: {
image: weatherIcons.Cloudy
}
},
Showers: {
height: 40,
align: 'center',
backgroundColor: {
image: weatherIcons.Showers
}
}
}
}
},
series: [
{
name: 'City Alpha',
type: 'bar',
data: [165, 170, 30],
label: seriesLabel,
markPoint: {
symbolSize: 1,
symbolOffset: [0, '50%'],
label: {
formatter: '{a|{a}\n}{b|{b} }{c|{c}}',
backgroundColor: 'rgb(242,242,242)',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
padding: [4, 10],
lineHeight: 26,
// shadowBlur: 5,
// shadowColor: '#000',
// shadowOffsetX: 0,
// shadowOffsetY: 1,
position: 'right',
distance: 20,
rich: {
a: {
align: 'center',
color: '#fff',
fontSize: 18,
textShadowBlur: 2,
textShadowColor: '#000',
textShadowOffsetX: 0,
textShadowOffsetY: 1,
textBorderColor: '#333',
textBorderWidth: 2
},
b: {
color: '#333'
},
c: {
color: '#ff8811',
textBorderColor: '#000',
textBorderWidth: 1,
fontSize: 22
}
}
},
data: [
{type: 'max', name: 'max days: '},
{type: 'min', name: 'min days: '}
]
}
},
{
name: 'City Beta',
type: 'bar',
label: seriesLabel,
data: [150, 105, 110]
},
{
name: 'City Gamma',
type: 'bar',
label: seriesLabel,
data: [220, 82, 63]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart15.setOption(option15);