echarts实现如下图形,主要是x轴标签的设置 20C

目标图
此图形中X轴标签是以年份来划分的,同时也将一年内的曲线区分开来。

我现在所提的问题,是如何在echarts中实现这种x轴标签。

如上图形,目前大部分功能都能实现(如下图),就是x时间轴的标签显示问题。求大神指教。
图片说明

0

2个回答

所以你的问题是什么?x轴的标签太长显示不全的问题?还是什么?如果是显示不全可以试试
axisLabel: {

interval:0,

rotate:40

} 让他倾斜显示。
或者调用 formatter
axisLabel: {

interval: 0,

formatter:function(value)

{

return value.split("").join("\n");

}

}
让他垂直显示。更多的可以百度一下关键字‘echarts x轴文字倾斜’
如果不是这个问题建议下次提问描述清楚点!!!

0
YYF_CS
yfyu 回复nfsnyy007: 可能是我没描述清楚,正常的x轴标签这个是没有问题的,我现在的主要问题是需要将echarts的X轴标签做成第一张图中的样式,以便于区分每年的曲线。
一年多之前 回复
nfsnyy007
nfsnyy007 因为想帮助你的可能看一下没明白你问的什么就过去了
一年多之前 回复

一个取巧的办法,横坐标数组补'空字符串',例子如下

