1、快速上手
- 步骤1:引入 echarts.js 文件
<script src="js/echarts.min.js"></script>
echarts是一个 js 的库,得先引入这个库文件
- 步骤2:准备一个呈现图表的盒子
这个盒子通常来说就是我们熟悉的 div ,这个 div 决定了图表显示在哪里
<div id="main" style="width: 600px;height:400px;"></div>
- 步骤3:初始化 echarts 实例对象
在这个步骤中, 需要指明图表最终显示在哪里的DOM元素
var myChart = echarts.init(document.getElementById('main'))
- 步骤4:准备配置项
这步很关键,我们最终的效果,到底是显示饼图还是折线图,基本上都是由配置项决定的
- 步骤5:将配置项设置给 echarts 实例对象
通过简单的5个步骤, 就能够把一个简单的柱状图给显示在网页中了.这几个步骤中, 步骤4最重要,一个图表最终呈现什么样子,完全取决于这个配置项.所以对于不同的图表, 除了配置项会发生改变之外,其他的代码 都是固定不变的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px"></div>
<script>
var mCharts=echarts.init(document.querySelector('div'));
var option={
xAxis:{
type:'category',
data:['小明','小红','小王']
},
yAxis:{
type:'value'
},
series:[
{
name:'语文',
type:'bar',
data:[70,60,80]
}
]
}
mCharts.setOption(option);
</script>
</body>
</html>
2、配置项
- xAxis
直角坐标系 中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的
呈现
- yAxis
直角坐标系 中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去series 下找数据进行图表的绘制
- series
系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据
更多配置看官方文档
配置项手册
https://echarts.apache.org/zh/option.html#title
3、柱状图
坐标轴 xAxis 或者 yAxis 中的配置, type 的值主要有两种: category 和 value , 如果 type属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现. 如果 type 属性配置为 value ,那么无需配置 data , 此时 y 轴会自动去 series 下找数据进行图表的绘制
3.1、基本配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="height: 600px;width: 400px;"></div>
<script>
var mCharts=echarts.init(document.querySelector('div'));
var xData=["小明","小强","小王","小红","小蓝","小紫"];
var yData=[88,67,89,77,97,90];
var option={
xAxis:{
type:"category",
data:xData
},
yAxis:{
type:'value'
},
series:[
{
name:'语文',
type:'bar',
data:yData
}
]
}
mCharts.setOption(option);
</script>
</body>
</html>
3.2、标记
3.2.1、最大值、最小值、平均值
series: [
{
......
markPoint: {
data: [
{
type: 'max', name: '最大值'
},
{
type: 'min', name: '最小值'
}
]
}
}
]
series: [
{
......
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
}
}
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="height: 600px;width: 400px;"></div>
<script>
var mCharts=echarts.init(document.querySelector('div'));
var xData=["小明","小强","小王","小红","小蓝","小紫"];
var yData=[88,67,89,77,97,90];
var option={
xAxis:{
type:"category",
data:xData
},
yAxis:{
type:'value'
},
series:[
{
name:'语文',
type:'bar',
data:yData,
markPoint:{
data:[
{
type:'max',
name:'最大值'
},
{
type:'min',
name:'最小值'
}
]
},
markLine:{
data:[
{
type:"average",
name:'平均值'
}
]
}
}
]
}
mCharts.setOption(option);
</script>
</body>
</html>
3.2.2、数值显示 label
series: [
{
......
label: {
show: true, // 是否可见
}
}
]
3.2.3、柱宽度 barWidth
series: [
{
......
barWidth: '30%' // 柱的宽度
}
]
3.2.4、横向柱状图
所谓的横向柱状图, 只需要让x轴的角色和y轴的角色互换一下即可. 既 xAxis 的 type 设置为value , yAxis 的 type 设置为 category , 并且设置 data 即可
var option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: xDataArr
},
series: [
{
type: 'bar',
data: yDataArr
}
]
}