echarts数据多项(多维度)数据展示,多个series_echarts series data 多个value-程序员宅基地

技术标签: python  html5  html  javascript  

  1. 要做到多维度第一个满足的条件是数据要灵活,不能将数据放到echarts的options中 。

  2. 要理解options中哪些数据是用于展示的;先看一个echarts官网的例子

  3. 首先附上官网的例子

    1. option = {
          title: {
              text: '折线图堆叠'
          },
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          toolbox: {
              feature: {
                  saveAsImage: {}
              }
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: {
              type: 'value'
          },
          series: [
              {
                  name: '邮件营销',
                  type: 'line',
                  stack: '总量',
                  data: [120, 132, 101, 134, 90, 230, 210]
              },
              {
                  name: '联盟广告',
                  type: 'line',
                  stack: '总量',
                  data: [220, 182, 191, 234, 290, 330, 310]
              },
              {
                  name: '视频广告',
                  type: 'line',
                  stack: '总量',
                  data: [150, 232, 201, 154, 190, 330, 410]
              },
              {
                  name: '直接访问',
                  type: 'line',
                  stack: '总量',
                  data: [320, 332, 301, 334, 390, 330, 320]
              },
              {
                  name: '搜索引擎',
                  type: 'line',
                  stack: '总量',
                  data: [820, 932, 901, 934, 1290, 1330, 1320]
              }
          ]
      };
      

      效果展示

  修改后的代码,有echarts的js可以直接运行

  1. <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>ECharts</title>
    		<!-- 引入 echarts.js -->
    		<script src="js/echarts/echarts.min.js"></script>
    		<style type="text/css">
    			#main {
    				margin: 0 auto;
    			}
    		</style>
    	</head>
    	<body>
    		<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    		<div id="main" style="width: 1600px;height:700px;"></div>
    		<script type="text/javascript">
    			// 基于准备好的dom,初始化echarts实例
    			var myChart = echarts.init(document.getElementById('main'));
    //			var ls = ['温度1', '温度2', '温度3'];		
    			// 指定图表的配置项和数据
    			var option = {
    				// 给echarts图设置背景色
    				backgroundColor: '#999', // -----------> // 给echarts图设置背景色
    				textStyle:{fontWeight:'bold'},
    				title: {
    					text: '18401646121'
    				},
    				tooltip: {
    					trigger: 'axis',
    					axisPointer: {
    						type: 'cross',
    						label: {
    							backgroundColor: '#6a7985'
    						}
    					}
    				},
    				legend: {
    					data:[] ,
    					textStyle:{fontSize:18},
    					position: 'bottom'
    				},
    				calculable: true,
    				toolbox: {
    					feature: {
    						dataZoom: {
    							yAxisIndex: 'none'
    						},
    						dataView: {
    							readOnly: false
    						},
    						magicType: {
    							type: ['line', 'bar']
    						},
    						restore: {},
    						saveAsImage: {}
    					}
    				},
    				grid: {
    					left: '3%',
    					right: '4%',
    					bottom: '3%',
    					containLabel: true
    				},
    				xAxis: [{
    					type: 'category',
    //					boundaryGap: false,
    					data: []
    				}],
    				yAxis: [{
    
    					type: 'value'
    				}],
    				series:[],
    			};			
    			function ta(){
    			var yyy1 = [[120, 132, 101, 134, 90, 280, 210,160],[63, 34, 47, 20, 30, 31, 20, 48],[60, 30, 40, 20, 30, 30, 20, 40]];
    			var xxx1 = [1,2,3,4,5,6,7,8];
    			var ls = ['温度1', '温度2', '温度3'];
    			var series = [];
    			for (i=0;i < ls.length;i++){
    				series.push({
    					name:ls[i],
    					type:'line',
    					data:yyy1[i] ,
    //					stack: '值',
    					areaStyle: {},
    					label: {
    						normal: {
    							show: true,
    							textStyle:{fontSize:14},
    							position: 'bottom'
    						}
    					}
    				})
    				
    			}
    			return {'series':series,'xxx1':xxx1,'ls':ls}
    			}
    			data1 = ta()
    			option.series = data1['series']
    			option.legend.data = data1['ls']
    			option.xAxis[0].data = data1['xxx1']
    			
    			// 使用刚指定的配置项和数据显示图表。
    			myChart.setOption(option);
    			window.onresize = function () {
    			    myChart.resize();}
    						window.onresize = function () {
    			          myChart.resize();      
    			//          根据页面大小重新定义图形大小
    			     };
    		</script>
    	</body>
    
    </html>

     

  2. 效果图展示

有啥不懂的欢迎在下面评论提问

                                   

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43883666/article/details/105234577

智能推荐

实验记录 | scATAC-seq数据的比对(二)_scatac-seq分析流程cellranger-atac比对数据三个r3怎么办-程序员宅基地

文章浏览阅读510次。1。重新核实咱们感兴趣的序列属于哪一个家族?首先需要建库。bowtie2-build humrep.fasta HumRepbowtie2 -f --local --very-sensitive -x HumRep -U aluY.fasta -S aluY.samsamtools view -b aluY.sam >aluY.bam#这次就没有报错了。但是仍然存在一些问题。(base) [xxzhang@mu02 RepeatAnnoation]$ grep "ALU" aluY.sa_scatac-seq分析流程cellranger-atac比对数据三个r3怎么办

springmvc框架知识重点_springmvc框架的重点-程序员宅基地

