echart图表如何实现X轴分两类展示

图片说明

2个回答

这个应该用echar无解。
可以试试重写它的方法。

qq_16495151
杨青松 确实无解,我用的是Highcharts
一年多之前 回复

已解决,需要的联系邮箱 1210014671@qq.com
图片说明

案例链接:多个分类柱状图

qq_16495151
杨青松 回复1叶知秋灬: https://download.csdn.net/download/qq_16495151/11898790
9 个月之前 回复
qq_16495151
杨青松 回复1叶知秋灬: 我直接分享地址吧,抱歉抱歉
9 个月之前 回复
qq_38321709
1叶知秋灬 解决了为什么不拿出来分享下呢,还留个邮箱啥意思呢?
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
echarts x轴分两级显示,并且第二级可以设置任意间隔

我在网上只找到x轴可以分两级显示,但是第二级平均分配间隔的方法 https://blog.csdn.net/u013270065/article/details/105073901/ 我想要达到的效果如下图 ![图片说明](https://img-ask.csdn.net/upload/202003/25/1585119798_177210.png) 可以看看这个ECharts实例,实现了分两级显示并且第二级可以自定义间隔https://gallery.echartsjs.com/editor.html?c=xnUHWTiDTY ![图片说明](https://img-ask.csdn.net/upload/202003/25/1585127879_27890.png)

echart图表插件如何同时显示两个label

使用echart插件做柱状图时,我希望在柱状图上同时显示两个label,比如中间显示数据值,顶端显示其他数据

echart图表不显示的问题

<script type="text/javascript"> // 路径配置 require.config({ paths : { echarts : 'http://echarts.baidu.com/build/dist' } }); // 使用 require([ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载 ], drewEcharts ); function drewEcharts(ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var option = { tooltip : { show : true }, legend : { data : [ '人数' ] }, xAxis : [ { type : 'category', data :(function(){ var arr=[]; $.ajax({ type : "post", async : false, //同步执行 url : "bar.do", data : {}, dataType : "json", //返回数据形式为json success : function(result) { if (result) { /* alter("first"); */ for(var i=0;i<result.length;i++){ console.log(result[i].name); arr.push(result[i].name); } } }, error : function(errorMsg) { alert("不好意思,图表请求数据失败啦!"); myChart.hideLoading(); } }) return arr; })() } ], yAxis : [ { type : 'value' } ], series : [ { "name" : "人数", "type" : "bar", "data" : (function(){ var arr=[]; $.ajax({ type : "post", async : false, //同步执行 url : "bar.do", data : {}, dataType : "json", //返回数据形式为json success : function(result) { if (result) { for(var i=0;i<result.length;i++){ console.log(result[i].num); arr.push(result[i].num); } } }, error : function(errorMsg) { alert("不好意思,大爷,图表请求数据失败啦!"); myChart.hideLoading(); } }) return arr; })() } ] }; // 为echarts对象加载数据 myChart.setOption(option); } </script>![图片说明](https://img-ask.csdn.net/upload/201705/24/1495612140_317086.png)

echarts x轴位置固定

