echarts 多柱状图： 随接口返回的条数展示柱状图：

最新推荐文章于 2024-05-23 17:25:26 发布
最新推荐文章于 2024-05-23 17:25:26 发布
阅读量831 收藏
点赞数
文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40806920/article/details/120483538
版权
这段代码使用Echarts库创建一个图表，展示从接口获取的功率数据。数据以每小时为单位，每个柱状图表示一个小时的输入和输出功率，最多显示四个柱子。此外，代码还包含了输入和输出功率的环形图表示，以及详细的图例和提示信息。数据根据接口返回的条目数量动态调整，最多支持四个设备的数据展示。
摘要由CSDN通过智能技术生成

记录一下自己的代码 ，写的很垃圾 ，有好多的方法麻烦指出

如果接口哪个里面是三条数据 就是三条柱状图：

接口数据格式：

 

代码：最多是四条数据  就这个图最多是四个柱子在一起： 

 

      creatchart() {
        const chartDom = document.getElementById('theChart');
        const myChart = echarts.init(chartDom);
        let maxnum = 0;
        this.$api.get('wp/ocable/selectOpticalCable').then(res => {
          this.echartsData = res.data;
          // console.log('===>', res);
          for (const item in res.data) {
            // console.log('aaaaaaaaaaaaaaaaaaaaaa', item, res.data[item], res.data);
            if (res.data[item].length > maxnum) {
              maxnum = res.data[item].length;
            }
          }

          const inalldata = [];
          const outalldata = [];
          for (let i = 0; i < maxnum; i++) {
            // 4GE
            inalldata[i] = [];
            outalldata[i] = [];
          }

          const newchartName = [];
          for (let i = 0; i < 24; i++) {
            newchartName.push(' ' + i + '时-' + (i + 1) + '时');
            for (let j = 0; j < maxnum; j++) {
              inalldata[j].push([i, '', '']); // 输入功率
              outalldata[j].push([i, '', '']); // 输出功率
            }
          }
          // console.log('aaaaaaaaaaaaaaa', inalldata, outalldata);
          for (const item in this.echartsData) {
            // console.log('aaaaaaaaaaaaaaaaaaaaaa', item, res.data[item], res.data);
            // this.echartsData[item].length
            // console.log('=================>', this.echartsData[item]);
            for (let i = 0; i < this.echartsData[item].length; i++) {
              if (Number(item)) {
                inalldata[i][Number(item)][1] = Number(this.echartsData[item][i].fieldCntentent);
                inalldata[i][Number(item)][2] = this.echartsData[item][i].deviceName;
                outalldata[i][Number(item)][1] = Number(this.echartsData[item][i].exporCntentent);
                outalldata[i][Number(item)][2] = this.echartsData[item][i].deviceName;
              }
            }
          }
          console.log('aaaaaaaaaaaaaaa', inalldata, outalldata);
          const series = [];
          for (let j = 0; j < maxnum; j++) {
            series.push({
              name: '输入功率',
              type: 'bar',
              // barGap: '25%',
              barWidth: 18,
              itemStyle: {
                // barBorderRadius:20,
                barBorderRadius: 20,
                // lenged文本
                opacity: 0.7,
                color: function (params) {
                  return new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: '#00F7FD' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#2F14AB' // 100% 处的颜色
                      }
                    ],
                    false
                  );
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'inside',
                  fontSize: 15,
                  fontWeight: 'bold',
                  color: '#fff'
                }
              },
              zlevel: 2,
              data: inalldata[j] // 输入功率
            });
          }
          for (let j = 0; j < maxnum; j++) {
            series.push({
              name: '输出功率',
              type: 'bar',
              xAxisIndex: 1,
              // barGap: '40%',
              data: outalldata[j],
              zlevel: 1, //  层级
              barWidth: 18,

              label: {
                normal: {
                  show: true,
                  position: 'inside',
                  fontSize: 15,
                  fontWeight: 'bold',
                  color: '#F74BFA'
                }
              },
              itemStyle: {
                normal: {
                  barBorderRadius: 20,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                    {
                      offset: 0,
                      color: '#602CAA'
                    },
                    {
                      offset: 1,
                      color: '#F74BFA'
                    }
                  ]),
                  opacity: 0.8
                }
              }
            });
          }
          if (maxnum % 2 === 0) {
            // 偶数
            let offset = Math.floor(maxnum / 2) * -1;
            // console.log('jishu', Math.floor(maxnum / 2));
            for (let i = 0; i < maxnum; i++) {
              series.push({
                // 红色的那个圈
                name: '输入功率',
                type: 'pictorialBar',
                symbolSize: [18, 10],
                symbolOffset: [`${offset > 0 ? offset * 130 - 65 : offset * 130 + 65}%`, 0],
                symbolPosition: 'end',
                z: 12,
                color: '#00F7FD',
                zlevel: 2,
                data: inalldata[i]
              });
              series.push({
                // 蓝色的那个圈
                name: '输出功率',
                type: 'pictorialBar',
                symbolSize: [18, 10],
                symbolOffset: [`${offset > 0 ? offset * 130 - 65 : offset * 130 + 65}%`, 0],
                symbolPosition: 'end',
                z: 12,
                color: '#602CAA',
                zlevel: 2,
                data: outalldata[i]
              });
              series.push({
                // 红色的那个圈
                name: '输入功率',
                type: 'pictorialBar',
                symbolSize: [18, 10],
                symbolOffset: [`${offset > 0 ? offset * 130 - 65 : offset * 130 + 65}%`, 0],
                symbolPosition: 'start',
                z: 12,
                color: '#00F7FD',
                zlevel: 2,
                data: inalldata[i]
              });
              series.push({
                // 蓝色的那个圈
                name: '输出功率',
                type: 'pictorialBar',
                symbolSize: [18, 10],
                symbolOffset: [`${offset > 0 ? offset * 130 - 65 : offset * 130 + 65}%`, 0],
                symbolPosition: 'start',
                z: 12,

                color: '#F74BFA',
                zlevel: 2,
                data: outalldata[i]
              });
              offset++;
              if (offset === 0) {
                offset++;
              }
            }
          } else {
            // 奇数
            let offset = Math.floor(maxnum / 2) * -1;
            // console.log('jishu', Math.floor(maxnum / 2));
            for (let i = 0; i < maxnum; i++) {
              series.push({
                // 红色的那个圈
                name: '输入功率',
                type: 'pictorialBar',
                symbolSize: [18, 10],
                symbolOffset: [`${offset * 130}%`, 0],
                symbolPosition: 'end',
                z: 12,
                color: '#00F7FD',
                zlevel: 2,
                data: inalldata[i]
              });
              series.push({
                // 蓝色的那个圈
                name: '输出功率',
                type: 'pictorialBar',
                symbolSize: [18, 10],
                symbolOffset: [`${offset * 130}%`, 0],
                symbolPosition: 'end',
                z: 12,

                color: '#602CAA',
                zlevel: 2,
                data: outalldata[i]
              });
              series.push({
                // 红色的那个圈
                name: '输入功率',
                type: 'pictorialBar',
                symbolSize: [18, 10],
                symbolOffset: [`${offset * 130}%`, 0],
                symbolPosition: 'start',
                z: 12,
                color: '#221287',
                zlevel: 2,
                data: inalldata[i]
              });
              series.push({
                // 蓝色的那个圈
                name: '输出功率',
                type: 'pictorialBar',
                symbolSize: [18, 10],
                symbolOffset: [`${offset * 130}%`, 0],
                symbolPosition: 'start',
                z: 12,

                color: '#F74BFA',
                zlevel: 2,
                data: outalldata[i]
              });
              offset++;
            }
          }
          const option = {
            backgroundColor: '#030230',
            legend: {
              // 类别关闭打开
              data: ['输出功率', '输入功率'],
              icon: 'rect',
              top: 5,
              // selectedMode: false, // 关闭点击
              right: 10,
              textStyle: {
                color: '#fff',
                fontWeight: 'normal',
                fontSize: 12
              }
            },
            // 提示框
            tooltip: {
              // trigger: 'item'
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              formatter: function (param) {
                let resultTooltip =
                  "<div style='background:;border:1px solid rgba(255,255,255,.2);padding:5px 10px;border-radius:4px;'>" + "<div style='text-align:center;'>" + param[0].name + '</div>';
                console.log('=====', param);
                function compare(property) {
                  return function (a, b) {
                    const value1 = a[property];
                    const value2 = b[property];
                    return value1 - value2;
                  };
                }
                console.log(param.sort(compare('componentIndex')));
                const params = param.sort(compare('componentIndex'));
                for (let i = 0; i < maxnum; i++) {
                  if (param[i].seriesName === '输入功率' && params[i].value[1]) {
                    resultTooltip +=
                      "<div style='padding-top:5px;'>" +
                      "<span style='display:inline-block;border-radius:4px;width:30px;height:10px;background-color:red;border: 2px solid #3eb6f5;'></span>" +
                      "<span style=''>  " +
                      params[i].value[2] +
                      params[i].seriesName +
                      ': </span>' +
                      "<span style=''>" +
                      params[i].value[1] +
                      '</span><span></span>' +
                      '</div>';
                  }
                  if (param[i + maxnum].seriesName === '输出功率' && params[i + maxnum].value[1]) {
                    resultTooltip +=
                      "<div style='padding-top:5px;'>" +
                      "<span style='display:inline-block;border-radius:4px;width:30px;height:10px;background-color:red;border: 2px solid #3eb6f5;'></span>" +
                      "<span style=''>  " +
                      params[i + maxnum].value[2] +
                      params[i + maxnum].seriesName +
                      ': </span>' +
                      "<span style=''>" +
                      params[i + maxnum].value[1] +
                      '</span><span></span>' +
                      '</div>';
                  }
                }
                return resultTooltip;
              }
            },
            grid: {
              top: '10%',
              left: '5%',
              bottom: '10%',
              right: '5%',
              containLabel: true
            },
            animation: true,
            xAxis: [
              {
                name: '时间',
                axisTick: {
                  show: false
                },
                axisLine: {
                  symbol: ['none', 'arrow'],
                  onZero: false,
                  show: true,
                  lineStyle: {
                    color: '#fff'
                  }
                },
                axisLabel: {
                  inside: false,
                  textStyle: {
                    color: '#fff',
                    fontWeight: 'normal',
                    fontSize: 12
                  }
                },
                data: newchartName
              },
              {
                type: 'category',
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: '#fff'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  show: false
                },
                splitArea: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                data: newchartName
              }
            ],
            yAxis: [
              // {
              //   show: true,
              //   name: '当前故障数',
              //   nameTextStyle: {
              //     fontSize: 20,
              //     color: '#fff'
              //   },
              //   type: 'value',
              //   axisLabel: {
              //     textStyle: {
              //       color: '#fff'
              //     }
              //   },
              //   splitLine: {
              //     lineStyle: {
              //       color: 'rgba(0,228,255,1)'
              //     }
              //   },
              //   axisLine: {
              //     show: false
              //   }
              // }
              {
                smooth: true,
                nameGap: 20,
                type: 'value',
                name: '当前故障数108 个',
                position: 'left',
                axisLine: {
                  symbol: ['none', 'arrow'],
                  // onZero: false,
                  show: true,
                  lineStyle: {
                    color: '#fff',
                    fontSize: 16
                  },
                  axisTick: {
                    inside: false
                  }
                },
                axisLabel: {
                  textStyle: {
                    show: false,
                    color: '#fff'
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    opacity: 0.5,
                    color: '#999'
                  }
                }
                // axisLabel: {
                //   formatter: '{value} '
                // }
              }
            ],
            dataZoom: [
              {
                show: true,
                height: 12,
                xAxisIndex: [0, 1],
                bottom: '8%',
                start: 0,
                end: 30,
                handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                handleSize: '100%',
                handleStyle: {
                  color: '#d3dee5'
                },
                textStyle: {
                  color: '#fff'
                },
                borderColor: '#90979c'
              }
              // {
              //   show: false,
              //   height: 12,
              //   // xAxisIndex: [1],
              //   bottom: '8%',
              //   start: 0,
              //   end: 50,
              //   handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
              //   handleSize: '100%',
              //   handleStyle: {
              //     color: '#d3dee5'
              //   },
              //   textStyle: {
              //     color: '#fff'
              //   },
              //   borderColor: '#90979c'
              // }
              // {
              //   type: 'inside',
              //   show: true,
              //   height: 15,
              //   start: 0,
              //   end: 35
              // }
            ],
            series: series

          };

          option && myChart.setOption(option);
          // const app = {
          //   currentIndex: -1
          // };
          // setInterval(function () {
          //   const dataLen = option.series[0].data.length;

          //   // 取消之前高亮的图形
          //   myChart.dispatchAction({
          //     type: 'downplay',
          //     seriesIndex: 0,
          //     dataIndex: app.currentIndex
          //   });
          //   app.currentIndex = (app.currentIndex + 1) % dataLen;
          //   // console.log(app.currentIndex);
          //   // 高亮当前图形
          //   myChart.dispatchAction({
          //     type: 'highlight',
          //     seriesIndex: 0,
          //     dataIndex: app.currentIndex
          //   });
          //   // 显示 tooltip
          //   myChart.dispatchAction({
          //     type: 'showTip',
          //     seriesIndex: 0,
          //     dataIndex: app.currentIndex
          //   });
          // }, 10000);
        });
      }

