echarts中series下的data循环拼接

页面效果

x轴为每年存在数据的月份，因而不一定是12个月，每个月又包含对应的天数
y轴为充电量

获取数据

 listCarChargingKWHChart() {var _this = this;listCarChargingKWHChart({"token": getSessiontoken('token'),"type": parseInt(_this.selectType),"dayTime": _this.searchingCondition.dayTime,"yearTime": _this.searchingCondition.yearTime,"beginTime": _this.searchingCondition.beginTime,"endTime": _this.searchingCondition.endTime,"monthTime": _this.searchingCondition.monthTime,}).then(function (res) {var obj = JSON.parse(utilFile.decrypt(res.data.a));if (obj.code == 200) {console.log('图表', obj.data)_this.statisticalChartList = obj.data;var months=[];var arr = [];for (let i = 0; i < _this.statisticalChartList.length; i++) {for(let j = 0;j< _this.statisticalChartList[i].yearsList.length;j++){months.push(_this.statisticalChartList[i].yearsList[j].months);arr[j] = _this.statisticalChartList[i].yearsList[j].monthsList;}}console.log("转化后",months,arr)_this.standLine(months,arr);} else {_this.$message.error(obj.msg);}}).catch(function (err) {console.log(err);})},

后台返回数据格式

echarts图

  standLine(months,arr) {let _this = this;var chargingStationCount = _this.$echarts.init(document.getElementById("chargingStationCount"));var RecCountOpt = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},xAxis: [{type: 'category',data: months,axisPointer: {type: 'shadow'}}],yAxis: [{type: 'value',name: '电量',interval: 50,axisLabel: {formatter: '{value} KWH'}}],dataZoom: [{show: true,start: 30,end: 100},{type: 'inside',start: 60,end: 100},],series: _this.serie_func(arr,months)};chargingStationCount.setOption(RecCountOpt);},

拼接series 中data方法

 serie_func(series,month){var serie = []; var date=[]; //日期合并for(let k=0;k<series.length;k++){for(let q=0;q<series[k].length;q++){date.push(series[k][q].countDate.split(" ")[0].split("-")[2]);series[k][q].countDate = series[k][q].countDate.split(" ")[0].split("-")[2];}}console.log('date',date)var oldDataRule = [];series.forEach((el) => {el.forEach( item =>{var oldObj = {name: item.countDate,data: [item.avgTotalChargingKWH]}oldDataRule.push(oldObj);})})console.log('oldDataRule',oldDataRule)var newData = []var newObj = {}oldDataRule.forEach((el, i) => {if (!newObj[el.name]) {newData.push(el);newObj[el.name] = true;} else {newData.forEach(el => {if (el.name === oldDataRule[i].name) {el.data = el.data.concat(oldDataRule[i].data);}})}})console.log('newData',newData)newData.forEach((xdataele,xindex) => {var item = {  name:xdataele.name,//获取12个月type: 'bar',barGap: 0,data:xdataele.data}  serie.push(item);  });return serie;},

方法中数据

echarts中series下的data循环拼接相关推荐

Echarts中series、option、component究竟是啥？
Echarts创建一个网页中可以创建多个echarts图例.一个DOM节点可作为echarts的渲染容器.每个DOM节点只能放一个echarts实例. series 系列一个系列至少包含的要素为: ...
echarts 配置项 series 中的data 多维度
ECharts dataset 详解简单概括一下就是数据集(dataset)中除第一行元素外,每一行数据对应x轴一个类目,有多少个系列,类中就有多少图(或者说bar图里的多少根柱子) 一个系列等于 ...
vue中给echarts的series,xAxis中的data动态赋值
循环this.dataAndScore获取到数据后,直接通过option赋值给echart const Xdata = []; //定义数组Xdata const Sdata = []; //定义数组 ...
java字符串拼接_为什么阿里巴巴不建议在for循环中使用quot;+quot;进行字符串拼接...
点击上方"Java专栏",选择"置顶或者星标" 第一时间阅读精彩文章! ☞ 程序员进阶必备资源免费送「21种技术方向!」点击查看☜ 字符串,是 Java 中最 ...
数据库异常---ORA-01436: 用户数据中的 CONNECT BY loop in user data 循环
数据库 ORA-01436: 用户数据中的 CONNECT BY loop in user data 循环技术qq交流群:JavaDream:251572072 教程下载,在线交流:创梦IT社 ...
ECharts中setOption的title、tooltip、xAxis、yAxis、series、legend等参数的含义。
ECharts中setOption的title.tooltip.xAxis.yAxis.series.legend等参数的含义. title //标题设置 legend //图例控制 grid //图 ...
【杂记】（富文本框回填值、ajax数据回填按钮年级学科、去除数组中数组外包的引号、多重循环的写法、微测评获奖页面的内容循环拼接写法、textarea禁止拖动、html基本、透明度、页面内出现滚动条）
1. 富文本框回填值 for(var i = 0;i<res.data.choiceoptinfo.length;i++){ueArr[i].ready(function(){//选项ueArr ...
python中的for in循环有什么意思_for _ in xxx中的下划线_是什么意思？
for _ in list中的下划线_只是一个临时的循环变量, 因为_是合法的变量名 for _ in [1, 2, 3]:print(_) li = [[0, 1] for _ in range(3 ...
【Echarts】ECharts中常用的标签
详细的标签详解 ECharts中常用的标签 ECharts中常用的标签 title标签 legend tooltip xAxis和yAxis 不同种类图的区别 ECharts中常用的标签 title标 ...

echarts中series下的data循环拼接

页面效果

获取数据

后台返回数据格式

echarts图

拼接series 中data方法

方法中数据

echarts中series下的data循环拼接相关推荐

最新文章

热门文章