Echar的学习记录

我就是我 2022-06-02 04:28 154阅读 0赞

Echar通常用作统计图表的制作：

可以用很简单的代码对报表的实现。

不多说 开始实践：

首先：html 代码：

<div id="showEchartBarChart_up" style="width:100%;height:300px;">
    										  
    	</div>

一个简单的存放报表的div。

js代码：

var myChart = echarts.init(document.getElementById('showEchartBarChart'));
    $.ajax({
                url:url_prefix+'/administrator/manuscriptManagement/overview/manuscriptInfos',
                async:false,
                type: "GET",
                dataType:'json',
            	data : {
    				"year":year,
    				"month":monthValue,
    				"week":weekValue
    			},
                success:function(data, textStatus, jqXHR){
                	
    				
                	
                   	let option_up = {
                   		    tooltip : {
                   		        trigger: 'item',
                   		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                   		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                   		        }
                   		    },
                   		    legend: {
                   		        data:['投稿数','通过率(%)','暴力','色情','侵权','政治敏感','违反平台协议','其他']
                   		    },
                   		    calculable : true,
                   		    xAxis : [
                   		        {
                   		            type : 'category',
                   		            data : data.data.time_shaft
                   		        }
                   		    ],
                   		    yAxis : [
                   		        {
                   		            type : 'value'
                   		        }
                   		    ],
                   		    series : [
                   		        {
                   		            name:'投稿数',
                   		         barMaxWidth:40,
                   		            type:'bar',
                   		            data:data.data.manuscript_count
                   		        },
                   		        {
                   		            name:'通过率(%)',
                   		         barMaxWidth:40,
                   		            type:'bar',
                   		            data:data.data.passRate
                   		        },
                   		        {
                   		            name:'暴力',
                   		         barMaxWidth:40,
                   		            type:'bar',
                   		            stack: '退稿原因',
                   		            data:data.data.violence_count
                   		        },
                   		        {
                   		            name:'色情',
                   		         barMaxWidth:40,
                   		            type:'bar',
                   		       	    stack: '退稿原因',
                   		            data:data.data.eroticism_count
                   		        },
                   		        {
                   		            name:'侵权',
                   		         barMaxWidth:40,
                   		            type:'bar',
                   		            stack: '退稿原因',
                   		            data:data.data.tort_count
                   		        },
                   		        {
                   		            name:'政治敏感',
                   		         barMaxWidth:40,
                   		            type:'bar',
                   		            stack: '退稿原因',
                   		            data:data.data.sensitivity_count
                   		        },
                   		        {
                   		            name:'违反平台协议',
                   		         barMaxWidth:40,
                   		            type:'bar',
                   		            stack: '退稿原因',
                   		            data:data.data.violate_count
                   		        },
                   		        {
                   		            name:'其他',
                   		            type:'bar',
                   		            stack: '退稿原因',
                   		         barMaxWidth:40,
                   		            data:data.data.other_count
                   		        }
                   		    ]
                   		};
                		                    
                   	myChart_up.setOption(option_up);
                   
    
                  
                	
                	let option = {
                		    title : {
                		        text: '投稿排行top5'
                		    },
                		    tooltip : {
                		        trigger: 'axis'
                		    },
                		    legend: {
                		        data:['投稿数']
                		    },
                		    calculable : true,
                		    xAxis : [
                		        {
                		            type : 'value',
                		            boundaryGap : [0, 0.01]
                		        }
                		    ],
                		    yAxis : [
                		        {
                		            type : 'category',
                		            data : data.data.topFive_name
                		        }
                		    ],
                		    series : [
                		        {
                		            name:'投稿数',
                		            type:'bar',
                		            barMaxWidth:40,
                		            data:data.data.topFive_count
                		        }
                		    ]
                		};
                		                    
                	myChart.setOption(option);
                	
                
                	$('.loading').hide();
                	
                },
                error :function (XMLHttpRequest, textStatus, errorThrown) {
                }
                
            });

通过ajax获取后台的数据 拼凑到echar 需要的格式option中，然后设置到div中 即可 option的格式可以参见echar的例子以及帮助文档  
参考文档：

http://echarts.baidu.com/echarts2/doc/example.html(示例)

http://echarts.baidu.com/echarts2/doc/doc.html(文档)

效果：

![Center][]

设置窗口自适应页面：

window.onresize = function(){
        		 myChart.resize();
        		 myChart_up.resize();
             }

[Center]: /images/20220602/6a97df276dfe4b599bfe81bc09bf3a72.png

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue----配置echars

1.安装`npm install echarts -S` 2.在组件中定义图表容器并初始化数据 // 假设是 index.vue // 1. 在temp

刺骨的言语ヽ痛彻心扉/ 2023年06月06日 08:30/ 0 赞/ 2 阅读

相关 Vue使用echars echars数据通过springboot提供

vue安装echars命令 npm install echarts --save 在main.js使用echars import as echarts

叁歲伎倆/ 2022年10月05日 05:55/ 0 赞/ 166 阅读

相关 React学习的记录

从假期就开始了react的学习，今天记录一下react学习状况。 react 是什么，react能干什么，react有什么好处，react又有哪些坑呢。 1. reac

妖狐艹你老母/ 2022年06月08日 00:59/ 0 赞/ 175 阅读

相关学习记录

数学之美：平方根倒数速算法中的神奇数字 0x5f3759df 地址：http://blog.jobbole.com/105295/?utm\_sou

绝地灬酷狼/ 2022年06月07日 06:51/ 0 赞/ 249 阅读

相关 Echar的学习记录

Echar通常用作统计图表的制作：可以用很简单的代码对报表的实现。不多说开始实践：首先：html 代码： <div id="showEchartBarC

我就是我/ 2022年06月02日 04:28/ 0 赞/ 155 阅读

相关学习记录

> 1. Windows命令ping、tracert、netstat、arp的作用 > > > `ping` 使用来icmp来检查网络是否连通，并没有记录路径。 >

曾经终败给现在/ 2022年05月25日 08:46/ 0 赞/ 273 阅读

相关【SpringBoot学习】16、SpringBoot使用Echars实现数据可视化

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Fire

蔚落/ 2022年01月16日 11:23/ 0 赞/ 233 阅读

相关 echars 图表根据容器宽度自适应

首先要创一个echars图表实例。我是用vue写的。 <script> export default \{ data() \{ return \{

迈不过友情╰/ 2021年12月23日 22:57/ 0 赞/ 359 阅读

相关 Spring Boot使用EChars进行简单的图标统计

Spring Boot使用EChars进行简单的图标统计简介对应实体domain 对应DAO层处理 sysExContr

小咪咪/ 2021年09月18日 16:28/ 0 赞/ 322 阅读

相关 echars visualMap属性设置

visualMap = [ //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize:

小鱼儿/ 2021年07月26日 22:22/ 0 赞/ 507 阅读