![图片说明](https://img-ask.csdn.net/upload/201708/08/1502185242_520073.png) 我想做一个这样坐标轴对称的图,并且x轴的位置是固定的,但是实际上数值一变X轴的位置就变了,看了Echarts官方文档,x轴位置只有两个选项,一个top,一个bottom,不能自己设置位置,请问大神有没有好的方法?

使用echart图表用苹果手机微信扫一扫打开,显示空白,但是直接调用,和在电脑上都正常,求解!

用的echart做图表,不管安卓还是ios微信扫一扫打开,图表都试显示空白,但是拿内置扫描看到的页面显示正常,PC上显示也是正常的。

echart自定义扩展图表类型问题

![图片说明](https://img-ask.csdn.net/upload/201709/22/1506062163_464878.png) 这个自定义地图,我在webstrome里跑的时候,效果如下: ![图片说明](https://img-ask.csdn.net/upload/201709/22/1506062436_198661.png) 我将例子里面的option内容都添加上去了,只是没加它require..json的部分... 是因为没加HK.json还是没加hk.js的原因,所以没有地图绘制呢?

请问flot图表x轴怎么显示时间

请问flot图表x轴怎么显示时间(不显示年月日,只要时分秒)

Pyecharts 共用X轴情况下如何对多图例数据排序展示?

1、问题: 用pandas形成了一个每个企业的平均值、最小值、最大值等数据,将企业名传入X轴,将平均值等数据传入Y轴,现在希望能够在展示各数据时进行排序显示。两种思路:第一是在同一个X轴,在点击不同图例时 pyecharts可以自动排序;第二种思路是在同一图表中用多个X轴。两种思路都没有找到解决方案,求提供思路 2、现在的效果 ![图片说明](https://img-ask.csdn.net/upload/202004/28/1588048079_879596.png) 3、现在的部分代码 ``` user_about.sort_values(by='min',ascending=False) user_list=list(user_about.index) user_min=list(user_about['min']) user_mean=list(user_about['mean']) user_max=list(user_about['max']) user_count=list(user_about['count']) user_sum=list(user_about['sum']) bar=( Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT,width='1600px',height='700px',page_title='数据分析')) .add_xaxis(user_list) .add_yaxis("单笔最小费用", user_min,is_selected=False) .add_yaxis("单笔最大费用", user_max,is_selected=False) .add_yaxis("平均每笔费用", user_mean) .add_yaxis("运单数", user_count,is_selected=False) .add_yaxis("运费总额(万)", user_sum,is_selected=False) .set_series_opts(label_opts=opts.LabelOpts(is_show=False),markline_opts=opts.MarkLineOpts(data=[opts.MarkLineItem(y=25000)])) .set_global_opts(title_opts=opts.TitleOpts(title="运费统计"),datazoom_opts=[opts.DataZoomOpts(),opts.DataZoomOpts(is_show= False,type_= 'inside', is_realtime= True)], xaxis_opts=opts.AxisOpts(name="企业",axislabel_opts=opts.LabelOpts(font_size=9,rotate=-45))) ) ```

echarts如何可以做到x轴为年龄分布,y轴为该年龄的数量?

效果如下: ![图片说明](https://img-ask.csdn.net/upload/201911/14/1573700366_908911.png) 但我自己实际做的效果是: ![图片说明](https://img-ask.csdn.net/upload/201911/14/1573700420_861520.png) x轴和y轴的数值都一样 option如下: ``` option1 = { color: ['#3398DB'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'line' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'value', max:110, axisTick: { alignWithLabel: true } } ], yAxis: [ { type: 'value' } ], series: [ { name: '年龄', type: 'bar', barWidth: '30%', data: {{ age }} } ] }; ```

关于百度Echart动态图表的问题

怎样利用百度Echart实现动态图表,麻烦有做过的大神们指点一二

Echart 可视化图表 可编辑

echart图表中,每一个配置项可以编辑,如(大小,颜色,宽高等),使用angular或者vue,希望大神们给个小demo,谢谢

android中引用LineChart图表x轴文字显示不全

android中引用LineChart图表,x轴最右边的文字显示不全,被遮住了,请问有啥解决方法?![图片说明](https://img-ask.csdn.net/upload/201705/23/1495511944_135884.png)

echarts y 轴单边双刻度分组如何实现

我想使用 echarts 实现这样的图表,请问如何实现,或者有什么好的解决方案 ![图片说明](https://img-ask.csdn.net/upload/201910/15/1571124518_535312.png)

echart图表加载 showloading的背景颜色或者背景透明度修改

如题,因为图表设置了比较深的背景色,showloading会覆盖一层淡白色,怎么设置啊

fastreport图表的问题

fastreport 图表怎么显示标签数值,就是我用柱型图表,然后有一个label就是显示图表标签,但是x轴的值跟着label一起变化,当我的label的值是次数时,无论x轴的值是多少,都跟label一样,请问怎么设置,才能使label的值跟x轴的值不一样![图片说明](https://img-ask.csdn.net/upload/201707/18/1500360930_39558.png)

MPAndroidChart X轴隔行显示

用MPAndroidChart展示一个柱状图 代码都是一样样的 但是X轴为7个的时候显示正常 X轴为9和12的时候 X轴上的文字隔行显示一个 ! 想请问有大神知道或者遇到过这个情况吗[图片说明](https://img-ask.csdn.net/upload/201909/24/1569295722_647118.jpeg)

请问下在vue中使用echarts,echarts中的X轴data为分钟,怎么写?

在vue中使用echarts,echarts中的X轴data为分钟,代码怎么写

求教如何用echart做出如图所示的图表

要求做成这样的![图片说明](https://img-ask.csdn.net/upload/201908/01/1564641540_700607.png)目前已经做到这样了![图片说明](https://img-ask.csdn.net/upload/201908/01/1564641565_272731.png),导入的是json格式的文件![图片说明](https://img-ask.csdn.net/upload/201908/01/1564641618_843065.png) ,json里面那个catego'ries没有用到,但其他的都导入进来了,目前代码如下 ``` echartmix: function(opts){ var option= { title: { text: '最近一年用户新增趋势' }, tooltip: { trigger: 'axis' }, legend: { type: scroll, data:['月环比增长率','用户月新增量'] }, toolbox: { show: false, feature: { magicType: {show: true, type: ['stack', 'tiled']}, saveAsImage: {show: true} } }, xAxis: { type: 'category', splitLine: { show: false }, data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'] }, yAxis: [{ type: 'value', name: '用户量', axisTick: { show: false } }, { type: 'value', name: '月环比增长率', axisLabel: { formatter: '{value} %' }, axisTick: { show: false } } ], series: [{ name: '月环比增长率', type: '', data: [], itemStyle: { normal: { color: '#66b7ef' } } }, { name: '用户月新增量', type: '', data: [], itemStyle: { normal: { lineStyle: { color: '#66b7ef' } } } }] }; $.each(opts.columnSeries, function(index, item){ item.type = 'bar'; option.series.push(item) }); $.each(opts.splineSeries, function(index, item){ item.type = 'line'; item.smooth = true; option.series.push(item) }); return option; } ``` 主要难点一是第二个y轴,刻度要从-100%到200%,关键是高度要和那个柱状的月环比增长率对应,就是json里的columnseries,二是整个图表最外侧的那个边框如何删掉,三是上面那个蓝色和橙色的legend,我点蓝色的有反应,legend变灰后下面的柱状消失,但是红色那个点了只是单纯他自己变灰,图表本身没任何变化,是不是我上面legend写的有问题,我真的是被难住了,跪求大佬帮助

x轴为什么显示undefined??

``` ```<!doctype html> <html> <head> <meta charset="utf-8"> <title>异步加载后台数据</title> <link href="css/index.css" type="text/css" rel="stylesheet" /> <script src="js/jquery.js"></script> <script src="js/echarts.js"></script> </head> <body> <div id="container"> <h3>开始测试</h3> <div id="wrap"></div> <script> // 初始化 图表对象 var mychart = echarts.init(document.getElementById("wrap")); // 初始化两个数组,盛装从数据库中获取到的数据 var teachers_tits = [], respro_num = []; //调用ajax来实现异步的加载数据 function get_resproject() { $.ajax({ type: "post", async: false, url: "config.php", data: {}, dataType: "json", success: function(result){ if(result){ for(var i = 0 ; i < result.length; i++){ teachers_tits.push(result[i].teachers_tits); respro_num.push(result[i].respro_num); } } }, error: function() { alert("Ajax获取服务器数据出错了!"); //return teachers_tits, respro_num; } }); return teachers_tits,respro_num; } // 执行异步请求 get_resproject(); // 进行相关项的设置,也就是所谓的搭搭骨架,方便待会的ajax异步的数据填充 var option = { title : { text : '职称科研项目数量图' }, tooltip : { show : true }, legend : { data : [ '项目数量' ] }, xAxis : [ { data : teachers_tits } ], yAxis : [ { type : 'value' } ], series : [ { "name" : "项目数量", "type" : "bar", "data" : respro_num }] }; // 将配置项赋给chart对象,来显示相关的数据 mychart.setOption(option); </script> </div> </body> </html> ``` ```![图片说明](https://img-ask.csdn.net/upload/201812/05/1544011145_563899.png)

C/C++学习指南全套教程

C/C++学习的全套教程,从基本语法,基本原理,到界面开发、网络开发、Linux开发、安全算法,应用尽用。由毕业于清华大学的业内人士执课,为C/C++编程爱好者的教程。

定量遥感中文版 梁顺林著 范闻捷译

这是梁顺林的定量遥感的中文版,由范闻捷等翻译的,是电子版PDF,解决了大家看英文费时费事的问题,希望大家下载看看,一定会有帮助的

YOLOv3目标检测实战:训练自己的数据集

YOLOv3是一种基于深度学习的端到端实时目标检测方法,以速度快见长。本课程将手把手地教大家使用labelImg标注和使用YOLOv3训练自己的数据集。课程分为三个小项目:足球目标检测(单目标检测)、梅西目标检测(单目标检测)、足球和梅西同时目标检测(两目标检测)。 本课程的YOLOv3使用Darknet,在Ubuntu系统上做项目演示。包括:安装Darknet、给自己的数据集打标签、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计(mAP计算和画出PR曲线)和先验框聚类。 Darknet是使用C语言实现的轻型开源深度学习框架,依赖少,可移植性好,值得深入探究。 除本课程《YOLOv3目标检测实战:训练自己的数据集》外,本人推出了有关YOLOv3目标检测的系列课程,请持续关注该系列的其它课程视频,包括: 《YOLOv3目标检测实战:交通标志识别》 《YOLOv3目标检测:原理与源码解析》 《YOLOv3目标检测:网络模型改进方法》 敬请关注并选择学习!

sql语句 异常 Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your

在我们开发的工程中,有时候会报 [Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ------ 这种异常 不用多想,肯定是我们的sql语句出现问题,下面...

浪潮集团 往年的软件类 笔试题 比较详细的哦

浪潮集团 往年的软件类 笔试题 比较详细的哦

2019 AI开发者大会

2019 AI开发者大会(AI ProCon 2019)是由中国IT社区CSDN主办的AI技术与产业年度盛会。多年经验淬炼,如今蓄势待发:2019年9月6-7日,大会将有近百位中美顶尖AI专家、知名企业代表以及千余名AI开发者齐聚北京,进行技术解读和产业论证。我们不空谈口号,只谈技术,诚挚邀请AI业内人士一起共铸人工智能新篇章!

I2c串口通信实现加速度传感器和FPGA的交流

此代码能实现加速度传感器与FPGA之间的交流,从而测出运动物体的加速度。

Python可以这样学(第一季:Python内功修炼)

董付国系列教材《Python程序设计基础》、《Python程序设计(第2版)》、《Python可以这样学》配套视频,讲解Python 3.5.x和3.6.x语法、内置对象用法、选择与循环以及函数设计与使用、lambda表达式用法、字符串与正则表达式应用、面向对象编程、文本文件与二进制文件操作、目录操作与系统运维、异常处理结构。

微信公众平台开发入门

本套课程的设计完全是为初学者量身打造,课程内容由浅入深,课程讲解通俗易懂,代码实现简洁清晰。通过本课程的学习,学员能够入门微信公众平台开发,能够胜任企业级的订阅号、服务号、企业号的应用开发工作。 通过本课程的学习,学员能够对微信公众平台有一个清晰的、系统性的认识。例如,公众号是什么,它有什么特点,它能做什么,怎么开发公众号。 其次,通过本课程的学习,学员能够掌握微信公众平台开发的方法、技术和应用实现。例如,开发者文档怎么看,开发环境怎么搭建,基本的消息交互如何实现,常用的方法技巧有哪些,真实应用怎么开发。

机器学习初学者必会的案例精讲

通过六个实际的编码项目,带领同学入门人工智能。这些项目涉及机器学习(回归,分类,聚类),深度学习(神经网络),底层数学算法,Weka数据挖掘,利用Git开源项目实战等。

eclipseme 1.7.9

eclipse 出了新的eclipseme插件,官方有下载,但特慢,我都下了大半天(可能自己网速差)。有急需要的朋友可以下哦。。。

Spring Boot -01- 快速入门篇(图文教程)

Spring Boot -01- 快速入门篇 今天开始不断整理 Spring Boot 2.0 版本学习笔记,大家可以在博客看到我的笔记,然后大家想看视频课程也可以到【慕课网】手机 app,去找【Spring Boot 2.0 深度实践】的课程,令人开心的是,课程完全免费! 什么是 Spring Boot? Spring Boot 是由 Pivotal 团队提供的全新框架。Spring Boot...

HoloLens2开发入门教程

本课程为HoloLens2开发入门教程,讲解部署开发环境,安装VS2019,Unity版本,Windows SDK,创建Unity项目,讲解如何使用MRTK,编辑器模拟手势交互,打包VS工程并编译部署应用到HoloLens上等。

最简单的倍频verilog程序(Quartus II)

一个工程文件 几段简单的代码 一个输入一个输出(50Mhz倍频到100Mhz)

计算机组成原理实验教程

西北工业大学计算机组成原理实验课唐都仪器实验帮助,同实验指导书。分为运算器,存储器,控制器,模型计算机,输入输出系统5个章节

4小时玩转微信小程序——基础入门与微信支付实战

这是一个门针对零基础学员学习微信小程序开发的视频教学课程。课程采用腾讯官方文档作为教程的唯一技术资料来源。杜绝网络上质量良莠不齐的资料给学员学习带来的障碍。 视频课程按照开发工具的下载、安装、使用、程序结构、视图层、逻辑层、微信小程序等几个部分组织课程,详细讲解整个小程序的开发过程

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

基于RSA通信密钥分发的加密通信

基于RSA通信密钥分发的加密通信,采用pycrypto中的RSA、AES模块实现

不同变质程度煤尘爆炸残留气体特征研究

为分析不同变质程度煤尘爆炸残留气体成分的特征规律,利用水平管道煤尘爆炸实验装置进行了贫瘦煤、肥煤、气煤、长焰煤4种不同变质程度的煤尘爆炸实验,研究了不同变质程度煤尘爆炸后气体残留物含量的差异,并对气体

设计模式(JAVA语言实现)--20种设计模式附带源码

课程亮点: 课程培训详细的笔记以及实例代码,让学员开始掌握设计模式知识点 课程内容: 工厂模式、桥接模式、组合模式、装饰器模式、外观模式、享元模式、原型模型、代理模式、单例模式、适配器模式 策略模式、模板方法模式、观察者模式、迭代器模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式 课程特色: 笔记设计模式,用笔记串连所有知识点,让学员从一点一滴积累,学习过程无压力 笔记标题采用关键字标识法,帮助学员更加容易记住知识点 笔记以超链接形式让知识点关联起来,形式知识体系 采用先概念后实例再应用方式,知识点深入浅出 提供授课内容笔记作为课后复习以及工作备查工具 部分图表(电脑PC端查看):

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

软件测试2小时入门

本课程内容系统、全面、简洁、通俗易懂,通过2个多小时的介绍,让大家对软件测试有个系统的理解和认识,具备基本的软件测试理论基础。 主要内容分为5个部分: 1 软件测试概述,了解测试是什么、测试的对象、原则、流程、方法、模型;&nbsp; 2.常用的黑盒测试用例设计方法及示例演示;&nbsp; 3 常用白盒测试用例设计方法及示例演示;&nbsp; 4.自动化测试优缺点、使用范围及示例‘;&nbsp; 5.测试经验谈。

几率大的Redis面试题(含答案)

本文的面试题如下: Redis 持久化机制 缓存雪崩、缓存穿透、缓存预热、缓存更新、缓存降级等问题 热点数据和冷数据是什么 Memcache与Redis的区别都有哪些? 单线程的redis为什么这么快 redis的数据类型,以及每种数据类型的使用场景,Redis 内部结构 redis的过期策略以及内存淘汰机制【~】 Redis 为什么是单线程的,优点 如何解决redis的并发竞争key问题 Red...

手把手实现Java图书管理系统(附源码)

【超实用课程内容】 本课程演示的是一套基于Java的SSM框架实现的图书管理系统,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的java人群。详细介绍了图书管理系统的实现,包括:环境搭建、系统业务、技术实现、项目运行、功能演示、系统扩展等,以通俗易懂的方式,手把手的带你从零开始运行本套图书管理系统,该项目附带全部源码可作为毕设使用。 【课程如何观看?】 PC端:https://edu.csdn.net/course/detail/27513 移动端:CSDN 学院APP(注意不是CSDN APP哦) 本课程为录播课,课程2年有效观看时长,大家可以抓紧时间学习后一起讨论哦~ 【学员专享增值服务】 源码开放 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化

jsp+servlet入门项目实例

jsp+servlet实现班级信息管理项目

winfrom中嵌套html,跟html的交互

winfrom中嵌套html,跟html的交互,源码就在里面一看就懂,很简单

Java面试题大全(2020版)

发现网上很多Java面试题都没有答案,所以花了很长时间搜集整理出来了这套Java面试题大全,希望对大家有帮助哈~ 本套Java面试题大全,全的不能再全,哈哈~ 一、Java 基础 1. JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境。 JRE:Java Runtime Environ...

python实现数字水印添加与提取及鲁棒性测试(GUI,基于DCT,含测试图片)

由python写的GUI,可以实现数字水印的添加与提取,提取是根据添加系数的相关性,实现了盲提取。含有两种攻击测试方法(高斯低通滤波、高斯白噪声)。基于python2.7,watermark.py为主

Xshell6完美破解版,亲测可用

Xshell6破解版,亲测可用,分享给大家。直接解压即可使用

你连存活到JDK8中著名的Bug都不知道,我怎么敢给你加薪

CopyOnWriteArrayList.java和ArrayList.java,这2个类的构造函数,注释中有一句话 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 public ArrayList(Collection&lt;? ...

相关热词 c#中如何设置提交按钮 c#帮助怎么用 c# 读取合并单元格的值 c#带阻程序 c# 替换span内容 c# rpc c#控制台点阵字输出 c#do while循环 c#调用dll多线程 c#找出两个集合不同的
立即提问