Echarts小练习

最新推荐文章于 2024-04-22 10:12:13 发布
最新推荐文章于 2024-04-22 10:12:13 发布
阅读量420 收藏
点赞数
文章标签： Echarts小练习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014285979/article/details/50505794
版权
<%@page language="java" contentType="text/html;charset=utf-8"%>
<%@include file="/base.jsp"%>
<% 
List list = (List)request.getAttribute("list");
String data = "[";
List list_1 = new ArrayList();
List list_2 = new ArrayList();
List list_3 = new ArrayList();
for(int i=0;i<list.size();i++) {
List list3 = (List)list.get(i);
if(i==list.size()-1){
data=data+"'"+list3.get(0)+"']";
} else {
data=data+"'"+list3.get(0)+"',";
}
list_1.add(list3.get(0));
list_2.add(list3.get(1));
list_3.add(list3.get(2));
}
%>
<!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" />
<link rel="stylesheet" type="text/css" href="<%=basePath %>/stat/css/styles2.css" />
<title>资源分析</title>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>


</head>
<body>
 <div style="background-color:#f4f5f8"  class="modular2_modular1">
      
        <div class="modular2_mod1_center1">
        
            <div style="background-color:white;width:770px; height:270px;"><div style="left:20px; top:15px; font-family:微软雅黑; font-size:18px;font-weight:normal;line-height:50px; width:360px; height:18px;margin-left:20px;">资源提供方分布分析</div><div style="height:230px;width:800px;margin-bottom:2px;" id="echarts1"></div></div>
       
        </div>
    <script type="text/javascript">


require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
         require(
            [
                'echarts',
                'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
            ],
              function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('echarts1')); 
                 
   var option = {
   
   
    tooltip : {
        show:true,
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
     legend: {
   
     y:'center',
     textStyle: {
         fontSize: 16,
         fontFamily:'微软雅黑',
         fontWeight: 'normal'
},
        orient : 'vertical',
        x : 'left',
        data:<%=data%>
    },
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: true},
            magicType : {
                show: true, 
                type: ['pie', 'funnel'],
                option: {
                    funnel: {
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'center',
                        max: 1548
                    }
                }
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : false,
    series : [
        {
            name:'资源来源方',
            type:'pie',
            radius : ['50%', '70%'],
            itemStyle : {
                normal : {
             
                    label : {
                        show : true,
                         textStyle : {
                            fontSize : 18,
                            
                            fontWeight : 'bold'
                        }
                        
                    },
                    labelLine : {
                        show : true
                    }
                },
                emphasis : {
                    label : {
                        show : false,
                        position : 'center',
                        textStyle : {
                            fontSize : 25,
                            
                            fontWeight : 'bold'
                        }
                    }
                }
            },
            data:[
               {value:<%=list_2.get(0)%>, name:'<%=list_1.get(0)%>', srcId:'<%=list_3.get(0)%>'},
               {value:<%=list_2.get(1)%>, name:'<%=list_1.get(1)%>', srcId:'<%=list_3.get(1)%>'},
               {value:<%=list_2.get(2)%>, name:'<%=list_1.get(2)%>', srcId:'<%=list_3.get(2)%>'},
               {value:<%=list_2.get(3)%>, name:'<%=list_1.get(3)%>', srcId:'<%=list_3.get(3)%>'}
              
            ]
        }
    ]
};
                // 为echarts对象加载数据 
                myChart.setOption(option);
                myChart.on("click", function(pieItemObj) {
                window.top.top_open('资源类型', '<%=basePath %>/stat/statPortalToManager.do?method=getResTypeBySource&sourceId=' + pieItemObj.data.srcId, 835, 400, this);
                });
            }
        );
