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.hqwc.cn/news/442685.html

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

相关文章

图的学习

图的学习

图的基本概念和术语 图的定义&#xff1a;图是由顶点的有穷非空集合和顶点之间的边的集合组成的&#xff0c;G表示&#xff0c;V是图G中顶点的集合&#xff0c;E是图G中边的集合 无向图&#xff1a;任意两点的边都是无向边组成的图&#xff08;无向边&#xff1a;&#xff08…
阅读更多...
助阵央视春晚直播间，德施曼智能锁携手小红书“大家的春晚”玩转除夕夜

助阵央视春晚直播间，德施曼智能锁携手小红书“大家的春晚”玩转除夕夜

2月9日大年三十当天&#xff0c;智能锁行业领军品牌德施曼&#xff0c;将助阵小红书“央视春晚直播间”&#xff0c;参与“大家的春晚”活动&#xff0c;在直播间陪14亿观众一起看春晚&#xff0c;聊春晚&#xff0c;玩转除夕夜。 每年的央视春晚&#xff0c;都是亿万观众翘首…
阅读更多...
前端工程\模块化

前端工程\模块化

前端工程\模块化&#x1f3ed; 本篇文章&#xff0c;学习记录于&#xff1a;尚硅谷&#x1f3a2;&#xff0c;紧接前文&#xff1a;邂逅Node.JS的那一夜→博客 无论是前端、后端、甚至非编程领域都有模块化的概念&#xff0c;只是不同的领域叫法不同&#xff0c;不过&#xf…
阅读更多...
Qt程序打包发布方法

Qt程序打包发布方法

步骤一 程序变成Release版本&#xff0c;编译一下 然后会生成后缀为.exe的文件 文件位置在x64/Release/ 下 步骤二 按下电脑的winR&#xff0c;输入cmd 点击确定进入如下界面 输入 cd 你的文件夹地址按下回车 如图所示 输入 windeployqt *.exe(*指的是你的文件名) &…
阅读更多...
银行数据仓库体系实践（8）--主数据模型设计

银行数据仓库体系实践（8）--主数据模型设计

主数据区域中保留了数据仓库的所有基础数据及历史数据&#xff0c;是数据仓库中最重要的数据区域之一&#xff0c;那主数据区域中主要分为近源模型区和整合&#xff08;主题&#xff09;模型区。上一节讲到了模型的设计流程如下图所示。那近源模型层的设计在第2.3和3这两个步骤…
阅读更多...
聊聊 Http 服务化改造实践

聊聊 Http 服务化改造实践

在微服务架构体系中远程 RPC 调用主要包括 Dubbo 与 Http 调用两个大类&#xff0c;由于 Dubbo 拥有服务注册中心&#xff0c;并且起服务的命名非常规范&#xff0c;使用包名.类名.方法名进行描述。 粉丝福利&#xff0c; 免费领取C/C 开发学习资料包、技术视频/项目代码&#…
阅读更多...
解读4篇混合类型文件Polyglot相关的论文

解读4篇混合类型文件Polyglot相关的论文

0. 引入 Polyglot文件指的是混合类型文件&#xff0c;关于混合类型文件的基础&#xff0c;请参考文末给出的第一个链接&#xff08;参考1&#xff09;。 1. Toward the Detection of Polyglot Files 1.1 主题 这篇2022年的论文&#xff0c;提出了Polyglot文件的检测方法。虽…
阅读更多...
Vue-49、Vue技术实现动画效果

Vue-49、Vue技术实现动画效果

1、首先&#xff0c;在Vue项目中的src/components文件夹下创建一个名为AnimatedBox.vue的文件。 2、编辑AnimatedBox.vue文件&#xff0c;添加以下代码&#xff1a; <template><div class"animated-box" click"toggle"><transition name&q…
阅读更多...
Python tkinter (12) —— Treeview控件

Python tkinter (12) —— Treeview控件

本文主要是Python tkinter Treeview控件介绍及使用简单示例。 tkinter系列文章 python tkinter窗口简单实现 Python tkinter (1) —— Label标签 Python tkinter (2) —— Button标签 Python tkinter (3) —— Entry标签 Python tkinter (4) —— Text控件 Python tkinte…
阅读更多...
20240131在ubuntu20.04.6下使用whisper不同模式的比对

20240131在ubuntu20.04.6下使用whisper不同模式的比对

20240131在ubuntu20.04.6下使用whisper不同模式的比对 2024/1/31 16:07 首先你要有一张NVIDIA的显卡&#xff0c;比如我用的PDD拼多多的二手GTX1080显卡。【并且极其可能是矿卡&#xff01;】 2、请正确安装好NVIDIA最新的驱动程序和CUDA。可选安装&#xff01; 3、配置whisper…
阅读更多...
centOS+nodejs+mysql阿里云部署前后端个人网站

centOS+nodejs+mysql阿里云部署前后端个人网站

centOSnodejsmysql阿里云部署前后端个人网站 参考&#xff1a; 部署NodeExpressMySQL项目到阿里云轻量应用服务器 阿里云轻量应用服务器部署Node.jsReactMongoDB前后端分离项目 参考&#xff1a;在阿里云上部署nodejs服务 https 部署的原理就是你在本地测试的时候在地址栏&am…
阅读更多...
npm淘宝镜像过期解决办法

npm淘宝镜像过期解决办法

npm淘宝镜像过期解决办法 因为npm 官方镜像&#xff08;registry.npmjs.org&#xff09;在国内访问很慢&#xff0c;我们基本上都会选择切换到国内的一些 npm 镜像&#xff08;淘宝镜像、腾讯云镜像等&#xff09;。由于淘宝原来的镜像&#xff08;registry.npm.taobao.org&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023