ECharts 图表嵌入表格样式的demo

已于 2024-01-31 18:00:25 修改
阅读量660 收藏 11
点赞数 8
分类专栏： 入门案例 图表（echarts） 文章标签： echarts html
于 2024-01-31 17:58:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rainyspring4540/article/details/135959376
版权

心累。。。

如果条件允许，还是强烈建议 用 Echarts+html 来实现（表格部分由 html 来弄）。

这里是调研阶段，想看看 ECharts 原生能做到什么程度。

先贴上样图：

贴上完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
  <script crossorigin src="tool/jquery-1.9.1.min.js"></script>
  <script crossorigin src="tool/echarts-all4.js"></script>
  <!-- <script crossorigin src="assets/ChartCompoment.js"></script> -->
  <!--    <link rel="stylesheet" href="/assets/index-42ba4135.css">-->
</head>
<style>
  .charts {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 10px;

    border: 1px green solid;


  }

  .chart {
    width: 90%;
    height: 400px;
    background-color: rgb(255, 255, 255);
    /* border-radius: 10px; */
    /* box-sizing: border-box; */
    /* overflow: hidden; */
    /* border-radius: 16.503px; */
    /* background: linear-gradient(180deg, rgba(128, 251, 222, 0.17) -76.58%, rgba(249, 242, 213, 0.13) 122.06%);
    backdrop-filter: blur(14.250161170959473px); */

    border: 1px rgb(103, 122, 207) solid;
    margin: 0px;
  }
</style>

