信息生成echarts图标

「爱情、让人受尽委屈。」 2022-02-27 01:35 224阅读 0赞

去https://www.echartsjs.com/index.html官网下载echarts.js  
后台直接返回JSON对象  
根据返回JSON对象进行调用所需的名称和数量

var a=[];
    			//b为所需的纵坐标数组
    			var b=[];
    			for (var i = 0; i < res.length; i++) {
    				a.push(res[i].readrooms.name);
    				b.push(res[i].num);
    			}
    			var myChart = echarts.init(document.getElementById('main'));
    
    			// 指定图表的配置项和数据
    			var option = {
    				title : {
    					text : '人员数据统计'
    				},
    				tooltip : {},
    				legend : {
    					data : [ '销量' ]
    				},
    				toolbox : {
    					show : true,
    					orient : 'vertical',
    					left : 'right',
    					top : 'center',
    					feature : {
    						mark : {
    							show : true
    						},
    						dataView : {
    							show : true,
    							readOnly : false
    						},
    						magicType : {
    							show : true,
    							type : [ 'line', 'bar', 'stack', 'tiled' ]
    						},
    						restore : {
    							show : true
    						},
    						saveAsImage : {
    							show : true
    						}
    					}
    				},
    				xAxis : {
    					data : a
    				},
    				yAxis : {
    					type : 'value',
    					name : '阅读人数(个)',
    					axisLabel : {
    						formatter : function(value) {
    							var texts = [];
    							if (value == 1) {
    								texts.push('1');
    							} else if (value == 5) {
    								texts.push('5');
    							} else if (value == 10) {
    								texts.push('10');
    							} else if (value == 15) {
    								texts.push('15');
    							} else if (value == 20) {
    								texts.push('20');
    							} else if (value == 0) {
    								texts.push('0');
    							}
    							return texts;
    						}
    
    					}
    
    				}
    
    				,
    				series : [ {
    					name : '人数',
    					type : 'bar',
    					data : b
    				} ]
    			};
    			// 使用刚指定的配置项和数据显示图表。
    			myChart.setOption(option);

![在这里插入图片描述][20190326145125845.png]

[20190326145125845.png]: /images/20220227/fd7324ec9e0341bcbde4668eac357550.png

发表评论取消回复

表情：

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

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

相关阅读

相关 echarts 生成河南省地图

*需要引入 jquery 和echarts.js 直接开箱即用** 并附带有全国各省的json 文件下载链接地址，直接替换掉需要的省 json 数据即可百度网盘：[...

àì夳堔傛蜴生んèń/ 2024年04月19日 08:45/ 0 赞/ 59 阅读

相关 echarts使用生成的自定义地图实现信息发送

简介 echarts官方只提供全国地图，但是实际项目过程中，经常只需要某片区域的地图；所以本文通过实例讲解怎么生成自定义的地图，并在地图实现信息发送的效果。自定义地

柔情只为你懂/ 2023年05月28日 11:23/ 0 赞/ 15 阅读

相关 Java生成圆角图标

/ 生成圆角图标 @author Master.Pan @date 2016年5月11日上午9:56:37 @

た入场券/ 2022年08月22日 03:53/ 0 赞/ 203 阅读

相关旺旺图标生成

[http://www.taobao.com/wangwang/2010\_fp/world.php][http_www.taobao.com_wangwang_2010_fp

超、凢脫俗/ 2022年08月07日 02:56/ 0 赞/ 185 阅读

相关向 echarts图标工具栏toolbox中加入自定义图标／图形

原文出处：[https://blog.csdn.net/singsingasong/article/details/77254687][https_blog.csdn.net_

谁践踏了优雅/ 2022年05月19日 01:36/ 0 赞/ 580 阅读

相关 echarts toolbox增加自定义图标

原文出处：[https://blog.csdn.net/zhenyushao/article/details/67636213][https_blog.csdn.net_zhe

淡淡的烟草味﹌/ 2022年05月19日 01:35/ 0 赞/ 423 阅读

相关信息生成echarts图标

去https://www.echartsjs.com/index.html官网下载echarts.js 后台直接返回JSON对象根据返回JSON对象进行调用所需的名称

「爱情、让人受尽委屈。」/ 2022年02月27日 01:35/ 0 赞/ 225 阅读

相关 echart-图标取消点击事件

最近再改公司的后台系统，用到了图标功能 echart默认有点击展示隐藏的功能 ![1074458-20190624154044267-1530792970.png]

港控/mmm°/ 2021年12月21日 09:57/ 0 赞/ 785 阅读

相关 echarts图标使用（一）

var data = []; // Parametric curve // for (var t = 0; t < 25; t += 0.001) {

矫情吗；*/ 2021年11月26日 11:46/ 0 赞/ 386 阅读

相关 echarts tooltip信息添加%

tooltip : { trigger: 'axis', formatter:function(params)

柔光的暖阳◎/ 2021年06月24日 14:00/ 0 赞/ 724 阅读