目录
一 横向柱状图
<!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>Document</title>
<script src="echarts.min.js"></script>
<style>
#main {
height: 800px;
float: right;
}
</style>
</head>
<body>
<!-- 为echarts准备一个具备大小宽高的dom -->
<div id="main" style="width:50%"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"))
// 指定图表的配置项和数据
var option = {
title: {
text: '标题'
},
tooltip: {
trigger: 'axis',
axisPointer: {
// type: 'shadow'
}
},
legend: {
data: ["a", "b"]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
},
yAxis: {
type: 'category',
data: ['a', "b", "c", "d", "e", "f"]
},
series: [
{
name: 'a',
type: 'bar',
stack: 'b',
label: {
// show: true
},
emphasis: {
focus: 'series'
},
barWidth: 60,
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'b',
type: 'bar',
stack: 'b',
emphasis: {
focus: 'series'
},
barWidth: 60,
data: [300, 400, 500, 600, 700, 800]
}
]
};
// 使指定的配置配置项和数据显示图表
option && myChart.setOption(option);
</script>
</body>
</html>
二 竖向柱状图
<!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>Document</title>
<script src="echarts.min.js"></script>
<style>
#main {
height: 800px;
float: right;
}
</style>
</head>
<body>
<!-- 为echarts准备一个具备大小宽高的dom -->
<div id="main" style="width:50%"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"))
// 指定图表的配置项和数据
var option = {
title: {
text: "标题"
},
color: ['#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
legend: {
data: ["a", "b"]
},
xAxis: {
type: 'category',
data: ['a', 'b', "c", "d","e","f","g","h",]
},
yAxis: {
type: 'value'
},
series: [
{
name: "a",
type: 'bar',
stack: 'a',
data: [500, 800, 1200, 800,500, 800, 1200, 800],
barWidth: 60
},
{
name: "b",
type: 'bar',
stack: 'a',
data: [510, 810, 1210, 810,510, 810, 1210, 810],
barWidth: 60
},
]
};
// 使指定的配置配置项和数据显示图表
option && myChart.setOption(option);
</script>
</body>
</html>
三 折线图
<!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>Document</title>
<script src="echarts.min.js"></script>
<style>
#main {
height: 800px;
float: right;
}
</style>
</head>
<body>
<!-- 为echarts准备一个具备大小宽高的dom -->
<div id="main" style="width:50%"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"))
// 指定图表的配置项和数据
var option = {
title: {
text: '标题'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ["a","b"]
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'a',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'b',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
]
};
// 使指定的配置配置项和数据显示图表
option && myChart.setOption(option);
</script>
</body>
</html>
四.渐变
<!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>Document</title>
<script src="echarts.min.js"></script>
<style>
#main {
height: 800px;
float: right;
}
</style>
</head>
<body>
<!-- 为echarts准备一个具备大小宽高的dom -->
<div id="main" style="width:60%"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"))
// 指定图表的配置项和数据
var option = {
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
title: {
text: '标题'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Line 1', 'Line 2']
},
toolbox: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ["a", "b", "c", "d", "e", "f", "g","a", "b", "c", "d", "e", "f", "g"]
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Line 1',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
lineStyle: {
color: 'rgb(128, 255, 165)',
width: 2
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(128, 255, 165)'
},
{
offset: 1,
color: 'transparent'
}
])
},
emphasis: {
focus: 'series'
},
data: [140, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90, 340, 250]
},
{
name: 'Line 2',
type: 'line',
stack: 'Total',
smooth: true,
showSymbol: false,
lineStyle: {
color: 'rgb(77, 119, 255)',
width: 2
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'rgb(77, 119, 255)'
}, {
offset: 1, color: 'transparent'
}]
),
},
},
emphasis: {
focus: 'series'
},
data: [120, 282, 111, 234, 220, 340, 310,120, 282, 111, 234, 220, 340, 310]
},
]
};
// 使指定的配置配置项和数据显示图表
option && myChart.setOption(option);
</script>
</body>
</html>
五 环状图
<!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>Document</title>
<script src="echarts.min.js"></script>
<style>
#main {
height: 800px;
float: right;
}
</style>
</head>
<body>
<!-- 为echarts准备一个具备大小宽高的dom -->
<div id="main" style="width:90%"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"))
// 指定图表的配置项和数据
var option = {
dataset: [
{
source: [
['Product', 'Sales', 'Price', 'Year'],
['a', 123, 32, 2011],
['b', 231, 14, 2011],
['c', 235, 5, 2011],
['d', 341, 25, 2011],
['f', 122, 29, 2011],
['a', 143, 30, 2012],
['b', 201, 19, 2012],
['c', 255, 7, 2012],
['d', 241, 27, 2012],
['f', 102, 34, 2012],
['a', 153, 28, 2013],
['b', 181, 21, 2013],
['c', 395, 4, 2013],
['d', 281, 31, 2013],
['f', 92, 39, 2013],
['a', 223, 29, 2014],
['b', 211, 17, 2014],
['c', 345, 3, 2014],
['d', 211, 35, 2014],
['f', 72, 24, 2014]
]
},
{
transform: {
type: 'filter',
config: { dimension: 'Year', value: 2011 }
}
},
{
transform: {
type: 'filter',
config: { dimension: 'Year', value: 2012 }
}
},
],
series: [
{
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
},
datasetIndex: 1
},
{
type: 'pie',
radius: 50,
center: ['50%', '75%'],
datasetIndex: 2
}
],
media: [
{
// query: { minAspectRatio: 1 },
option: {
series: [
{ center: ['35%', '40%'] },
{ center: ['35%', '40%'] },
]
}
},
// {
// option: {
// series: [
// { center: ['50%', '25%'] },
// { center: ['50%', '50%'] },
// ]
// }
// }
]
};
// 使指定的配置配置项和数据显示图表
option && myChart.setOption(option);
</script>
</body>
</html>