文章浏览阅读1k次,点赞2次,收藏6次。1. 什么是springmvc?Springmvc是一个基于mvc的web框架,它是spring框架的一个模块,两者无需通过中间整合进行整合。2. Springmvc的优点(1)Spring MVC中提供一个DispatcherServlet, 无需额外开发。(2)springMVC中使用基于xml的配置文件,可以编辑,无需重新编译应用程序。(3)springMVC实例化控制器,并根据用..._springmvc框架的重点

与设备联调Csharp使用SerialPort这个类实现的串口通讯时出现的数据不完整问题解决。_上位机发送的数据接收不完整-程序员宅基地

文章浏览阅读1.7k次。现象:环境:上位机软件,Csharp编写,SerialPort类实现串口异步通讯;下位机,STM32F1系列单片机。串口设置: 波特率9600, 8bit数据位,1bit停止位, 无校验。当上位机与下位机串口通讯时,通过观察收发,发现有时候接收的数据并不是一个完整的数据帧。例如: 发 10 11 12 13 14收到可能为 10 11 12然后再收到 13 14.但是通过串口助手..._上位机发送的数据接收不完整

MySQL的auto_increment使用_auto increment怎么用-程序员宅基地

文章浏览阅读4.1k次,点赞2次,收藏14次。说明总结自《mysql技术内幕(第5版)》创建auto_increment列要遵循如下规则每个表只能有一个列具有auto_increment属性,且必须为整数数据类型(当然,也支持浮点类型,但强烈不建议)该列必须建立索引,最常见的就是使用primary key或unique索引,当然,也支持不唯一索引该列必须是not null的auto_increment列将有如下特性用ins..._auto increment怎么用

String/StringBuilder/StringBuffer_valuestringbuilder-程序员宅基地

文章浏览阅读93次。String 、StringBuilder、StringBuffer1. 可变性String: 字符串常量,字符串是不可变的。源码中:private final char value[];//通过final修饰的字符数组来存储字符//java 9 改用private final byte[] valueStringBuilder: 字符串常量,是可变的,源码中://继承AbstractStringBuilderchar[] value;//AbstractStringBuilder中_valuestringbuilder

Excel转PDF工具类_pdfsaveoptions.setdefaultfont(-程序员宅基地

文章浏览阅读425次。public class ExcelToPDF { /** * 获取license * * @return */ private static boolean getLicense() { boolean result = false; try { InputStream license = ExcelToPDF.class.getClassLoader().getResourceAsStrea_pdfsaveoptions.setdefaultfont(

随便推点

vue数据的双向绑定和组件化开发_vue2 组件开发数据双休绑定-程序员宅基地

文章浏览阅读337次。今日内容表单输入绑定数据双向绑定​ v-model 只能应用在input textare select 表单控件中<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con..._vue2 组件开发数据双休绑定

@JsonProperty 注解的用法_jsonproperty注解参数说明-程序员宅基地

文章浏览阅读2.1k次,点赞2次,收藏4次。做后端的各位对于JSON格式传参肯定不陌生吧?咱先看一组大家常用的入参:【ps:csdn博客的代码块不支持JSON?待改进嗷】{ "loginNo": "admin", "debugEndDate" : "2050-7-20 18:25:22", "debugStartDate" : "2010-7-1 09:25:22", "type" : "1"}那么对于这么一组入参,后端获取的方法特别简单:1、构建对应的实体类,个人这边建议使用IDEA配套_jsonproperty注解参数说明

两个html之间通过url传值_html两个页面之间通过url传值-程序员宅基地

文章浏览阅读2.5k次。第一个html中写跳转htmlwindow.location.href='localhost:8080/xx/xx.html?orgid=1&amp;orglevel=2&amp;orgseq=3' 目标html取值://解析url路径,获取参数 function getURLParameter(name) { return decodeURIComponent((ne..._html两个页面之间通过url传值

实验记录 | 8/5_variant quality-程序员宅基地

文章浏览阅读240次。忙活好现在一堆乱七八糟的事情,到现在已经将近11点了。那么今天就从现在开始。首先回顾前两天做的事情。前两天主要就是:(1)使用CML的其他数据,再次验证在已知标签的情况下,我们能不能将这些样本聚类在一起,也就是说验证sclinager的可行性。==>现在这部分的数据已经在运行,预计8.7结束可以完成这28个样本的运行,并得到阶段性的结果。按照已知类别标签标记的热图,看是否可以聚在一起。(2)另一方面,想要尝试优化这个流程。最重要的是时间方面的,有无必要砍掉预处理的环节,因为时间消耗最大._variant quality

获取IOC容器对象总结_ioc.get-程序员宅基地

文章浏览阅读1.2k次,点赞4次,收藏2次。在项目中如果不能直接autowired依赖注入的时候(例如利用了其他框架的监听器),需要自己注入IOC容器,来获取容器管理的bean对象,以下总结了两个个方法~方法1ContextLoaderListener 监听器在服务器启动的时候会监听ServletContext对象的创建,去创建IOC容器对象,并且将IOC容器对象放在Application域中所以可以通过以下方式获取 Applica..._ioc.get

三种方式打开命令行窗口_打开代码窗口的方法-程序员宅基地

文章浏览阅读1w次,点赞3次,收藏5次。1.按住Shift键右击鼠标打开命令行窗口2.任意文件夹打开拖拽。cd +路径3.当前文件夹输入cmd 进入命令窗口_打开代码窗口的方法