echarts折柱混线图根据后台数据动态刷新显示数据

我电脑没有可以制作动图的软件，之前用office自带的PowerPoint录制视频但因为其它原因也无法录制了，所以页面效果我暂时放几张相连的图片展示效果哈，见谅：

整体思路：
为了便于理解，我将后台获取的数据LineScheduleData.platopositioninfos称值为数组A
一、首先需要从数据结构入手，echarts表无非就是按照数组里面的值显示的，所以最主要的就是搞定如何在后台获取数组A的时候，能够遍历数组A并依次返回n个数组对象的方法，再将n个数组对象的值放入echarts表显示的数组中（第4点的代码）
二、其次就是定时刷新数据，我是用了两个定时，一个是获取后台数据时，另一个是实例化echarts的数据时（第2点的代码）；在实例中定时的时候有一个主要的考虑因素，就是遍历数组A并依次返回n个数组对象的方法中需要传从索引的第几项开始，于是就要在setInterval中加一个能够计数的变量(第3点)
三、最后就是判断情况，总共分两种情况，一种是数组A的长度大于要显示的长度时（我这里是4），需要考虑遍历数组A并依次返回n个数组对象的方法；另一种是数组A的长度小于等于要显示的长度时，无需遍历，可以直接push给实例化对象的值。

echarts官网给的实例：去看看echarts实例
LineScheduleData.platopositioninfos 数组，值是自己造的，数据结构如下：

