ECharts 图表嵌入表格样式的demo

心累。。。

如果条件允许，还是强烈建议 用 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/658678.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SQL注入攻击 - 基于布尔的盲注

SQL注入攻击 - 基于布尔的盲注

环境准备：构建完善的安全渗透测试环境：推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 查看靶场详情：SQL Injections 一、判定是否有注入点 以下是一个常见的步骤： 在URL中尝试输入特殊字符，如： " \ -- 等，并观察页面返回的内容。在URL中尝试输入错误的…
阅读更多...
MySQL：MVCC原理详解

MySQL：MVCC原理详解

MySQL是允许多用户同时操作数据库的&#xff0c;那么就会出现多个事务的并发场景。那么再并发场景会出现很多问题&#xff1a;脏读、不可重复读、幻读的问题。 而解决这些问题所用到的方法就是&#xff1a;MVCC 多版本并发控制。而这个MVCC的实现是基于read_view、undoLog 如…
阅读更多...
【Linux驱动】块设备驱动（一）—— 注册块设备

【Linux驱动】块设备驱动（一）—— 注册块设备

针对块设备驱动将分为两部分介绍&#xff0c;第一部分是注册块设备&#xff0c;即将块设备成功添加到内核&#xff1b;第二部分是介绍如何读写块设备&#xff0c;因为没有实际块设备&#xff0c;这里选择使用内存来模拟块设备。 一、认识块设备 1、什么是块设备 块设备针对的…
阅读更多...
浏览器内存泄漏排查指南

浏览器内存泄漏排查指南

1、setTimeout执行原理 使用setInterval/setTimeOut遇到的坑 - 掘金 2、Chrome自带的Performance工具 当我们怀疑页面发生了内存泄漏的时候&#xff0c;可以先用Performance录制一段时间内页面的内存变化。 点击开始录制执行可能引起内存泄漏的操作点击停止录制 如果录制结束…
阅读更多...
【Java基础】之进程与线程

【Java基础】之进程与线程

进程与线程 1. 线程与进程1.1 概念1.2 区别与联系 2. 线程的5种状态和切换2.1 简单介绍2.2 状态切换2.2.1 重点情况 3. 线程中常见的方法4. 线程池 1. 线程与进程 1.1 概念 进程&#xff1a;资源分配的基本单元&#xff0c;如QQ音乐 线程&#xff1a;资源调度的基本单元&…
阅读更多...
关于美图秀秀如何给证件照快速抠图换背景操作

关于美图秀秀如何给证件照快速抠图换背景操作

日常生活中一些经常处理的小技巧&#xff0c;记录以备以后使用&#xff0c;也方便别人&#xff0c;希望能帮到大家。 1、先导入一张相片&#xff0c;点击AI人像抠图&#xff1b; 2、再点应用当前效果&#xff1b; 3、再点击自动抠图或手动抠图或形状抠图;就可以点击换背景 4、…
阅读更多...
Pyecharts绘制多彩气泡图：从基础到高级定制【第49篇—python：多彩气泡图】

Pyecharts绘制多彩气泡图：从基础到高级定制【第49篇—python：多彩气泡图】

Pyecharts绘制多种炫酷气泡图参数说明代码实战 引言 数据可视化是数据分析中不可或缺的一环&#xff0c;而Pyecharts作为一款基于Echarts的Python图表库&#xff0c;提供了丰富的图表类型&#xff0c;其中气泡图是一种常用于展示三维数据的炫酷图表。本文将介绍如何使用Pyech…
阅读更多...
Git 介绍 与 配置

Git 介绍 与 配置

Git 介绍 Git是一个分布式版本控制系统&#xff0c;用于跟踪文件的更改和协作开发。它可以管理项目的版本历史记录&#xff0c;并允许多个开发者在同一时间进行并行开发。 解决上图产生的问题就出现了git 分布式版本控制系统 看下图 Git 配置 Git的基本配置包括用户名和电子邮…
阅读更多...
leetcode hot100岛屿的最大面积

leetcode hot100岛屿的最大面积

本题是让求岛屿的最大面积&#xff0c;和上一个题求岛屿的数量类似&#xff0c;也是通过dfs或者bfs进行求解。 那么&#xff0c;首先我们判断dfs函数的参数&#xff0c;需要grid[][]&#xff0c;需要横坐标i&#xff0c;纵坐标j。那么&#xff0c;这里我们求的是最大面积&…
阅读更多...
2万块的郎酒，都是我们惯的

2万块的郎酒，都是我们惯的

