echarts | 易学教程

参考链接：（https://blog.csdn.net/Y_Cfeng/article/details/92838516）（侵删）

push shift进行更新：

1：定义echarts的option

let option = {
// 标题
　title: {
　　text: “空气温度与时间的关系图”,
　　left: “center”
　},
// 提示框
　tooltip: {
　　trigger: “axis”
　},
// 是否显示工具栏组件
　toolbox: {
　　show: true,
　　feature: {
　　　　mark: { show: true },
　　　　dataView: { show: true, readOnly: false }, // 数据视图工具，可以展示当前图表所用的数据，编辑后可以动态更新
　　　　magicType: { show: true, type: [“line”, “bar”] }, // 动态类型切换
　　　　restore: { show: true }, // 重置
　　　　saveAsImage: { show: true } // 保存图片
　　}
　},
　calculable: true,
// x 轴 表示
　xAxis: {
　　data: []
　},
// y 轴 表示
　yAxis: [
　　{
　　　　type: “value”,
　　　　axisLabel: {
　　　　　　formatter: “{value} °C”
　　　　}
　　}
　],
　series: [
// 最高温
　{
　　name: “当前气温”,
　　type: “line”,
　　data: []
　}
　]
};

2：初始化echarts

var myChart = this.$echarts.init(document.getElementById("chart"));

3：使用刚指定的配置项和绘制图表，数据为 option

myChart.setOption(option);

4：数据加载完之前显示一段简单的 loading 动画

myChart.showLoading();

5：从后台获取数据（可用ajax）

var dataX = []; // 实际存放 x 轴的 值
var dataV = []; // 实际存放 y 轴的 值

6：隐藏加载动画

myChart.hideLoading();

7：加载数据图表

myChart.setOption({
　　xAxis: {
　　　　data: dataX
　　},
　　series: [
　　{
　　　　data: dataV
　　}
　　]
});

8：实时更新

let timeTicket;
clearInterval(timeTicket);

9：设置定时器，没四秒更新一次数据

timeTicket = setInterval(function() {
　　// 获取到图表的  option
　　option = myChart.getOption();
　　let arr = option.series[0].data;
　　if (arr.length == 30) {
　　　　arr.shift(); // 从队头删除数据
　　}
　　arr.push(Math.round(Math.random() * 5 + 25)); // 从对尾添加数据
　　// 加载数据 图表
　　myChart.setOption(option);
}, 4000);

来源：https://www.cnblogs.com/cmz-32000/p/12022863.html

标签

option