[{"position": "CY19", //这个是x轴的值"count": 3, //这个是用于柱状图纵坐标的值"percent": 0.25, //这个是折线图的纵坐标值"state": 0,"ID": 0},{"position": "CN3","count": 2,"percent": 0.4167,"state": 0,"ID": 0},{"position": "R336","count": 2,"percent": 0.5833,"state": 0,"ID": 0},{"position": "Q509","count": 1,"percent": 0.6667,"state": 0,"ID": 0},{"position": "CN4","count": 1,"percent": 0.75,"state": 0,"ID": 0},{"position": "CN26","count": 1,"percent": 0.8333,"state": 0,"ID": 0},{"position": "CN27","count": 1,"percent": 0.9167,"state": 0,"ID": 0},{"position": "CX3","count": 1,"percent": 1,"state": 0,"ID": 0}
]

1. 柱状图HTML显示部分：
实例id为positioninfosline

<div style="width: 95%; height: 80%; margin: 0 auto;" id="positioninfosline"></div>

2.在调用接口时传入实例化option的方法：
这里的next4Items方法是依次遍历数组并返回新长度的数据，代码在第4点

drawChart4() {var datax = [];var countDatay = [];var percentDatay = [];// 显示4条数据 判断若获取的数据的长度小于等于4，则直接赋值无需动态加载if (this.LineScheduleData.platopositioninfos.length <= 4) {for (var i = 0; i < this.LineScheduleData.platopositioninfos.length; i++) {datax.push(this.LineScheduleData.platopositioninfos[i].position);//x轴的值countDatay.push(this.LineScheduleData.platopositioninfos[i].count);//柱状图y的值 数量percentDatay.push((Number(this.LineScheduleData.platopositioninfos[i].percent) * 100).toFixed(2));//折线图y的值 总百分比，转化为百分比的形式并保留两位小数}} else { //若获取数据的长度大于4，则需要调用next4Items方法var thedata = Main.next4Items(this.LineScheduleData.platopositioninfos, 4, 0)console.log("thedata", thedata);//这个是返回的数组及新的索引，可以输入看看结构for (var i of thedata[0]) {    //遍历返回的四个数组并push表中需要显示的值datax.push(i.position);//x轴的值countDatay.push(i.count);//柱状图y的值 数量percentDatay.push((Number(i.percent) * 100).toFixed(2));//总折线图y的值 总百分比}}console.log("datax", datax); //输出为有四个字符串的数组// 基于准备好的dom，初始化echarts实例var chartDom = document.getElementById("positioninfosline");var myChart = this.$echarts.init(chartDom, "dark");var option;option = {backgroundColor: "transparent", grid: {top: "30%",left: "10%",right: "5%",bottom: "10%",},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},xAxis: [{type: 'category',data: datax, //x轴的值axisPointer: {type: 'shadow'}}],yAxis: [{type: 'value',name: '数量(个)', //显示柱状图的刻度min: 0,max: 'dataMax',interval: 50,axisLabel: {formatter: '{value}'}},{type: 'value',name: '占比',min: 0,max: 'dataMax',show: false,//不显示折线图的刻度线，若想要显示双y轴，把这句话删掉即可interval: 20,axisLabel: {formatter: '{value}%'}}],series: [{name: '数量',type: 'bar',tooltip: {valueFormatter: function (value) {return value + ' 个';}},data: countDatay, //柱状图的y值barWidth: '30px',//显示数值itemStyle: {normal: {label: {show: true, //开启显示position: 'inside', //在上方显示textStyle: {//数值样式color: 'white',fontSize: 12,},},color: function (params) {//柏拉图颜色按顺序输出var colorList = ['#086276', '#35a39d', '#89cac4', '#a0d6eb', '#2c6854','#59b48c', '#d94c1e', '#bc0d2a', '#4f667c', '#dae1d3', '#9aa5e3', '#decf39'];return colorList[params.dataIndex]},barBorderRadius: [10, 10, 0, 0],// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [//     { offset: 0, color: "#69aafc" }, //深//     { offset: 1, color: "#91b8db" }, //浅// ]),},},},{name: '占比',type: 'line',yAxisIndex: 1,tooltip: {valueFormatter: function (value) {return value + '%';}},data: percentDatay,//折线图的y值itemStyle: {normal: {label: {formatter: "{c}" + "%",show: true, //开启显示position: 'top', //在上方显示textStyle: {color: 'white',fontSize: 12,},},},},}]};option && myChart.setOption(option);//动态刷新主要代码如下if (this.LineScheduleData.platopositioninfos.length >= 5) { //若长度为5以上则需要动态刷新进入条件console.log("进入定时器")setInterval(() => {var num = this.initChart4CountFun();//这个方法是计数器的方法console.log("num2", num);var thedata = Main.next4Items(this.LineScheduleData.platopositioninfos, 4, num)//这个是通过next4Items方法获取对应的四个数组console.log("thedata2", thedata);datax = [] //清空countDatay = [] //清空percentDatay = [] //清空for (var i of thedata[0]) {datax.push(i.position);//x轴数据countDatay.push(i.count);//柱状图的y轴值 数量percentDatay.push((Number(i.percent) * 100).toFixed(2));//折线图的y轴值 总百分比}console.log("datax22222", datax);//重新实例化option并赋予新的数据使其显示myChart.setOption({xAxis: [{data: datax}],series: [{data: countDatay}, {data: percentDatay}]});}, 2100) //延时2100mm,官网给的示例也是这个时间,看着丝滑些}},

3. 计数器方法，num 为全局变量，初始值为0：

        initChart4CountFun() {//若num的值小于需要显示数组的长度，则num持续加一if (this.num <= this.LineScheduleData.platopositioninfos.length) {this.num++} else { this.num = 0}return this.num},

4. 遍历数组依次返回n个对象的方法：
这个方法是我从网上搜的,地址：js循环获取数组中固定个数元素
我把这个方法封装的Main.js里了，因为感觉应该会经常用到，需要调用这个方法时再导入Main.js就好了，也可以直接放到method里，把上面代码中所有的Main.替换成this

/*** 遍历数组依次返回n个对象的方法
* @allData: 待处理数组
* @n: 返回元素个数
* @index: 从索引的第几项开始
*/
export function next4Items(allData, n, index) {console.log("allData", allData);console.log("index", index);let startIndex = index;let length = allData.length;let newArr = [];if (index <= length - n) {newArr = allData.slice(startIndex, startIndex + n)startIndex += 1} else if (length - n < startIndex && startIndex < length) {newArr = [...allData.slice(startIndex, length), ...allData.slice(0, n - (length - startIndex))]startIndex += 1} else {startIndex = 0newArr = allData.slice(startIndex, startIndex + n)startIndex += 1}return [newArr, startIndex]
}

结束啦~ 编辑不易，若有不足或可优化的地方还请不吝指教

echarts折柱混线图根据后台数据动态刷新显示数据相关推荐

vue项目中使用 Echarts的一些总结，包括饼图，折现图，折柱混图，年月日切换
先奉上官网地址,一切以官网为主 Echrts官网 Echarts的基本使用安装 cnpm i echarts -S 全局使用在main.js中引入,然后用变量,将其挂载到vue的原型上 impor ...
Echarts 散点象限图（二）动态绘制
之前发布过一篇文章Echarts散点象限图,基于固定数据来绘制的,但实际开放场景中,需要请求数据,而且可能会动态更改数据,这时候需要如何处理,有什么要注意的地方,这篇文章详细说明一下. 主要需要处理的 ...
原生JS仿造华为商城案例-实现了简单页面-两种轮播图思路的实现-动态展示数据
文章目录功能简介项目准备项目说明方案一:源代码 CSS样式 HTML结构 JS逻辑方案二:源代码 CSS样式 HTML结构 JS逻辑功能简介页面展示该项目功能实现: 无限滚动轮播图 j ...
echarts 折柱图混合，使用数据集dataset，并且改变tooltip中圆点的样式
echarts使用数据集dataset时, 改变tooltip中圆点的样式如图: options: {color: ['#6666ff', '#66cc99', '#ff6600', '#ffcc3 ...
迪赛智慧数——柱状图（折柱混合图）：2021年毕业季租房价格和房租收入比
效果图又是一年毕业季,目前也成为毕业生租房热季,大批毕业学子即将开启全新的生活.不过,"一房难求".选房翻车.房租高昂等问题,让租房成为了很多毕业生迈不过去的一道坎. 在全国各城 ...
数据可视化——折线图、地图、动态柱状图案例
目录前提: 一.折线图可视化案例二.地图可视化案例三.动态柱状图可视化案例前提: 如果想要做出数据可视化效果图, 可以借助pyecharts模块来完成. 安装pyecharts模块步骤: 1. ...
Python抓取网页中的动态序列化数据
Python抓取网页中的动态序列化数据动态序列化数据经常应用于前后端分离的页面.或者通过VUE.JS等HTML页面环境,常规的爬虫抓取方法并不能满足数据采集的要求,因此需要其他的方式进行数据的采集. ...
[vue+elementUI+echarts]echart折线图展示后台传来的数据
最近项目遇到了这个问题,来记录一下,方便以后复制粘贴23333 主要功能: 循环遍历渲染后台传来的一堆数据,然后点击每一条数据的More Info按钮展示对应的折线图表格数据. 引elementUi和 ...
Echarts 折线图对接后台数据
项目场景:Echarts 折线图对接后台数据想要使用Echarts折线图来对接后台返回的数据,因为第一次使用这个图表库还不是很熟练,在对接数据时遇到了一些小问题问题描述后台返回的数据看起来也没什 ...

echarts折柱混线图根据后台数据动态刷新显示数据

echarts折柱混线图根据后台数据动态刷新显示数据相关推荐

最新文章

热门文章