文 | 琥珀酒研社 作者 | 五画 当我看到郎酒拿出快2万一瓶纪念酒的时候&#xff0c;我就知道&#xff0c;这场高价酒的喧嚣和吵闹&#xff0c;又到了一个新的高度。 和别的行业有所不同&#xff0c;白酒很少谈智商税&#xff0c;再高的价格&#xff0c;总有个冠冕堂皇的理由。…
阅读更多...
Linux文本三剑客---awk经典案例

Linux文本三剑客---awk经典案例

awk&#xff08;是一种处理文本文件的应用程序&#xff0c;它依次处理文件的每一行&#xff0c;并读取里面的每一个字段。&#xff09; awk 包含几个特殊的内建变量&#xff08;可直接用&#xff09;如下所示&#xff1a; 1、获取根分区剩余大小 #可以使用df -h命令来查看所有…
阅读更多...
ElementUI Form：InputNumber 计数器

ElementUI Form：InputNumber 计数器

ElementUI安装与使用指南 InputNumber 计数器 点击下载learnelementuispringboot项目源码 效果图 el-radio.vue 页面效果图 项目里el-input-number.vue代码 <script> export default {name: el_input_number,data() {return {num: 1,num5: 1,num6: 1,num7: 1,num8:…
阅读更多...
Logstash 7.7.1版本安装系统梳理

Logstash 7.7.1版本安装系统梳理

前言 上一篇文章介绍了 《ElasticSearch7.7.1集群搭建 & Kibana安装》&#xff0c;今天说一下 Logstash的安卓和配置&#xff1b; Logstash是一个开源的数据收集引擎&#xff0c;具有实时管道功能。它可以动态地将来自不同数据源的数据统一起来&#xff0c;并将数据标准化…
阅读更多...
多线程代码案例之线程池

多线程代码案例之线程池

作者简介&#xff1a; zoro-1&#xff0c;目前大二&#xff0c;正在学习Java&#xff0c;数据结构&#xff0c;javaee等 作者主页&#xff1a; zoro-1的主页 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f496; 创建线程池 public class Poo…
阅读更多...
Xmind文件转CSV、Excel文件

Xmind文件转CSV、Excel文件

不知道小伙伴们有没有发现&#xff0c;新版Xmind文件转Excel是收费的功能。因为自己不经常使用Xmind&#xff0c;收到一个这样的文件&#xff0c;需要转换成Excel&#xff0c;也不不值得破解或者付费。在github上有一个工具XMind2TestCase&#xff0c;非常不错&#xff0c;可以…
阅读更多...
网安人必看！CISP家族顶流证书攻略

网安人必看！CISP家族顶流证书攻略

网络安全已成为当今的热门领域&#xff0c;证书在职业发展中的重要性不言而喻。但是&#xff0c;证书市场五花八门&#xff0c;选择适合自己的证书可是个大问题。别担心&#xff0c;今天我们就来聊聊CISP家族的几个热门认证&#xff0c;让你在网络安全领域的发展更加顺利&#…
阅读更多...
在虚拟环境中导出和安装requirements.txt文件

在虚拟环境中导出和安装requirements.txt文件

背景&#xff1a; ​ 一般在项目开放完成后&#xff0c;我们需要把项目工程所需要的虚拟环境依赖包导出&#xff0c;以便在服务器上进行安装和配置&#xff0c;这时候我们一般将所需要的python相关库导出一个txt文件&#xff0c;后续在服务器上之前pip安装即可。 措施&#x…
阅读更多...
【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲

【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大三在校生&#xff0c;喜欢AI编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc;️…
阅读更多...
Nicn的刷题日常之带空格直角三角形图案

Nicn的刷题日常之带空格直角三角形图案

1.题目描述 描述 KiKi学习了循环&#xff0c;BoBo老师给他出了一系列打印图案的练习&#xff0c;该任务是打印用“*”组成的带空格直角三角形图案。 输入描述&#xff1a; 多组输入&#xff0c;一个整数&#xff08;2~20&#xff09;&#xff0c;表示直角三角形直角边的长度&am…
阅读更多...
测试环境搭建整套大数据系统（二：安装jdk，mysql）

测试环境搭建整套大数据系统（二：安装jdk，mysql）

一&#xff1a;安装JDK 参考 https://blog.csdn.net/weixin_43446246/article/details/123328558 二&#xff1a;安装mysql 1.因为我们安装cdh6.3.2。cdh支持的是5.6和5.7版本的mysql。 2. 步骤 wget https://downloads.mysql.com/archives/get/p/23/file/mysql-server_5.7.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023