导读
最近接到一任务,实现下图所示的折线图:
需求:
- 隐藏横坐标
- 纵坐标最大最小值自定义
- 折线图中显示纵坐标的值
- 折线图两边不留白
- 添加标题
- 去除动画
开发环境
版本号 | 描述 | |
---|---|---|
操作系统 | Mac | |
echarts | 5.2.0 | |
实战
初始化echarts环境
引入js、提供画板<div id="main">
。
<!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>夜猫逐梦自动化</title>
<script src="https://lib.baomitu.com/echarts/5.2.0/echarts.common.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:450px;"></div>
</body>
</html>
隐藏横坐标
xAxis: {
show: false
},
纵坐标最大最小值自定义
yAxis: {
type: 'value',
max: function(value) {
return Math.ceil(value.max + 1);
},
min: function(value) {
return Math.floor(value.min - 1);
}
},
折线图中显示纵坐标的值
series: [{
itemStyle: { normal: { label: { show: true } } }
}],
折线图两边不留白
grid: {
x: 30,
y: 30,
x2: 30,
y2: 30,
borderWidth: 1
},
添加标题
title: {
text: '爆米花',
x: 'center', // 横轴中间
y: 'top' // 纵轴上方
},
去除动画
series: [{
animation: false,
}]
全部js代码
var g_cfg = {
x: ['2021.02', '2021.02', '2021.05', '2021.05', '2021.06', '2021.07', '2021.12'],
y: [8.0, 9.0, 8.0, 11.0, 9.0, 9.0, 8.0],
}
var option = {
title: {
text: '爆米花',
x: 'center',
y: 'top'
},
xAxis: {
show: false,
type: 'category',
data: g_cfg.x
},
yAxis: {
type: 'value',
max: function(value) {
return Math.ceil(value.max + 1);
},
min: function(value) {
return Math.floor(value.min - 1);
}
},
series: [{
animation: false,
// universalTransition: false,
data: g_cfg.y,
type: 'line',
itemStyle: { normal: { label: { show: true } } }
}],
grid: {
x: 30,
y: 30,
x2: 30,
y2: 30,
borderWidth: 1
},
};
// 接下来的使用就跟之前一样,初始化图表,设置配置项
var myChart = echarts.init(document.getElementById('main'));
myChart.resize({
width: 15 * 4 * g_cfg.x.length,
height: 450
});
myChart.setOption(option);
document.querySelector('#td').width = 15 * 4 * g_cfg.x.length - 60
参考资料
- echarts官网 https://echarts.apache.org/handbook/zh/get-started/
- qq群:夜猫逐梦技术交流裙/953949723