Echarts
关注
分享
扫一扫
走到天涯海角
从坑中爬出后，避免再次入坑！
展开
-
图表的线体是动态的，3条到6条
【代码】图表的线体是动态的，3条到6条。原创 2022-09-29 11:21:12 · 1166 阅读 · 2 评论 -
按天数显示的柱状图
【代码】按天数显示的柱状图。原创 2022-09-13 19:23:28 · 895 阅读 · 1 评论 -
echart自定义显示标题
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>echart自定义显示标题</title> <!-- 引入 echarts.js --> <script src="echarts/echarts.min.js"></script></head><body> .原创 2022-04-18 17:12:57 · 2572 阅读 · 0 评论 -
日周月图表样式
伪数据var obj = { //日 dayList:{ title: "日", echartsXaxis: ["10-20", "10-21", "10-22", "10-23", "10-24", "10-25", "10-26"], seriesData: [{ name: '测试1', type: "line", data: [13, 27, 49, 88,.原创 2021-10-26 17:10:28 · 457 阅读 · 0 评论 -
echarts柱状图的柱子不同颜色
效果图：伪数据：timeList: [ { PERIOD: "计划上线总数", OUTPUT: "280" }, { PERIOD: "异常单数", OUTPUT: "20" }, { PERIOD: "合格单数", OUTPUT: "280" }, ],<!DOCTYPE html><html><head> <m原创 2021-05-18 14:19:28 · 575 阅读 · 0 评论 -
echartsY轴累加图
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>echartsY轴累加图</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script></head><body> <...原创 2021-05-13 16:50:04 · 897 阅读 · 3 评论 -
echarts关系图
效果图：代码：<!DOCTYPE html><html><head> <title>ECharts 关系图</title> <script src="js/echarts.min.js"></script></head><body> <div id="main" style="width: 600px;height:400px;border:1p原创 2021-05-12 16:06:46 · 9085 阅读 · 5 评论 -
echarts饼图切换数据
效果：伪数据：var obj = { //测试 test: [ [ { NAME: "开立", VALUE: "60" }, { NAME: "操作中", VALUE: "25" }, { NAME: "关结", VALUE: "15" }, ], .原创 2021-05-10 13:07:20 · 1161 阅读 · 0 评论 -
Echarts版本的问题，有的版本缺少data会造成图例无法显示
务必加上data原创 2021-04-21 15:16:30 · 406 阅读 · 0 评论 -
Echarts地图
HTML文件<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>地图</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script> <!-- <script src='https://cdn原创 2021-01-11 14:16:29 · 1270 阅读 · 0 评论 -
Echarts图表没数据的时候，用图片代替暂无数据(图片自适应)
有数据时：没数据时：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Echarts图表没数据的时候，用图片代替暂无数据</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script> &l.原创 2020-10-26 19:51:39 · 4194 阅读 · 0 评论 -
echarts无数据时显示背景图
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>echarts无数据时显示背景图</title> <!-- 引入 echarts.js --> <script src="js/jquery/1.10.2/jquery.min.js"></script> <script src="j.原创 2020-10-16 09:50:29 · 1910 阅读 · 0 评论 -
echarts单行柱状图
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>柱状图</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script></head><body> <!-- 为EChart.原创 2020-09-30 13:46:59 · 671 阅读 · 0 评论 -
ECharts南丁格尔图
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>dom</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script></head> <body> <!-- 为ECha.原创 2020-09-30 10:21:43 · 985 阅读 · 0 评论 -
echartsY轴柱状图
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>echartsY轴柱状图</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script></head><body> <!-.原创 2020-09-29 13:05:02 · 2069 阅读 · 0 评论 -
echarts折线图阴影设置
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>echarts折线图阴影设置</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script></head><body> <.原创 2020-09-23 16:41:15 · 8784 阅读 · 0 评论 -
echarts 修改y轴name的颜色
yAxis: [ { type: 'value', name:'（投入/产出）', nameTextStyle:{ color:"#65ABE7", fontSize:12, }, min: 0, ...原创 2020-09-23 11:36:39 · 15089 阅读 · 0 评论 -
echarts柱状渐变图
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>dom</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script></head> <body> <!-- 为ECha.原创 2020-09-23 09:53:47 · 522 阅读 · 0 评论 -
echarts的高度如何动态设置？
<div id="main" style="width: 100%;height:65vh;margin-top:5vh;position:absolute;"></div>/*图表*/ // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var o..原创 2020-08-11 17:36:55 · 10476 阅读 · 1 评论 -
echarts增加loading加载效果，以免界面上出现长时间空白
111原创 2020-07-16 11:33:43 · 3485 阅读 · 0 评论 -
echarts图表没有数据的时候，在页面显示暂无数据
if(arr.length=='0'){ option = { title: { text: '暂无数据', x: 'center', y: 'center', textStyle: { color: '#65ABE7', fontWeight: 'normal', fontSize: 16 } } .原创 2020-07-15 15:56:37 · 11501 阅读 · 6 评论 -
EChartsX轴数据过多时自动滚动
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>EChartsX轴数据过多时自动滚动</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script></head><body> &l.原创 2020-07-13 19:32:58 · 7035 阅读 · 9 评论 -
如何修改Echarts的各个小部分
1.修改X轴的相关信息1.1. X轴xAxis: {}1.2. X轴的数据，data，Y轴也可以设置xAxis: { data: [], }1.3. X轴文字标签，Y轴也可以设置xAxis: { axisLabel: { //X轴标签 interval: 0, //0,每列都显示,隔一列显示一个 rot原创 2020-07-04 23:09:40 · 3328 阅读 · 0 评论 -
使用Java和JSP以及Echarts实现报表管理（按用户查询日志、按时间查询日志）
最终效果图：按用户查询日志：（数据库的数据）按时间查询日志：（数据库的数据）本周：近半年：数据库中的建表语句和插入数据：建表语句：CREATE TABLE TEXT_LOG_INF( LOG_ID NUMBER(10) PRIMARY KEY, LOG_CNT VARCHAR2(200), ADMIN_NAME VARCHAR2(200),...原创 2020-02-29 12:20:07 · 642 阅读 · 0 评论 -
连接数据库并把数据结果展示在Echarts上（JSP展示），以及遇到的问题
最终效果图（从数据库查询出来）：这边是宽度设置的原因，所以有些日期没有显示出来，后面再改改就好了，不碍事。按时间查询本周：数据库里面的数据是这样的：我这边犯了一个错误，导致一步错步步错和以前一样，我新建一张表的时候，就会新建一个bean，把这张表的字段都加上，这边总共有四个字段。然后，我惯性思维，犯傻了，如下图：然后我一直以为是dao写错了，没注意到一开始就...原创 2020-02-28 17:39:29 · 3925 阅读 · 7 评论