爱吃青菜的土拨鼠
关注
echarts如何获取后端的值_Echarts 获取后台数据 使用后台数据展示 柱形图
weixin_39820437的博客
12-20 859
后台数据要以json格式返回页面:引用echarts.js , 然后data以ajax的数据请求并返回String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path +...
关于echarts柱状图的问题：主要动态展示多条
qq_35936653的博客
09-28 2102
//柱状图//var xName=new Array();$(document).ready(function(){ var param = $('#conditionForm').serializeArray(); var paramJson = {}; $.each(param,function(i,v){ paramJson[v.name] = v.value; })       $.aj
根据后端返回数据进行展示echarts柱状图
bbkhhvv的博客
10-23 1151
分别是数组里面套数组在套对象，并且里面的数组是随时变化的，并不是固定不动的，里面的库位1和库位2分别是俩个大横坐标，里面包含了几个对象，每个对象都有一个oname和number分别是该数据的名字和数量，那么应该怎么把这种数据展示到柱状图上显示出来呢？后端返回的数据是这样的。
echarts经ajax与后端交互数据，绘制柱状图
BADReamer的博客
05-11 1337
记得去官网导包。本柱状图y轴要用百分比显示，所以以double类型传入前端显示，再加%。 前端 <div id="main" style="width: 1800px;height:1200px;"></div> //js var zChart = echarts.init(document.getElementById("main"));// 柱形图模板 function fun(x_data, y_data) { var option = { /*title
vue-cli+webpack搭建的vue项目中使用echarts，如何将接口返回的数据渲染出来
会飞的咕咕鱼的博客
03-26 2555
vue项目中使用echarts: 1.安装依赖 npm install echarts -S 2.全局引入（main.js） import echarts from 'echarts'; Vue.prototype.$echarts = echarts; 3.hello.vue组件 <div id="myChart" :style="{width: '100%', height: '380...
Echarts+ajax+java+mysql实现饼图+折线图+柱状图
07-13
Echarts是一款由百度开发的开源JavaScript图表库，它提供了丰富的可视化图表类型，包括但不限于饼图、折线图和柱状图。在这个项目中，Echarts与AJAX和Java后端结合，利用MySQL数据库来实现动态的数据展示。接下来，...
echarts前端+Java后端数据=生成柱状图
01-08
后端部分使用了Java Spring Boot框架，通过`@GetMapping("getPie")`注解定义了一个HTTP GET接口，返回柱状图所需的数据。在这个例子中，数据是预先定义的Long数组，然后转化为List对象，并通过`tbSchoolService`查询...
echarts 柱状图
01-02
**ECharts柱状图详解** ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等，支持大量的自定义选项，可以满足各种复杂的可视化需求。在本示例中，我们...
echarts点击柱状图携带参数跳转页面
最新发布
qq_33911541的博客
05-23 1133
echarts点击柱状图携带参数跳转页面
Echarts+ajax+java+mysql实现饼图+折线图+柱状图-Java代码类资源
02-23
Echarts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，如饼图、折线图、柱状图等，用于在Web应用中展示数据。在这个Java代码类资源中，开发者利用Echarts与AJAX、Java以及MySQL数据库相结合，实现了...
Echarts异步加载后端接口返回的Json数据生成图表
热门推荐
汉南最後の読書人
04-25 1万+
     一.Echarts 是一款很好用的前端报表制作工具,根据官网的开发文档,我们可以导入假数据制作各种分析的图表.详情看官网:Echarts官网案例.但是如果要根据实际情况导入真实的数据呢?怎么处理?     操作的常规思路是这样的:      1.根据需要的业务逻辑编写后端接口,返回对应业务需求的JSON格式数据,具体参考本人之前的博文:SSM编写http接口返回JSON格式数据     ...
