前言
ECharts介绍
- ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库,兼容性强,底层依赖矢量图形
库 ZRender ,提供直观,交互丰富,可高度个性化定制的数据可视化图表 。官方文档
ECharts快速上手
- 步骤1:引入 echarts.js 文件(可使用本地文件、CDN方式等)
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
- 步骤2:准备一个呈现图表的盒子:决定图表显示的位置和大小
<div id='app' style="width: 600px;height: 400px"></div>
- 初始化 echarts 实例对象:通过id属性选择DOM元素
var myCharts = echarts.init(document.getElementById('app'))
- 准备配置项
var option = {
xAxis: {
type: 'category',
data: ['测试', '研发', '产品']
},
yAxis: {
type: 'value'
},
series: [
{
name: '岗位',
type: 'bar',
data: [10, 90, 20]
}
]
}
- 将配置项设置给 echarts 实例对象
myCharts.setOption(option)
<!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>ECharts快速上手</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height: 400px"></div>
<script>
var mCharts = echarts.init(document.getElementById('app'))
var option = {
xAxis: {
type: 'category',
data: ['测试', '研发', '产品']
},
yAxis: {
type: 'value'
},
series: [
{
name: '岗位',
type: 'bar',
data: [10, 90, 20]
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
- 效果
ECharts配置说明
官方配置项使用文档
- xAxis:直角坐标系 中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的
呈现
- yAxis:直角坐标系 中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去
series 下找数据进行图表的绘制
- series:系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据
<!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>ECharts快速上手</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height: 400px"></div>
<script>
var myCharts = echarts.init(document.getElementById('app'))
var option = {
xAxis: {
type: 'category',
data: ['测试', '研发', '产品']
},
yAxis: {
type: 'value'
},
title: {
text: '岗位',
link: 'https://blog.csdn.net/IT_heima',
target: 'blank',
textStyle: {
color: 'pink',
fontWeight: 'bold'
}
},
series: [
{
name: '岗位',
type: 'bar',
data: [10, 90, 20]
}
]
}
myCharts.setOption(option)
</script>
</body>
</html>