echart.js给series,xAxis中的data动态赋值(三种方式)

最近用echart.js比较多，感觉我的js技能又加深了……

给echart中的x轴或者series动态赋值，是echart的基本操作：

场景：

//引入echart.js   下面的是引入的本地文件
<script src="~/yisha/js/echarts.min.js"></script>
//获取图表的容器：dom 并初始化
var myChart = echarts.init(document.getElementById("skuId"));
//配置项初始化 因为我是在vue中用的，下面的内容是data中的定义，是对象的属性格式：
option: {title: {text: '交期准时率'},xAxis: {type: 'category',boundaryGap: false,data: []},yAxis: {type: 'value',min: 0,max: 100,axisLabel: {show: true,interval: 'auto',formatter: '{value}%'}},legend: {data: ['交期准时率']},series: [{name: '交期准时率',type: 'line',stack: '总量',data: [],label: {show: true,position: "top",formatter: function (params) {return params.value + "%"}},lineStyle: {color: '#f90',}}]
},
//处理接口返回的循环数据
假设数据未：res.Data，是一个数组的形式

方式一：循环遍历res.Data时给echart动态赋值

for (var i = 0; i < res.Data.length; i++) {var item = res.Data[i];this.option.xAxis.data.push(item.dateTime);this.option.series[0].data.push(item.getYearDatas.AmountMoney);
}
myChart.setOption(this.option);
//如果数据量大时，可能会因为数据加载不完全就渲染图表，会引发报错，因此可以使用setTimeout进行延时处理
setTimeout(()=>{myChart.setOption(this.option);
},100)

方式二：循环遍历res.Data赋值给变量，再赋值给echart

var Xdata = [];
var Sdata = [];
for (var i = 0; i < res.Data.length; i++) {var item = res.Data[i];Xdata.push(item.dateTime);Sdata.push(item.getYearDatas.AmountMoney);
}
this.option.series[0].data = Sdata;
this.option.xAxis.data = Xdata;
myChart.setOption(this.option);
//如果数据量大时，可能会因为数据加载不完全就渲染图表，会引发报错，因此可以使用setTimeout进行延时处理
setTimeout(()=>{myChart.setOption(this.option);
},100)

方式三：循环res.Data获取到数据后，直接通过option赋值给echart

var Xdata = [];
var Sdata = [];
for (var i = 0; i < res.Data.length; i++) {var item = res.Data[i];Xdata.push(item.dateTime);Sdata.push(item.getYearDatas.AmountMoney);
}
this.option = {title: {text: '交期准时率'},xAxis: {type: 'category',boundaryGap: false,data: Xdata},yAxis: {type: 'value',min: 0,max: 100,axisLabel: {show: true,interval: 'auto',formatter: '{value}%'}},legend: {data: ['交期准时率']},series: [{name: '交期准时率',type: 'line',stack: '总量',data: Sdata,label: {show: true,position: "top",formatter: function (params) {return params.value + "%"}},lineStyle: {color: '#f90',}}]
},
myChart.setOption(this.option);
//如果数据量大时，可能会因为数据加载不完全就渲染图表，会引发报错，因此可以使用setTimeout进行延时处理
setTimeout(()=>{myChart.setOption(this.option);
},100)

比较这三种方式，第二种是最好的，但是如果是要对x轴和y轴或series的数据进行处理的话，第三种就是最好的了，因为可以进行格式化：

x轴y轴的数据格式化

series的数据格式化

效果展示图：

echart.js给series,xAxis中的data动态赋值(三种方式)相关推荐

vue中给echarts的series,xAxis中的data动态赋值
循环this.dataAndScore获取到数据后,直接通过option赋值给echart const Xdata = []; //定义数组Xdata const Sdata = []; //定义数组 ...
python读取图像数据流_浅谈TensorFlow中读取图像数据的三种方式
本文面对三种常常遇到的情况,总结三种读取数据的方式,分别用于处理单张图片.大量图片,和TFRecorder读取方式.并且还补充了功能相近的tf函数. 1.处理单张图片我们训练完模型之后,常常要用图片 ...
JS-01-在HTML中嵌入JavaScript代码的三种方式
JS-01-在HTML中嵌入JavaScript代码的三种方式 1.JavaScript概述 Web的组成有HTML.CSS还有即将要学习的JavaScript(简称JS). CSS和JS主要是服务于 ...
.net session 有效时间_Python中requests模拟登录的三种方式(携带cookie/session进行请求网站)...
这篇文章主要介绍了python中requests模拟登录的三种方式(携带cookie/session进行请求网站),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋 ...
html中常见表达颜色的三种方式
html中常见表达颜色的三种方式网页中经常应用到各种颜色,这关乎界面美观以及整体的设计感,那么,具体应用到哪几种表达方式,接下来让我们一起看看: 1 英文单词表示(局限):red(红),blue(蓝 ...
JS（JavaScript）中实现深浅拷贝的几种方式（详细阅读非常重要）。
在了解深浅拷贝之前,我们先一起来简单来了解一下,JavaScript 数据存储的方式,以及数据类型(). JavaScript 中数据存储分为简单数据类型和复杂数据类型(引用数据类型) 其中 5 种 ...
java获取小程序中用户的unionId的三种方式
前提条件: 想要获取unionId,必须几个小程序或者公众号在同一个主体之下,要不然没有unionId,只会生成用户的openid,可登陆下面这个微信官方平台查看 https://open.weixi ...
windows系统中查看linux分区的三种方式
双系统中windows查看linux分区的三种方式一.这个算是大家早有耳闻的啦,就是使用Explore2fs这个工具,可以去 http://www.chrysocome.net/explore2fs ...
Linux中设置服务自启动的三种方式
有时候我们需要Linux系统在开机的时候自动加载某些脚本或系统服务主要用三种方式进行这一操作: ln -s 在/etc/rc.d/rc*.d目录中建立/e ...
Linux中设置服务自启动的三种方式（转）
有时候我们需要Linux系统在开机的时候自动加载某些脚本或系统服务主要用三种方式进行这一操作: ln -s 在/etc/rc.d/rc*.d目录中建立/e ...

echart.js给series,xAxis中的data动态赋值(三种方式)

方式一：循环遍历res.Data时给echart动态赋值

方式二：循环遍历res.Data赋值给变量，再赋值给echart

方式三：循环res.Data获取到数据后，直接通过option赋值给echart

x轴y轴的数据格式化

series的数据格式化

echart.js给series,xAxis中的data动态赋值(三种方式)相关推荐

最新文章

热门文章