</script>  
</body>
</html>
虚拟农夫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web编程期末大作业（三） 用Echarts实现三个以上的数据分析图表展示在表格中
m0_51392766的博客
06-23 903
前面的查询操作按照老师的示例进行地都很顺畅，但是到了图表展示就出了大问题，一开始只有柱状图听话地显示了出来… 柱状图 代码 $scope.histogram = function () { $scope.isShow = false; $http.get("/news/histogram") .then( function (res) { if(res.data.mess
ECharts实战教程
星航夜空的帆舟
06-08 6343
pink老师讲解的ECharts可视化项目。。。
ECharts习题
最新发布
2302_80385233的博客
04-22 233
绘制一个多表联动图主题是专升本目标院校报率比并采取echarts的事件和行为锁定目标院校的专业官网。要求：1.标题2.触发3.事件行为。
Echart的使用初体验，Echarts的基本使用及语法格式，简单图表绘制和使用及图例添加【学习笔记】
m0_63622279的博客
03-11 1万+
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。ECharts 遵循 Apache-2.0 开源协议，免费商用。ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。
ECharts教程(详细)
qq_41974199的博客
03-01 7372
非常全面的ECharts教程，目前线条/节点颜色、线条粗细、线条样式、线条阴影、线条平滑、线条节点大小、线条节点阴影、线条节点边框、线条节点边框阴影、工具提醒、工具提醒样式、工具自定义提醒、工具提醒背景、工具提醒边框、工具提醒阴影、工具提醒文字样式、工具箱、工具箱图标、工具箱标题、工具箱功能、类别显示、类别显示位置、类别显示图标、类别显示图标大小、类别显示图标间距、类别显示、类别显示位置、类别显示图标、类别显示图标大小、类别显示图标间距、类别显示图标文字大小、类别显示图标文字颜色、轴方向等多达四十个快捷键使
Echarts --- 可视化练习（radar01）
懂得一千零一种,赋予你失败的方法！
11-13 484
Echarts — 可视化练习（radar01） 落画素描，入景山水。平仄韵达的诗意，畅悠了季节的孤漠，拾起淡漠唐风的音符，装在七弦琴上，拨弹着日月，校音着声律。花落流水春风绿，一捧桃花醉月光。一笺长长的心卷，任凭风吹过往，一夜风流记否几页故事，长鸣萧声书时光。昏沉的灯光，朦胧了善良的心灵，沉沦了一段暗黑的歌舞。迷离中，风干了人性，吹瘦了人心。 # -*- coding: utf-8 # @Time : 2020/11/11 16:43 # @Author : ZYX # @File
echarts练习笔记
03-11
在“echarts练习笔记”这个项目中，我们可以看到两个主要的文件夹：`templates`和`static`。这表明项目是围绕着构建一个Web应用进行的，其中`templates`通常用于存放HTML模板文件，而`static`则用于存放不随应用程序...
echarts练习笔记-图表模板
03-11
**ECharts练习笔记-图表模板** ECharts是一款由百度开源的、基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，支持自定义交互和视觉效果，广泛应用于Web数据可视化场景。...
Echarts多柱状图练习demo
06-14
在这个“Echarts多柱状图练习demo”中，我们将深入探讨如何利用ECharts创建一个包含多种分类的多柱状图，以及如何处理本地数据。 一、ECharts简介 ECharts是一款开源的、免费的、跨浏览器的数据可视化库，支持多种...
Echarts连接数据库实例
01-29
在本实例中，我们探讨如何使用Echarts这个强大的前端数据可视化库来连接数据库，并通过Java Web和MySQL数据库实现数据的...同时，这也是一个很好的练习，帮助你深入理解Java Web、Echarts以及数据库操作的实战应用。
echarts期末考试
weixin_49345320的博客
06-20 372
【代码】echarts期末考试。
Echarts考试分数柱状图代码
06-24
Echarts考试分数柱状图代码是一款学生成绩柱状图显示图表，悬停柱状图表显示数值内容等功能。
Echarts的使⽤、进阶使用、练习
王和平的第三个果园
12-23 816
Echarts的使⽤ 1.引⼊Echarts <!-- 引⼊ ECharts ⽂件 --> <script src="js/echarts.js"></script> 2. 准备⼀个具备⾼宽的 DOM 容器 <body> <!-- 为 ECharts 准备⼀个具备⼤⼩（宽⾼）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> </bod
关于微信小程序结合Echarts的一些问题
CoderW
07-13 1万+
一.前言 最近由于公司需要，去学习了一下微信小程序结合Echarts。作为一个Java后端工程师，其中的转型是很痛苦的，也不能说是转型把，只是去学习一个不是很完善的前端技术，而且遇到问题百度谷歌都没有解决方法，只能看着官方文档去研究，和同事研究讨论解决方法，非常之艰难。不过本人就是一个喜欢迎难而上的人，也就是头铁，越是碰到问题我越要把你搞清楚。于是乎把Echarts的官方文档研究了...
练习六十八：pyecharts模块练习
weixin_30323961的博客
03-21 385
用一个地图显示最热的几个城市温度代码(用Geo模块)from pyecharts import Geo attr = ["西安","上海","苏州","成都","海南","南京"] value = [28,15,16,26,31,23] geo = Geo("温度表图") geo.add("",attr,value,type="effectScatter",border_color="#ffff...
Echarts绘制折线图柱状图混合图表练习
LmingAn的博客
09-18 1万+
使用绘制折线图柱状图混合图表练习　　第一次看见这个图表库，感觉好NB。做个练习纪念纪念。
小程序中用Echarts
Missbelover的博客
06-14 1725
下载 下载地址： 官方git网站。请按照下图可以进行下载，也可以通过git 手册. 引入项目中 第一步： 拷贝文件，将 echarts-for-weixin-master 项目里面的 ec-canvas 文件夹拷贝到项目目录中， 第二步： 在需要显示页面配置文件中配置组件及引入。 .json 配置组件 { "usingComponents": { "ec-canva...
微信小程序使用echarts异步请求数据
仙女的博客
06-29 1156
// packageSesame/pages/dashboard/dashboard.js // 引入echatrts import * as echarts from '../../../utils/ec-canvas/echarts.js' const app = getApp(); // 引入http接口 const { getDashboard } = require('../../service/reportForm.js').RFurl; const HttpRequest = require
echarts微信小程序图表不跟随滑动问题
热门推荐
xld的博客
08-20 1万+
使用echarts时界面滑动时，图标不跟随滑动，浮在元素上方。 【 问题原因】该布局中含有position:fixed或absulote的元素，导致echarts图表也被固定了儿无法滑动。 【 解决方法】所有父级元素（有包含ec-canvas的所有view元素）的position不可为fixed或absulote，将其改为其他，另外兄弟元素可以为position:absulote，不能是f...
echarts折线图练习
09-22
echarts是一个强大的图表库，它可以用来创建各种类型的图表，包括折线图。要练习echarts折线图，你可以按照以下步骤进行： 1. 首先，你需要在页面中引入echarts的库文件。你可以使用CDN链接来引入echarts，这样可以节省下载资源的时间。 2. 创建一个包含图表的容器，在HTML中使用一个div元素作为图表的容器。 3. 在JavaScript中，创建一个echarts实例，并将其绑定到图表的容器上。 4. 定义x轴和y轴的数据，并设置其他相关属性，如轴标签、轴线样式等。 5. 定义系列（series）数据，这是折线图上要展示的数据。你可以设置数据点的样式、颜色、连接线的样式等。 6. 调用echarts实例的setOption方法，将x轴、y轴和系列数据配置传递给它，并生成图表。 以上是一个基本的echarts折线图的练习步骤。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值