学习目标:
- 掌握echarts高级功能
学习内容:
- 掌握echarts的动态数据可视化
学习时间:
- 周四15:00-16:00
学习产出:
1、动态柱状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态</title>
<!-- 1、 首先引入echarts-->
<script src = "echarts-5.4.1/dist/echarts.js"></script>
</head>
<body>
<!--2、要给一个容器来装这个图表,根据getElementById('main'),给div绑定一个id="main"-->
<div id="main" style="width: 400px;height: 400px"></div>
<script >
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
const data = [];
for (let i = 0; i < 5; ++i) {
// Math.round()方法即为我们常说的“四舍五入”方法
// 随机取五个0到200之间的整数
data.push(Math.round(Math.random() * 200));
}
option = {
xAxis: {
// 坐标轴刻度最大值。
// 可以设置成特殊值 'dataMax',此时取数据在该轴上的最大值作为最大刻度。
// 不设置时会自动计算最大值保证坐标轴刻度的均匀分布。
max: 'dataMax'
},
yAxis: {
// 类目轴,适用于离散的类目数据
type: 'category',
data: ['A', 'B', 'C', 'D', 'E'],
// 是否是反向坐标轴,表示 Y 轴从下往上是从小到大的排列
inverse: true,
// 动画的时长
animationDuration: 300,
// 数据更新动画的时长。
animationDurationUpdate: 300,
// 如果想只显示前 n 名,将 yAxis.max 设为 n - 1,否则显示所有柱条
max: 3 // only the largest 3 bars will be displayed
},
series: [
{
// 开启该系列的动态排序效果
realtimeSort: true,
// 图例名称
name: 'X',
type: 'bar',
data: data,
label: {
show: true,
position: 'right',
// 如果想要实时改变标签,需要将 series.label.valueAnimation 设为 true
valueAnimation: true
}
}
],
legend: {
// 图例打开
show: true
},
// 初始动画的时长
animationDuration: 0,
// 数据更新动画的时长。
animationDurationUpdate: 3000,
// 初始动画的缓动效果
animationEasing: 'linear',
// 数据更新动画的缓动效果。
animationEasingUpdate: 'linear'
};
function run() {
for (var i = 0; i < data.length; ++i) {
// 随机数大于0.9则乘2000
if (Math.random() > 0.9) {
data[i] += Math.round(Math.random() * 2000);
} else {
// 否则则乘200
data[i] += Math.round(Math.random() * 200);
}
}
// 使用 echarts 实例的 setOption() 可以设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOption 完成。
// 调用方式:myChart.setOption(option); (option:必填参数,对象类型,包含图表的配置项和数据
myChart.setOption({
series: [
{
type: 'bar',
data
}
]
});
}
// setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
setTimeout(function () {
run();
}, 0);
// setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
// setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
setInterval(function () {
run();
}, 3000);
option && myChart.setOption(option);
</script>
</body>
<style scoped>
</style>
</html>