option = {
xAxis: {
type: 'category',
data: ['', '', '', '', '', '2003', '', '', '', '', '','']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330],
type: 'line'
}]
};

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
echarts dataZoom与X轴的标签问题
当X轴的刻度标签设置旋转并且图表拥有dataZoom的时候,dataZoom可能与X轴的刻度标签重叠,这时候可以设置option中的grid项,如下 grid:{      y2:150,//y2表示dataZoom与X轴的距离 }
echarts直角图形的x轴坐标的标签添加click事件
ECharts // 路径配置 require.config({ paths: { echarts: './comechart/src' } }); // 使用 req
echarts折线图横轴标签间隔
Echarts折线图展示时,如果横轴是按分钟展示数据,并且要一次展示一小时数据,那么横轴上会有60个标签,这样会导致数据会重叠在一起,展示效果不理想,此时可以横轴标签的间隔,比如每5分钟展示一个横轴标签,设置方式: 在echarts的脚本中,找到横轴标签处: xAxis : [                            {                           
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置。(当然yAxis也是一样有这个属性的) [html] view plain copy  print? axisLabel: {      
ECharts 坐标轴标签、tooltip文本格式化
在ECharts折线图中(其他系列图标同理),我们需要对x轴坐标标签、坐图形上的文本标签、提示框组件文本等进行格式化,选项参数设置如下:x轴坐标标签格式化: xAxis: { axisLabel: { show: true, // 默认为true interval: 0, // 设置x轴文本标签全部显示 rotate: 4
echarts使x轴标签显示tooltip
在基于Vue和Echarts的项目中需要X轴标签存在长度过长需要部分隐藏的情况,此时就需要当鼠标移到标签上时显示全部标签内容,官方的tooltip不能直接支持该需求。经过查询官方文档和博客echarts让X轴标签和x轴的pointer都显示tooltip,对博客内容适当修改,得到符合本人要求的tooltip。 首先需要开启X轴的触发开关,xAxis.triggerEvent设置为true。 ...
Echarts中线状图的X轴坐标标签倾斜样式
在echarts中应用线状图时可以展现很多的数据,而当数据量过多的时候,X轴的坐标就会显示不全,因为整个图形的宽度是一定的,X轴的全长是一定的 http://www.cnblogs.com/phpgcs 比如下面的例子中 X轴是常用的日期格式 20140508 这样子 而经过简单的配置,可以达到一个理想的效果,如下 其中相关的需要配置的option参数为:
Echarts学习记录——如何给x轴文字标签添加事件
Echarts学习记录——如何给x轴文字标签添加事件 关键属性axisLabel下属性clickable:true 并给图表添加单击事件 根据返回值判断点击的是哪里 感觉自己的方法有点变扭,有更好办法的同学,请留下方式。示例代码
ECharts 给X轴文字添加点击事件
给x轴的文字添加点击事件,y轴同理,针对于ECharts 3.x,共两步。 第一步: 将xAxis或者yAxis的属性triggerEvent 置为 true; 第二步: 点击事件,如代码: mybarDoubleChart.setOption(option); mybarDoubleChart.on('click', function (params) {
echarts让X轴标签和x轴的pointer都显示tooltip
项目上现在有一个需求是要求鼠标移到X轴标签上显示这个标签的总数,移到pointer上显示各个快的数量, 但是官方的tooltip.trigger只有,item,axis和none。其效果并不能达到我项目的要求。所以我只好查看api文档,首先要打开X轴标签的触发开关,X轴标签的触发开关默认是关闭的。xAxis.triggerEvent boolean [ default: false ] 坐标轴的标
Echarts 标签过长如何让axisLabel换行
Echarts.option.xAxis.data文本内容过长怎么办?官方给出的解决方案是:对文本进行倾斜,或者隐藏过长的文本,但是并没有给出换行的预期效果。本文档针对axisLabel的formatter属性,为其设置一个回调函数来达到换行的处理。 作者:Reese 时间:2015-08-21 备注:希望这个文档能对大家有帮助 (≧▽≦)/目录目录 Part 1 效果图展示 Part 2
图表部件设置X轴节点的错位显示
在实际的项目开发中,也许会遇到图表部件X轴节点值过长,导致图表节点值显示重叠,分不清节点值。如图因此度量快速开发平台封装了下列方法:图表X轴值错位显示方法:XLableStaggered作用设置X轴的标签位置是否错位(一上一下的方式显示)显示,【饼图和漏斗图除外】。设置值bool类型,True表示错位显示,False表示不错位显示。示例图表部件.XLableStagge...
Echarts 标签过长如何让axisLabel换行、省略显示、X轴字体大小颜色设置
js代码:option = {    xAxis: {        type: 'category',        data: ['Mon-542-安徽合肥市蜀山区五里墩街道', 'Tue', 'Wed', 'Thu','fri','sat','sun'],        axisLabel : {            interval : 0,            formatter :...
42Echarts - 柱状图(坐标轴刻度与标签对齐)
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
echarts X轴固定在上方
option = {     xAxis: {         position: 'top',         type: 'category',         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],         axisLine: {             onZero: false         }     ...
echarts坐标轴添加图片
“水精帘动微风起,满架蔷薇一院香” 先上图,看结果: 如上图,4月和7月下有个红色图片,那是预警的。 需求是这样的:如果这个月的办理量比上个月降了50%就需要预警,也就是环比预警。 所以,那该如何在横轴下面加个图片呢? 先参考官方案例: 富文本标签 我这里是这样的处理的,现在后台java中处理好,哪个月需要预警,就给这个月名字中加上“warn”,然后在js里面判断,哪些月份是要预警的: 这是j...
echartsX轴字体倾斜后部分被叠住
xAxis: [ { type: "category", name: "物品类型", splitLine: {show: false}, data: lxArray, axisLabel :{ interval:0 , ro...
Echarts X轴多项百分比的展示
app.title = '堆叠柱状图'; option = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' ...
ECharts坐标轴文本标签全部显示
1、当坐标轴文本标签较长时,ECharts默认会隐藏显示不下的内容,如何让全部文本标签显示(比如日期:2017-05-01,…,2017-05-31共31个文本标签全部显示)? 解决:代码如下: xAxis: { axisLabel: { //xAxis,yAxis,axis都有axisLabel属性对象 show: true, //默认为true,设
ECharts坐标轴标签长度问题
ECharts坐标轴标签长度问题 xAxis: { type: 'category', boundaryGap: false, offset: 0, data: [], axisLabel: { //坐标轴刻度标签的相关设置 interval: 1, //横轴...
echarts 修改legend字体颜色、x轴或y轴文本字体颜色改变
修改legend字体颜色: legend: { y:'55%', textStyle:{ fontSize: 18,//字体大小 color: '#ffffff'//字体颜色 ...
解决echarts柱形图X轴标题显示不全的问题
如果柱形图x轴的信息太长会出现显示不全或者信息重叠在一起通过增加以下代码:grid: {     y2: 150 //增加柱形图纵向的高度 }, xAxis : [ {     type : 'category',     data : label,     axisLabel:{     interval:0,//横轴信息全部显示     rotate:-15,//-15度角倾斜显...
echarts柱状图x轴label简写显示全
具体要解决的问题见上图。 本文只讲述要用的的配置项和思路。具体细节不多描述 注:。。。代表和本文无关 app.title = '坐标轴刻度与标签对齐'; option = { color: ['#3398DB'], tooltip : {。。。 }, grid: {。。。 }, xAxis : [ { type :...
echarts x轴文字高度
-
echarts柱形图X轴标题单双显示不全,字段长度变成省略号方式显示
单双数不显示,不是根本问题,把字段改成足够长后,是显示不出来的, 根本原因确定,是字段标题过长, 解决办法有倾斜和截取字段变省略号的 代码: xAxis : { data : JSON .parse(data.body.s4)["xAxis1"], axisLabel:{ /* interval:0,//横...
echarts 中类目名称转为竖着显示 显示不全的处理
今天把手机号竖着显示 发现手机号过长显示只能显示前边几位 查了下官方文档发现         发现y2 即控制x轴类目的高度的参数  遂将grid加入option                                    grid:{           x2:140,              y2:150            }, 能显示完全了
echarts踩坑,dataZoom和X坐标系文字重叠解决方法
找到echarts中的grid配置 : 代码写入bottom属性: grid:{ bottom: "70px" } 完成效果:
echarts中自定义X轴显示
axisLabel: { interval: 119, // 自定义显示X轴坐标显示间隔 textStyle: { color: '#626262', fontSize: '10', }, formatter: (val) => { if (val === '11:30') { // eslint-disable-next-line ...
【前端图表】echarts实现散点图x轴时间轴
话不多说,老规矩,先上图,实现echarts实现散点图,x轴数据为时间年月日。 图片.png 实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>五分钟上手...
echarts - 图标距离容器边界
有时候我们不容易控制echarts图表的大小,其实我们只需要让图表距离容器有一点边距,防止图表内容超出边界,或与标题、图例等重叠情况。最好的解决办法就是通过grid属性设置图表距离容器的边界。//echats options options : { //... grid : { top : 40, //距离容器上边界40像素 bottom: 30
echarts-设置折线图中折线线条颜色和折线点颜色
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!                1、问题背景&
Echarts中的X轴坐标的旋转
echarts的坐标旋转
ECharts x轴设置成时间间隔
问题: data=[ { value: [ "1997-10-1", 684 ] }, { value: [ "1997-10-2", 200 ] }, { ...
百度ECharts 3.0 多坐标轴统计图一般配置详解(实例)
ECharts 是百度出品的jquery图表插件。相对于Chartist,拥有更加强大的功能,以及更加详细的文档(ECharts的文档形式非常优秀,简明易懂)。ECharts支持的图表种类非常多,同时兼容性也十分优良,故而在网站建设动态统计图表时,是一个非常优秀的选择。配置首先,配置echart首先需要在前台模板建立一个div容器,同时必须给容器指定一个宽度或高度,因而在响应式页面中发挥并不出色。<
echarts折线图多条折线x轴不同,以及vue中引用
需求:echarts绘制多条折线,x轴间隔不同。效果图:   数据格式分析:因为每条线的x轴不同,所以普通的渲染方式无法实现。解决办法是series的数据格式 -- [ [x,y],[x,y] ].核心代码:1)小技巧--js时间格式化封装    如果没有引es6,可以直接做封装 function(time){}//时间格式化 export const dateconvert = (time) =...
echarts x轴显示全部文字,强制显示
echarts x轴全部显示文字 axisLabel: {     interval:0, //强制显示文字     show: true,     textStyle: {         color: '#fff',         fontSize:10,     } },
echarts,x轴第一个刻度问题
  如图 显示少了y轴的刻度,以下是x轴上数据     var rq = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28'...
echarts问题之列表横向(x轴)滑动条
首先,老样子解决问题分两种一种是治标,一种是  治本 。 样式: 解决方式: 只需要在option里面添上下面这段啊dataZoom就可以实现了,          dataZoom: [{                               type: 'slider',                               show: true, //flase直接隐...
Echarts X轴文字类目斜体或垂直显示方法
一、使用Echart的配置项axisLabel: option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: [&quot;衬衫&quot;,&quot;羊毛衫&quot;,&quot;雪纺衫&quot;,&quot;裤子&quot;,&quot;高跟鞋&quot;...
echarts 修改坐标轴某一(多)项的样式
echarts 修改坐标轴某一(多)项的样式: 把得到的X周数据进行加工再赋给X(Y)的data; js: // transformData为改变样式后的X轴数据,然后赋给xAxis中的data var transformData = []; var textStyle = {}; // e为X轴的原始数据 ...