![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Echarts
走到天涯海角
从坑中爬出后,避免再次入坑!
展开
-
图表的线体是动态的,3条到6条
【代码】图表的线体是动态的,3条到6条。原创 2022-09-29 11:21:12 · 1111 阅读 · 2 评论 -
按天数显示的柱状图
【代码】按天数显示的柱状图。原创 2022-09-13 19:23:28 · 804 阅读 · 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 · 2507 阅读 · 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 · 434 阅读 · 0 评论 -
echarts柱状图的柱子不同颜色
效果图:伪数据:timeList: [ { PERIOD: "计划上线总数", OUTPUT: "280" }, { PERIOD: "异常单数", OUTPUT: "20" }, { PERIOD: "合格单数", OUTPUT: "280" }, ],<!DOCTYPE html><html><head> <m原创 2021-05-18 14:19:28 · 546 阅读 · 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 · 844 阅读 · 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 · 9001 阅读 · 5 评论 -
echarts饼图切换数据
效果:伪数据:var obj = { //测试 test: [ [ { NAME: "开立", VALUE: "60" }, { NAME: "操作中", VALUE: "25" }, { NAME: "关结", VALUE: "15" }, ], .原创 2021-05-10 13:07:20 · 1105 阅读 · 0 评论 -
Echarts版本的问题,有的版本缺少data会造成图例无法显示
务必加上data原创 2021-04-21 15:16:30 · 379 阅读 · 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 · 390 阅读 · 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 · 4047 阅读 · 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 · 1798 阅读 · 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 · 641 阅读 · 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 · 957 阅读 · 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 · 2038 阅读 · 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 · 8718 阅读 · 0 评论 -
echarts 修改y轴name的颜色
yAxis: [ { type: 'value', name:'(投入/产出)', nameTextStyle:{ color:"#65ABE7", fontSize:12, }, min: 0, ...原创 2020-09-23 11:36:39 · 14423 阅读 · 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 · 503 阅读 · 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 · 10161 阅读 · 1 评论 -
echarts增加loading加载效果,以免界面上出现长时间空白
111原创 2020-07-16 11:33:43 · 3426 阅读 · 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 · 11420 阅读 · 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 · 6907 阅读 · 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 · 3141 阅读 · 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 · 612 阅读 · 0 评论 -
连接数据库并把数据结果展示在Echarts上(JSP展示),以及遇到的问题
最终效果图(从数据库查询出来):这边是宽度设置的原因,所以有些日期没有显示出来,后面再改改就好了,不碍事。按时间查询本周:数据库里面的数据是这样的:我这边犯了一个错误,导致一步错步步错和以前一样,我新建一张表的时候,就会新建一个bean,把这张表的字段都加上,这边总共有四个字段。然后,我惯性思维,犯傻了,如下图:然后我一直以为是dao写错了,没注意到一开始就...原创 2020-02-28 17:39:29 · 3874 阅读 · 7 评论