vue中使用echarts
xixi的博客
08-31 209
仅自己的意见，供自己查阅 1.https://zhuanlan.zhihu.com/p/102956376 2.https://www.imooc.com/wenda/detail/395107 3.https://www.jb51.net/article/182230.htm 4.https://blog.csdn.net/belongtocode/article/details/103655329?utm_medium=distribute.pc_aggpage_search_result.none-t
vue3 根据接口返回数据循环遍历出echarts图展示
Zzhwkpd的博客
12-10 1970
这是给自己写的 记忆不太好 展示效果 视图代码 <div> //按钮部分 <div>分析维度：</div> <div class="margin-top"> <div> <el-button v-for="(item, index) in buttons" :key="index" :disabled="item.dis...
关于Echarts堆叠柱状图从后台查数据并展示
qq_43038965的博客
07-31 2489
1.首先去Echarts官网下载插件，引入到jsp中 (https://echarts.baidu.com/) <script type="text/javascript" src="www/echarts.min.js"></script>
java统一封装E-charts图形返回数据结构
yixuan_love的博客
08-05 1431
java echarts
vue项目里使用ECharts图表后台返回图表数据
weixin_42778777的博客
03-05 9421
vue项目里使用ECharts图标后台返回图标数据
ECharts 多个柱状图动态获取json数据
书写人生
11-23 5821
ECharts 多个柱状图动态获取json数据 效果图如下： 一.html部分 二.js部分 function loadOneColumn() {     var myChart = echarts.init(document.getElementById('twoColumn'));     // 显示标题，图例和空的坐标轴  
java返给前端ECharts的格式
sungencheng的博客
08-18 2769
Java 返给前端 Echarts 的格式
echarts圆柱形柱状图 源码_echarts象形图pictorialBar（异型柱状图）
weixin_30500365的博客
12-31 709
在echarts社区我保存了这个图的源码http://gallery.echartsjs.com/editor.html?c=xBJhOw_sdX象形图echarts官方解释为象形柱图是可以设置各种具象图形元素(如图片、SVG PathData 等)的柱状图。往往用在信息图中。用于有至少一个类目轴或时间轴的直角坐标系上。在网上有一种我认为更加贴切的名字异型组柱状图，这个图形的配置信息与柱状图的配置...
echarts柱状图调用接口
09-08
要使用 Echarts 绘制柱状图并调用接口，你需要先引入 Echarts 的 JavaScript 文件，并在 HTML 中创建一个容器来显示图表。然后，你可以通过 AJAX 或其他方法从接口获取数据。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Echarts 柱状图调用接口示例</title> <script src="https://cdn.staticfile.org/echarts/4.9.0/echarts.min.js"></script> </head> <body> <div id="chart-container" style="width: 600px; height: 400px;"></div> <script> // 创建柱状图实例 var myChart = echarts.init(document.getElementById('chart-container')); // 发起 AJAX 请求获取数据 var xhr = new XMLHttpRequest(); xhr.open('GET', '接口地址'); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); // 根据接口返回的数据配置图表 var option = { xAxis: { type: 'category', data: data.categories }, yAxis: { type: 'value' }, series: [{ data: data.values, type: 'bar' }] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); } }; xhr.send(); </script> </body> </html> ``` 在上面的代码中，你需要替换 `"接口地址"` 为你实际的接口地址。接口需要返回一个 JSON 格式的数据，其中 `data.categories` 代表柱状图的 x 轴数据，`data.values` 代表柱状图的 y 轴数据。 这是一个简单的示例，你可以根据实际情况进行调整和扩展。希望对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值