web轻巧的图表表示数据——echart

最新推荐文章于 2024-05-16 22:32:26 发布
最新推荐文章于 2024-05-16 22:32:26 发布
阅读量604 收藏
点赞数
分类专栏： java freemarker tomcat
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zml1991105/article/details/52366188
版权
java 同时被 3 个专栏收录
15 篇文章 0 订阅
订阅专栏
tomcat
3 篇文章 0 订阅
订阅专栏
freemarker
2 篇文章 0 订阅
订阅专栏
官方原例(官网-http://echarts.baidu.com/)： 
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>ECharts</title>
</head>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
			echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
	 // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));                 
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":[51, 20, 40, 10, 10, 20]
                        }
                    ]
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
</script>
<body>
	<div id="div">
		被越过的青春，被打碎的瓶子，被挥散的混沌，被释放的梦魇，我想那些都与我们无关。就像它每天为她衔来洼处的水，她慢慢为它开一朵花。很久以前的认识，延误到现在。
	</div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
</body>

这个例子还是很好理解的。所以可以看出echart用起来很方便。

下面是我自己做项目的时候的扩展： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${site.shortName}</title>
<script type="text/javascript" src="${resSys}/jquery-1.9.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="/${res}/css/index.css" />
<script type="text/javascript" src="/${res}/js/index.js"></script>
<script type="text/javascript">
	function _export(){
		var tableForm = document.getElementById("jvForm");
		tableForm.action="${base}/org_count/inner/o_export.jspx";
		tableForm.οnsubmit=null;
		tableForm.submit();
	}

	function _back(){
		var tableForm = document.getElementById("jvForm");
		tableForm.action="${base}/org_count/inner_super/v_list.jspx";
		tableForm.οnsubmit=null;
		tableForm.submit();
	}

