一、ECharts简介
ECharts是一个使用JavaScript实现的开源可视化库，它可以轻松地嵌入到各种网页中，实现丰富的数据可视化效果。ECharts提供了多种图表类型，如折线图、柱状图、饼图、地图等，可以帮助用户将复杂的数据以直观的方式呈现出来。
二、环境搭建
在学习ECharts之前，我们需要搭建一个合适的学习环境。以下是搭建ECharts环境的步骤：
- 下载ECharts库：从ECharts官网下载ECharts库，通常下载最新版本的ECharts。
- 引入ECharts库：在HTML文件中引入ECharts库。可以通过CDN引入，也可以将下载的ECharts库文件放在本地。
- 准备数据：ECharts需要通过JavaScript对象来表示数据，因此我们需要准备数据。
三、基础图表
1. 折线图
折线图是ECharts中最常用的图表之一，用于展示数据的变化趋势。
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '折线图示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
2. 柱状图
柱状图用于比较不同类别或组的数据。
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '柱状图示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
3. 饼图
饼图用于展示数据的占比关系。
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '饼图示例'
},
tooltip: {},
legend: {
orient: 'vertical',
left: 10,
data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
},
series: [
{
name: '销量',
type: 'pie',
radius: '55%',
data:[
{value:5, name:'衬衫'},
{value:20, name:'羊毛衫'},
{value:36, name:'雪纺衫'},
{value:10, name:'裤子'},
{value:10, name:'高跟鞋'},
{value:20, name:'袜子'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
四、高级应用
1. 地图
ECharts提供了丰富的地图数据，可以展示不同地区的数据。
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '地图示例'
},
tooltip: {},
visualMap: {
min: 0,
max: 100,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文本，默认为数值文本
calculable: true
},
series: [
{
name: '销量',
type: 'map',
mapType: 'china',
roam: true,
label: {
show: true
},
data:[
{name: '北京',value: randomData() },
{name: '天津',value: randomData() },
{name: '上海',value: randomData() },
{name: '重庆',value: randomData() },
{name: '河北',value: randomData() },
{name: '河南',value: randomData() },
{name: '云南',value: randomData() },
{name: '辽宁',value: randomData() },
{name: '黑龙江',value: randomData() },
{name: '湖南',value: randomData() },
{name: '安徽',value: randomData() },
{name: '山东',value: randomData() },
{name: '新疆',value: randomData() },
{name: '江苏',value: randomData() },
{name: '浙江',value: randomData() },
{name: '江西',value: randomData() },
{name: '湖北',value: randomData() },
{name: '广西',value: randomData() },
{name: '甘肃',value: randomData() },
{name: '山西',value: randomData() },
{name: '内蒙古',value: randomData() },
{name: '陕西',value: randomData() },
{name: '吉林',value: randomData() },
{name: '福建',value: randomData() },
{name: '贵州',value: randomData() },
{name: '广东',value: randomData() },
{name: '青海',value: randomData() },
{name: '西藏',value: randomData() },
{name: '四川',value: randomData() },
{name: '海南',value: randomData() },
{name: '台湾',value: randomData() },
{name: '香港',value: randomData() },
{name: '澳门',value: randomData() }
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
2. 3D图表
ECharts支持3D图表，可以展示更丰富的视觉效果。
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '3D散点图示例'
},
tooltip: {},
xAxis3D: {
type: 'value'
},
yAxis3D: {
type: 'value'
},
zAxis3D: {
type: 'value'
},
series: [{
type: 'scatter3D',
data: [
[10.0, 8.04, 5],
[8.0, 6.95, 7],
[13.0, 7.58, 11],
[9.0, 8.81, 8],
[11.0, 8.33, 9],
[14.0, 9.96, 10],
[6.0, 7.24, 4],
[4.0, 4.26, 3],
[12.0, 10.84, 8],
[7.0, 4.82, 5],
[5.0, 5.68, 4.5],
[8.0, 4.17, 4],
[11.0, 6.1, 5],
[6.0, 7.34, 4],
[4.0, 6.48, 5],
[1.0, 3.75, 1],
[2.0, 5.56, 6],
[3.0, 7.71, 5.5],
[4.0, 4.95, 2],
[5.0, 5.62, 3.5],
[6.0, 6.26, 4.5],
[7.0, 7.04, 5.5],
[8.0, 5.82, 4.5],
[9.0, 6.77, 5.5],
[10.0, 7.11, 5],
[11.0, 7.27, 6],
[12.0, 8.11, 6],
[13.0, 8.33, 5],
[14.0, 9.93, 7],
[15.0, 9.13, 6]
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
五、总结
通过本文的学习，我们了解了ECharts的基本概念、环境搭建、基础图表以及高级应用。希望这些内容能帮助你快速入门并精通ECharts。在实际应用中，你可以根据自己的需求调整图表的样式、数据等，创造出更多富有创意的图表。