<body style="background-color: wheat;">


  <div id="demo_report_title">hello world,Rain!</div>


  <div class="charts">
    <div id="chart" class="chart" />
  </div>


  <script type="text/javascript">



    var chartDom = document.getElementById('chart');
    var myChart = echarts.init(chartDom);
    var option = getOption();

    option && myChart.setOption(option);



    function getOption() {

      let blue = [63, 99, 65, 85, 75, 78, '', 63, 99, 65, 85, 75];

      let row2 = blue.concat([298]);
      // 计算统计值
      // r1.push(arraySum(r1));

      let orange = [61, 99, 60, 15, 65, 43, 76, 34, '', 35, 12, 87];

      let row3 = orange.concat([300]);

      // r2.push(arraySum(r2));


      let red = [];
      for (let i = 0; i < blue.length; i++) {
        let r1_e1 = blue[i];
        let r2_e2 = orange[i];
        // if(r1_e1&&r2_e2){
        r2_e2 = r2_e2 ? r2_e2 : 0;
        r1_e1 = r1_e1 ? r1_e1 : 0;

        let cha = 0;
        if (r1_e1) {
          cha = (r2_e2 - r1_e1) / r1_e1;
        }
        if (cha) {

          // 截取两位小数
          cha = cha.toFixed(2);
        }

        // 取绝对值
        cha = Math.abs(cha);

        // 换算为 百分数

        cha = cha * 100;

        red.push(cha)

        // }
      }

      let row4 = red.concat(['']);

      let option = {

        grid: [
          {

          left: "15%",

          top: "10%",

          // right: "0%",

          bottom: "35%",

        },

        //第2个坐标系
        {
          left:'15%',
          top:'10%',
          bottom: "29%",
        },
        //第3个坐标系
        {
          left:'15%',
          top:'10%',
          bottom: "21%",
        },
        //第4个坐标系
        {
          left:'15%',
          top:'10%',
          bottom: "14%",
        },
        //第5个坐标系
        {
          left:'15%',
          top:'10%',
          bottom: "6%",
        }
      ],

        legend: {

          align: "left",

          itemGap: 18,

          orient: "vertical",

          textStyle: { color: "#000" },

          bottom: 25,

          left: 0,

          // data: [ "问题总计", "已整改","整改中", "已整改占比",],

          data: [
            {
              name: '基于项目实施前预判计算结果',
              // icon: 'none',
            },
            {
              name: '实际数据CIE',
              // icon: 'none'
            },
            {
              name: '偏差',
              icon: 'triangle',
            },
          ],

        },

        xAxis: [

          // 第一行 x 轴
          {

            data: [
              "2022 1",

              "2022 2",

              "2022 3",

              "2022 4",

              "2023 1",

              "2023 2",

              "2023 3",

              "2023 4",

              "2024 1",

              "2024 2",

              "2024 3",

              "2024 4",

              "总计",

            ],

            axisLine: {

              show: true, // X 轴轴线

              lineStyle: {

                color: "#000000",

                // width: 0,

              },

            },

            axisTick: {

              show: true, //隐藏X轴刻度

              // alignWithLabel: true, //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐

              length:117,

            },

            axisLabel: {

              show: true,

              textStyle: {

                color: "#333333", //X轴文字颜色

                fontSize: 14,

              },

              interval: 0,
              overflow: 'truncate',


            },

          },

          // 第二行 x 轴
          {

            position: 'bottom',

            offset: 30,
            gridIndex:1,

            axisPointer: {

              type: 'none',

            },

            axisLine: {

              show: true, //隐藏X轴轴线

              lineStyle: {

                color: "#000",

                // width: 0,

              },

            },

            axisLabel: {

              inside: true,

              textStyle: {

                fontSize: '12',

                color: '#000000'

              },

              interval: 0,

            },

            data: row2,


          },

          // 第三行 x 轴
          {

            position: 'bottom',

            offset: 34,

            gridIndex:2,

            axisPointer: {

              type: 'none',

            },

            axisLine: {

              show: true, //隐藏X轴轴线

              lineStyle: {

                color: "#000",

                // width: 0,

              },

            },

            axisLabel: {

              inside: true,

              textStyle: {

                fontSize: '12',

                color: '#000000'

              },

              interval: 0,

            },

            data: row3,

          },

          // 第四行 x 轴
          {

            position: 'bottom',

            offset: 35,

            gridIndex:3,

            axisPointer: {

              type: 'none',

            },

            axisLine: {

              show: true, //隐藏X轴轴线

              lineStyle: {

                color: "#000",

                // width: 0,

              },

            },

            axisLabel: {

              inside: true,

              textStyle: {

                fontSize: '12',

                color: '#000000'

              },

              interval: 0,

            },

            data: row4,

          },

          {
            gridIndex:4,
            offset: 20,
          }
        ],

        yAxis: [

          {

            type: "value",

            name: "y 左",

            nameTextStyle: {

              color: "#BDD8ff",

              fontSize: 12,

            },
            axisLine: {
              show: false,
            }
            ,
            splitLine: {

              show: false,

              lineStyle: {

                // color: "rgba(255, 255, 255, 0.15)",

                type: 'dotted', // dotted 虚线

              },

            },

            axisTick: {

              show: false,

            },

            axisLabel: {

              show: true,

              textStyle: {

                color: "#333333",

                fontSize: 12,

              },

            },

          },

          {

            type: "value",
            position: 'right',

            // name: "y 右",

            // offset: -40,
            nameTextStyle: { //坐标轴名称的文字样式

              color: "#7AB900",

              fontSize: 12,

            },

            splitLine: { //坐标轴在 grid 区域中的分隔线

              show: false,

              lineStyle: {

                width: 1,

                color: "#CED2DB",

              },

            },
            axisLabel: { //坐标轴刻度标签的相关设置

              show: true,

              textStyle: {

                color: "#333333",

                fontSize: 12,

              },
              // 使用字符串模板，模板变量为刻度默认标签 {value}
              formatter: '{value} %',
              // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
              // formatter: function (value, index) {
              //   return value + 'kg';
              // }

            },
            axisTick: { //坐标轴刻度相关设置
              show: false,
            },
            axisLine: {
              show: false, //坐标轴轴线相关设置
            },


          },

          {
            gridIndex:1,
            axisLine: {
              show: false, //坐标轴轴线相关设置
            },
            
          },
          {
            gridIndex:2,
            axisLine: {
              show: false, //坐标轴轴线相关设置
            },
            
          },
          {
            gridIndex:3,
            axisLine: {
              show: false, //坐标轴轴线相关设置
            },
            
          },
          {
            gridIndex:4,
            axisLine: {
              show: false, //坐标轴轴线相关设置
            },
            
          },
        ],

        series: [


          {

            name: "基于项目实施前预判计算结果",

            type: "bar",

            // barWidth: 22,

            itemStyle: {

              color: '#B4C7E7'

            },

            label: {

              show: false,

              position: "top",

              distance: 0,

              color: "#333333",

              // formatter: "{c}" + "%",

            },
            // 与 第二个 x 轴的 data 对应
            data: blue,

          },
          
          {

            name: "实际数据CIE",

            type: "bar",

            // yAxisIndex: 1,
            label: {

              show: true,

              // position: "top",

              // distance: 0,

              // color: "#333333",

              // formatter: "{c}" + "%",

            },

            itemStyle: {

              color: "#F8CBAD"

            },

            data: orange,

          },

          {

            name: "偏差",

            type: "line",

            lineStyle: {

              color: "rgb(255, 0, 0)",

              width: 0,//线宽为0,就不会显示了

            },

            label: {
              show: true,
              formatter:'{c} %',
            },

            yAxisIndex: 1,

            // showSymbol: false,

            symbolSize: 15,

            symbol: 'triangle',

            data: red,

          },

          ,

          // 背景色
          // {

          //   // name: '背景',

          //   type: "bar",

          //   barWidth: 24,

          //   xAxisIndex: 0,

          //   yAxisIndex: 1,

          //   barGap: "-110%",

          //   data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100], //背景阴影长度

          //   itemStyle: {

          //     normal: {

          //       color: "rgba(214, 233, 252,0.5)",

          //     },

          //   },

          //   tooltip: {

          //     show: false,

          //   },

          //   zlevel: 9,

          // },

        ],

      };

      return option;
      // ————————————————

      //             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

      // 原文链接：https://blog.csdn.net/m0_50478723/article/details/132599130
    }




    // 获取整个 URL
    // var url = window.location.href;

    // // 获取 URL 中的参数部分
    // var params = window.location.search;

    // // 示例用法
    // var sceneId = getParamValue('sceneId');


    function arraySum(arr) {
      let sum = 0;
      for (let i = 0; i < arr.length; i++) {
        sum += (arr[i] == '' ? 0 : arr[i]);
      }
      return sum;
    }

    /**
      * 获取指定参数的值
      **/
    function getParamValue(param) {
      var query = window.location.search.substr(1);
      var paramArr = query.split('&');
      for (var i = 0; i < paramArr.length; i++) {
        var pair = paramArr[i].split('=');
        if (pair[0] === param) {
          return decodeURIComponent(pair[1]);
        }
      }
      return null;
    }

  </script>