</script>
</head>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
	var myChart;
    // 路径配置
    require.config({
        paths: {
			echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
	 // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                myChart = ec.init(document.getElementById('main'));                 
                               var option = {
                    title : {
					        text: '单位统计'
    				},
                    tooltip: {
                        show: true
                    },
                    legend: {
                    
                        data:[
	                       [#if yearList ?? && yearList?size gt 0]
	              				[#list yearList as y]	                       
                       			 ${y.name}+"年",              
		                        [/#list]
				            [/#if]
                        ]
                    	},
                    
                    xAxis : [
                        {
                            type : 'category',
                            data : [                            
                            [#if orgList ?? && orgList?size gt 0]
              				[#list orgList as o]
              				"${o.name}",
              				[/#list]
              				[/#if]
              			 ]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                    [#if yearList ?? && yearList?size gt 0]
              				[#list yearList as y]		                      	              							
						                        {		                        
						                            "name":${y.name}+"年",
						                            "type":"bar",
						                            "data":[						                             
						                             [#if orgList ?? && orgList?size gt 0]
              										 [#list orgList as o]
              										  [#assign flag=0?number]						                            		                          		
								                            [#if list ?? && list?size gt 0]
								              				[#list list as l]
								              					[#if y.id==l.year.id&&o.id==l.org.id]
								              						${l.times!0},
								              						[#assign flag=1]								              														              														              													              												              													              						
							              						[/#if]							              														              				
							              					[/#list]							              												              					
									              			[/#if]
									              			[#if flag?number==0]0,[/#if]									              												              												              												              			
								              		 [/#list]
				             					  [/#if]								              					              				
						              			]		              			
						                    },						                        		                       		
                           [/#list]
		             [/#if]
                                               
                    ],                                       
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option);
                //getData();
            }
        ); 
</script>

<body>
<form id="jvForm" method="post">
	<input type="hidden" id="id" name="id" value="" />
		<input type="hidden" id="order" name="order" value="${order!}" />
	<div class="total">
		[#include "../include/top.html"/]
		<div class="mainbody">
			[#include "../include/channel.html"/]
			<div class="webnews">
				<span>当前位置：</span><a href="${base}/">首页</a> > 单位统计
			</div>
			<div class="sjCon">
				<div class="sj_main">
				<div>
					<a style="margin-right: 10px;float: right;" href="javascript:_back();">表格模式</a>					
					<a style="margin-right: 10px;float: right;" href="javascript:_export();">导出</a>
				</div>
   						 <div id="main" style="height:400px"></div>				
				</div>
			</div>
		</div>
		[#include "../include/footer.html"/]
	</div>
</form>
</body>
</html>



洋葱水墨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echart实例echart实例
02-09
echart实例echart实例echart实例
Flask和pyecharts实现动态数据可视化
12-20
Flask是一个轻量级的Web服务器网关接口（WSGI）Web应用框架，而pyecharts则是一个用于生成ECharts图表的Python库，非常适合数据可视化。 首先，我们来看数据源——好莱坞2006-2011数据集，这个数据集包含了电影、...
使用echart展示数百万条数据时，应该怎么做
weixin_43801836的博客
10-02 2854
使用echart展示数百万条数据时，应该怎么做。
多种echart图转表格
最新发布
qq_63431773的博客
05-16 474
项目中提到了一个需求，想要看到echarts图表中的数据，这里使用toolbox工具栏渲染出一个table表格，并加入导出excel功能。所以就用到echarts配置项中的toolbox工具栏，使用 jquery.table2excel.js实现 导出excel功能。首先引入jquery.js，再次引入 jquery.table2excel.js。
轻松上手Web Worker：多线程解决方案的使用方法与实战指南
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
12-31 1614
通过使用 Web Workers，Web 应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务，从而允许主线程（通常是 UI 线程）不会因此被阻塞/放慢。使用构造函数（例如，Worker()）创建一个 worker 对象，构造函数接受一个 JavaScript 文件 URL — 这个文件包含了将在 worker 线程中运行的代码。
echarts实现排名柱状图
小小•愿望的博客
03-22 1万+
通过echarts实现排名柱状图统计。
Echart 图表使用（二）
Love_Fish_Young的博客
07-18 636
Echart label标签换行展示、圆环饼图大小修改、圆环饼图位置、圆环饼图颜色修改、圆环饼图引导线长度修改、柱状图（交错正负轴标签）自适应高度展示、双 y 轴、x轴刻度值倾斜、tooltip 换行展示、占比数据加 % 展示
老版本echart 官网下载不到
04-10
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，适用于各种Web数据可视化场景。在“老版本echart 官网下载不到”的情况下，这可能是因为官方网站通常只提供最新版本的下载，而旧...
echart+jquery的压缩包
01-10
本压缩包包含两个核心的JavaScript库——echarts.js和jquery.js，它们是开发交互式图表和处理DOM操作的强大工具。让我们详细了解一下这两个库以及如何在实际项目中应用它们。 **jQuery** jQuery是由John Resig于...
swift-WBEChartsKit利用百度的h5图表库ECharts封装了一套iOS的库
08-15
`WBEChartsKit`是一个出色的工具，它将流行的JavaScript图表库——百度的ECharts与Swift语言相结合，为iOS开发者提供了一种方便的方式来实现丰富的图表功能。下面我们将详细探讨`WBEChartsKit`的特性和使用方法。 1...
ECharts 学习笔计——折线图
08-12
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，包括折线图、柱状图、饼图、散点图等，广泛应用于Web数据可视化场景。在这个学习笔记中，我们将重点关注如何使用ECharts来创建折线...
echarts 折线图
aibujin的博客
05-16 1万+
echarts 折线图，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；
封装一个公用的【Echarts图表组件】的3种模板
weixin_50450473的博客
07-31 6013
在components下创建一个echarts.vue文件 <template> <div> <div class="know_r_echart"> <div id="atlasChart"></div> </div> </div> </template> <script> import * as echarts from 'echarts' export ..
Echarts图表使用-“暂无数据“优化、饼图轮播、饼图静态当前高亮、柱状图画时间段（圆内各个扇形）
工作中遇到问题记录
06-06 1747
Echarts图表使用-"暂无数据"优化、饼图轮播、饼图静态当前高亮、柱状图画时间段（圆内各个扇形） 【包含】避免出现echarts.js:2218 There is a chart instance already initialized on the dom.警告
免费开源的100套Echarts大屏数据可视化模板分享
热门推荐
coderYYY的博客
06-23 3万+
100套大数据可视化炫酷大屏Html5模板；包含行业：社区、物业、政务、交通、金融银行等，全网最新、最多，最全、最酷、最炫大数据可视化模板。陆续更新中 不用再自己花钱买了，git上有开源的100套项目，有预览图和在线预览地址，按需取用。...
如何利用echart实现数据可视化?
i-cat的博客
11-22 4780
第三方可视化图表库:echart如何使用
web应用实战篇（echart篇）：一步步教你做可视化大屏（准备篇）
dhjabc_1的专栏
04-26 2046
一直计划做一个可视化的大屏，然后今天花了一些时间做前期的准备工作，下面是准备过程中的一些总结，分享给大家伙，希望你们能够喜欢！ 下面正式进入主题吧！web应用实战篇（echart）：一步步教你做可视化大屏（准备篇） 文章目录一、什么是ECharts（一）丰富的可视化类型（二）多种数据格式无需转换直接使用（三）深度的交互式数据探索（四）多维数据的支持以及丰富的视觉编码手段（五）动态数据二、第一个完整...
echarts 排名
baidu_41899377的博客
07-17 519
【代码】echarts 排名。
echart图表数据量大会延长渲染时间吗
05-05
3. 使用Web Worker：Web Worker可以将图表渲染的计算过程放到后台运行，不影响页面的正常操作，这样可以提高图表的渲染速度。 4. 使用Canvas渲染：Canvas渲染不依赖于DOM，可以直接绘制图表，因此比使用SVG或HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值