01-echarts入门及基本图表
目录
1. echarts初使用
官方教程：快速入门：https://echarts.apache.org/handbook/zh/get-started/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
2. 基本图表
这里引入的js文件全是echarts.min.js
2.1 标准柱状图
关键： series中的 type:'bar'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2-7-标准柱形图</title>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div id="box" style="height: 600px;width: 1200px"></div>
<script>
var myChart = echarts.init(document.getElementById('box'));
var option = {
title: {
text: '2-7 标准柱形图',
subtext: '某某',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Direct',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
2.2 堆积柱状图
关键： series中的stack，堆在一根柱子上的stack值要相同。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2-7-标准柱状图</title>
<style>
.box {
width: 1200px;
height: 600px;
}
</style>
</head>
<body>
<!-- 引入 -->
<script src="js/echarts.min.js"></script>
<!-- DOM容器 -->
<div class="box"></div>
<script>
// 注意要在script标签里面写！！！
// 初始化实例对象（myChart）
var myChart = echarts.init(document.querySelector('.box'));
// 指定配置项和数据
var option = {
title: {
text: '2-8 堆积柱状图',
subtext: '某某'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'left',
feature: {
mark:{show: true},
dataView:{show: true,readOnly: false},
magicType: {show: true,type:['line','bar','stack','tiled']},
restore:{show: true},
saveAsImage:{show: true}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '直接访问',
type: 'bar',
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '邮件营销',
type: 'bar',
stack: '广告',
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'bar',
stack: '广告',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'bar',
stack: '广告',
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '搜索引擎',
type: 'bar',
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
emphasis: {
focus: 'series'
},
markLine: {
lineStyle: {
type: 'dashed'
},
data: [[{ type: 'min' }, { type: 'max' }]]
}
},
{
name: '百度',
type: 'bar',
barWidth: 5,
stack: '搜索引擎',
emphasis: {
focus: 'series'
},
data: [620, 732, 701, 734, 1090, 1130, 1120]
},
{
name: '谷歌',
type: 'bar',
stack: '搜索引擎',
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 290, 230, 220]
},
{
name: '必应',
type: 'bar',
stack: '搜索引擎',
emphasis: {
focus: 'series'
},
data: [60, 72, 71, 74, 190, 130, 110]
},
{
name: '其它',
type: 'bar',
stack: '搜索引擎',
emphasis: {
focus: 'series'
},
data: [62, 82, 91, 84, 109, 110, 120]
}
]
};
// 将配置项设置给实例对象
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
2.3 条形图
关键：xAxis中的type变成 'value',yAxis中的type变成 'category'，二者调换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2-9-条形图</title>
<style>
.box {
width: 1200px;
height: 600px;
}
</style>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div class="box"></div>
<script>
var myChart = echarts.init(document.querySelector('.box'));
var option = {
title: {
text: '世界人口——标题',
subtext: '标准条形图——副标题'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
calculable: true,
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
,
axisLine: { // 横轴
show: true
}
},
yAxis: {
type: 'category',
data: ['A国', 'B国', 'C国', 'D国', 'E国', '世界人口（万）']
},
series: [
{
name: '2011年',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
{
name: '2012年',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
2.4 瀑布图
关键：（1）series中的stack，堆在一根柱子上的stack要相同；（2）注意计算柱子的值，悬空的柱子下面是有柱子的，只不过是透明的。
上一根柱子的透明值减去下一根实际值等于下一根透明值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2-10-瀑布图</title>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div id="box" style="width: 1200px;height: 600px"></div>
<script>
var myChart = echarts.init(document.getElementById('box'));
var option = {
title: {
text: '2-10 瀑布图',
subtext: '某某'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
var tar = params[1];
return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
}
},
toolbox: {
show: true,
feature: {
mark:{show: true},
dataView:{show: true,readOnly: false},
restore:{show: true},
saveAsImage:{show: true}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: { show: false },
data: ['总费用', '房租', '水电费', '交通费', '伙食费', '其它']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Placeholder',
type: 'bar',
stack: 'Total',
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
},
emphasis: {
// 也就是下半部分是透明的堆积柱状图
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
}
},
data: [0, 1700, 1400, 1200, 300, 0]
},
{
name: 'Life Cost',
type: 'bar',
stack: 'Total',
label: {
show: true,
position: 'inside'
},
data: [2900, 1200, 300, 200, 900, 300]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
2.5 标准折线图
关键：（1）series中的 type:'line' ；（2）折线变成平滑的曲线：series中的 smooth: true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2-11-标准折线图</title>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div id="box" style="height: 600px;width: 1200px"></div>
<script>
var myChart = echarts.init(document.getElementById('box'));
var option = {
backgroundColor: '#eee',
title: {
text: '2-11-标准折线图',
subtext: '某某'
},
tooltip: { //配置提示框组件
trigger: 'axis'
},
legend: {
data: ['人流量'],
left: 'right'
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '人流量',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
//平滑的关键
smooth: true
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
2.6 堆积面积图
关键：（1）series中的 type:'line' ；（2）series中的stack值相同。
和堆积柱状图相似，只不过一个柱状一个折线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2-12-堆积面积图</title>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div id="box" style="height: 600px;width: 1200px;"></div>
<script>
var myChart=echarts.init(document.getElementById('box'));
var option = {
title: {
text: '2-12 堆积面积图',
subtext:'某某'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['手机', '冰箱', '空调', '电视', '其他']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '手机',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '冰箱',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '空调',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '电视',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '其他',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
2.7 阶梯图
关键：（1）series中的 type:'line' ；（2）series中的step属性。
是否是阶梯线图。可以设置为 true 显示成阶梯线图，也支持设置成 'start', 'middle', 'end' 分别配置在当前点，当前点与下个点的中间点，下个点拐弯。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2-13-阶梯图</title>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div id="box" style="height: 600px;width: 1200px"></div>
<script>
var myChart = echarts.init(document.getElementById('box'));
var option = {
title: {
text: '2-13 阶梯图',
subtext: '某某'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['景区A', '景区B', '景区C']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: ['2013年', '2014年', '2015年', '2016年', '2017年', '2018年', '2019年']
},
yAxis: {
type: 'value'
},
series: [
{
name: '景区A',
type: 'line',
step: 'start',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '景区B',
type: 'line',
step: 'middle',
data: [220, 282, 201, 234, 290, 430, 410]
},
{
name: '景区C',
type: 'line',
step: 'end',
data: [450, 432, 401, 454, 590, 530, 510]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
2.8 饼图
关键：（1）series中的 type:'pie' ；（2）series中的radius属性。第三种就可以把饼图变为圆环图。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2-14-饼图</title>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div id="box" style="height: 600px;width: 800px"></div>
<script>
var myChart = echarts.init(document.getElementById('box'));
var option = {
title: {
text: '2-14 饼图',
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)'
}
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
将radius变为20% radius: '20%', 饼图变小：
2.9 嵌套饼图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2-15-嵌套饼图</title>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div id="box" style="height: 600px;width: 1200px"></div>
<script>
var myChart = echarts.init(document.getElementById('box'));
var option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
title: {
text: '2-15 嵌套饼图',
subtext: '某某',
textStyle: {
color: 'pink',
// left:'center',textAlign: 'left'
},
// 标题可以居中
left: 'center'
// textAlign: 'left'
},
legend: {
orient: 'vertical',
x: 32,
y: 74,
data: [
'1-软件技术',
'1-移动应用开发',
'2-大数据技术与应用',
'2-移动互联应用技术',
'2-云计算应用与技术',
'3-投资与理财',
'3-财务管理',
]
},
toolbox: {
show: true,
x: 800,
y: 74,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['pie', 'funnel'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: false,
series: [
{
name: '专业名称',
type: 'pie',
selectedMode: 'single',
radius: ['10%', '30%'],
label: {
position: 'inner',
},
labelLine: {
show: false // labelLine是否显示视觉引导线。
},
data: [
{ value: 600, name: '财经学院' },
{ value: 900, name: '大数据学院' },
{ value: 1700, name: '计算机学院', selected: true }
]
},
{
name: '专业名称',
type: 'pie',
radius: ['40%', '55%'],
data: [
{ value: 1048, name: '1-软件技术' },
{ value: 335, name: '1-移动应用开发' },
{ value: 310, name: '2-大数据技术与应用' },
{ value: 251, name: '2-移动互联应用技术' },
{ value: 234, name: '2-云计算应用与技术' },
{ value: 147, name: '3-投资与理财' },
{ value: 135, name: '3-财务管理' },
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
视觉引导线：labelLine
饼图标签：label
2.10 南丁格尔玫瑰图
关键：（1）series中的 type:'pie' ；（2）series中的roseType: 'area'。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2-16-南丁格尔玫瑰图</title>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div id="box" style="height: 600px;width: 1200px"></div>
<script>
var myChart=echarts.init(document.getElementById('box'));
var option = {
title: {
text: '2-16 南丁格尔玫瑰图',
subtext:'某某',
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 'bottom',
data: [
'计算机',
'大数据',
'外国语',
'机器人',
'建工',
'机电',
'艺术',
'财经'
]
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Area Mode',
type: 'pie',
radius: [20, 140],
// center: ['50%', '50%'],设置图的位置
roseType: 'area',
itemStyle: {
borderRadius: 5
},
data: [
{ value: 40, name: '计算机' },
{ value: 33, name: '大数据' },
{ value: 28, name: '外国语' },
{ value: 22, name: '机器人' },
{ value: 20, name: '建工' },
{ value: 15, name: '机电' },
{ value: 12, name: '艺术' },
{ value: 10, name: '财经' }
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
将series中的center设置为center: ['70%', '50%']，图的位置改变：
2.11 圆环图
关键：（1）series中的 type:'pie' ；（2）series中的radius属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2-17-圆环图</title>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div id="box" style="width: 800px;height: 600px"></div>
<script>
var myChart = echarts.init(document.getElementById('box'));
var option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
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: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
浙公网安备 33010602011771号