</body>

</html>

放学后的泡泡
关注
  • 8
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts 柱状图带底部table表格
m0_64972091的博客
02-03 1849
echarts 柱状图带底部table表格
echarts和dataTable的结合使用查询数据
07-01
前端可以在用一个iframe 将二者在同一界面显示，将frameborder设置为0，看起来就像是一个界面上的
表格插入echarts折线图
m0_73321385的博客
12-02 584
通过npm或者直接引入ECharts的CDN来进行安装。在表格中为echarts准备一个容器dom,注意点我这里使用的是id来绑定图表只要是唯一属性皆可。创建一个Vue组件来包裹表格和ECharts折线图。在该组件中，需要引入ECharts组件。通过自定义插槽或其他方式，在表格中插入ECharts折线图。初始化图表，然后设置图表的样式、数据等属性，最后通过。钩子函数：当组件被挂载时调用，里面调用了。方法使用 ECharts 绘制图表。方法初始化了表格的数据，而。ECharts 图表：通过。
多种echart图转表格
最新发布
qq_63431773的博客
05-16 404
项目中提到了一个需求，想要看到echarts图表中的数据，这里使用toolbox工具栏渲染出一个table表格，并加入导出excel功能。所以就用到echarts配置项中的toolbox工具栏，使用 jquery.table2excel.js实现 导出excel功能。首先引入jquery.js，再次引入 jquery.table2excel.js。
echarts图+el-table表自适应问题
qq_45243719的博客
01-23 488
原因：element 内部的table宽度是根据父级元素来计算的。当父元素是 flex 布局时，嵌套的子元素会有一个是固定的宽度。当子元素的固定宽度大于 flex 的宽度时，flex 就不会自动缩小。1.父元素是flex布局时，el-table表格宽度可以随浏览器变大但是不能跟随缩小。2.echarts图随浏览器自适应大小。解决办法：给table的父元素设定。，给table设定绝对定位。
echarts带table表格展示
Z_Gleng的博客
02-20 3718
整体思路就是用graphic这个属性去画线 表格里的值用的定位写的。
echarts柱状图X轴增加table列表显示数据,多y轴
yuanbo_520的博客
08-10 1164
【代码】echarts柱状图X轴增加table列表显示数据,多y轴。
将Echarts的数据视图展示为table并且导出Excel
huanhuan03的博客
12-23 7749
Echarts官网示例，用过Echarts的小伙伴都知道，它带有自己很多原生功能，比如简单举例： 想要详细了解可以去官网看配置项，今天主要说一下图中蓝色框的‘数据视图’这个功能，如下是官网上这个功能按钮所展示的数据视图： 现在项目有需求，就是客户既要看到这个折线图，又要看到数据展示，当然这个已经实现展示了，只不过没有样式，要求是整齐的table表格，而且还能导出这个table。 当然方式很多，...
Echarts饼图 & Table数据联动
weixin_52281567的博客
11-11 2306
<template> <div> <div id="myChart":style="{width: '1000px', height: '400px'}"></div> <el-table :data="chartData"style="width:420px; margin-left: 300px"class="jk-table":row-style="TableRowStyle"> ...
用echartsjs 实现散点图与table表格双向交互，以及实现echarts取自于table数据，和自定义echarts提示内容...
weixin_33984032的博客
12-03 764
本人研究echarts已经有一段时间了，今天就分享几个关于echarts的小技巧。虽然看起来简单，但做起来却很繁琐，不过实用性倒是很好。 在一个大的页面中，左边为table表格，右边为echarts的散点图。 需求一，实现echarts中所有的散点取自table中的数据。 需求二：两个交互，交互1，点击左边的table中数据时，先实现table重新隔行变色，然后左边被点击的数据背景颜色变黄，...
echarts数据化图表新手入门
wsxokn945的博客
10-28 1032
ECharts是一个使用 JavaScript 实现的开源可视化库 ，ECharts可谓是制作图表的良心之选，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，所以，基本完全不用担心兼容性的问题，底层依赖轻量级的矢量图形库 ZRender、提供直观、交互丰富、可高度个性化定制的数据可视化图表。
EasyUI表格合并，及echarts折线图，导出折线图为图片
01-23
EasyUI表格合并，及echarts折线图，导出折线图为图片
echarts 图表案例demo很多好看的demo
03-20
echarts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的...
echarts图表导出excel示例
09-04
在本文中，我们将深入探讨如何使用ECharts图表库来实现数据的导出功能，特别是将图表数据导出为Excel格式。ECharts是一个基于JavaScript的数据可视化库，它提供了丰富的图表类型和强大的交互性，广泛应用于Web应用...
java后台生成echarts图表
11-13
然而，在某些场景下，我们可能需要在Java后台生成这些图表，而不是在前端直接渲染，比如用于报表生成、邮件发送或PDF文档嵌入等。 `echarts-java` 是一个专为 Java 开发者设计的工具库，它允许我们在 Java 后台生成...
Axure集成echarts图表组件.rplib
06-28
主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图，饼图，折线图等基本图形的展示。 主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图...
ASP.Net实现SQL动态绑定Echarts图表Demo完整源码
06-15
【ASP.Net实现SQL动态绑定Echarts图表Demo完整源码】是一个示例项目，它演示了如何在ASP.Net环境中结合Echarts图表库、C#、SQL和JSON技术来动态展示数据库中的数据。该项目的核心目标是利用后端服务器处理程序获取...
学习在echarts中优化数据视图dataView样式带表格样式，支持复制功能
徊忆羽菲
11-07 1288
学习在echarts中优化数据视图dataView样式带表格样式，支持复制功能
echarts绘制图表
weixin_44543121的博客
05-17 2115
绘制图表
echarts大数据图表样式demo
08-03
echarts是一款优秀的数据可视化工具，可以用来展示大数据图表样式。在echarts的官方文档中，提供了多种样式的demo供我们参考。 首先，echarts支持各种常见的图表类型，包括折线图、柱状图、散点图、饼图等。我们可以根据数据的不同特点选择合适的图表类型来展示。 其次，在样式方面，echarts提供了丰富的配置选项，可以自定义图表的主题、颜色、线条粗细、标签字号等。我们可以根据需求来调整样式，使图表更加美观和易读。 另外，echarts还支持大数据量的展示。对于大数据量的图表，echarts提供了优化性能的方法，如使用Canvas绘图、使用WebGL渲染等，可以使图表的渲染速度更快。 总结起来，echarts大数据图表样式demo提供了丰富的图表类型和样式配置选项，可以满足不同需求的数据可视化需求。我们可以根据自己的需求选择合适的图表类型和样式，使用echarts来展示大数据图表，并通过调整样式使得图表更美观、易读。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值