使用echarts时候x轴数值问题,拷贝过来的代码测试时后面被吃了

![![var resourceAlarmTrendOption;
var resourceAlarmTrendChart;
$(document).ready(function () {
echartsInit();

});
function echartsInit(){

//告警趋势
resourceAlarmTrendChart = echarts.init(document.getElementById('resource_alarm_trend'));
resourceAlarmTrendOption = {
title: {
text: "对数轴示例",
x: "center"
},
tooltip: {
trigger: "item",
formatter: "{a}
{b} : {c}"
},
legend: {
x: 'left',
data: ["2的指数", "3的指数"]
},
xAxis: [
{
type: "category",
name: "x",
splitLine: {show: false},
data: ["一", "二", "三", "四", "五", "六", "七", "八", "九"]
}
],
yAxis: [
{
type: "log",
name: "y"
}
],
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: true
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
series: [
{
name: "3的指数",
type: "line",
data: [1, 3, 9, 27, 81, 247, 741]

   },
   {
       name: "2的指数",
       type: "line",
       data: [1, 2, 4, 8, 16, 32, 64]

   }

]
};

   resourceAlarmTrendChart.setOption(resourceAlarmTrendOption);

}

function isUndefined_Num(reValue) {
if (typeof (reValue) == "undefined" || reValue == "undefined" || reValue == "null" || reValue == null) {
return 0;
} else {
return reValue;
}
}


图片说明](https://img-ask.csdn.net/upload/201702/08/1486521490_886981.png)图片说明](https://img-ask.csdn.net/upload/201702/08/1486521447_79442.png)

0

3个回答

图片说明

0

图片说明

0

同样遇到这样的问题 请问你解决了吗

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
【ECharts】x轴文字显示不完全+滚动显示
一、功能介绍       通过ECharts柱状图展示数据时,由于x轴数据过多,会导致柱状图中的宽度太小,从而导致柱状图中x轴坐标显示不完全。如果x轴左边显示完全,由于柱状图中x轴横坐标过长,会导致文字重叠,从而无法使用户直观的查看x轴上的横坐标数据。    &am
echarts图表y轴数值添加%遮挡问题
echarts图表y轴显示 原来数据显示是80.22%,修改去除掉%才能显示。 需求需要,echarts图表显示y轴的是百分比%,加入属性axisLabel 可以发现显示出%,但是样式发生改变了。 数据遮挡住了,查看api文档仔细搜索,发现有个属性可以解决问题。 在axisLabel属性加入margin:2;添加属性grid,具体值可调试。 下面贴一下显示效果: ...
echartsX轴字体倾斜后部分被叠住
xAxis: [ { type: "category", name: "物品类型", splitLine: {show: false}, data: lxArray, axisLabel :{ interval:0 , ro...
echarts X轴过长时 滑动显示
主要是对 dataZoom 属性的运用,没什么难点。只需注意一点,如果遇到加了这个属性还是不出现滑动情况的,多半是用的echarts.min.js  不支持此属性,去官网找最新版替换即可 .electricDescribeYear { width:
echarts (js插件) 点击柱状图显示x轴y轴数据 加 百分号
  tooltip: {          show: true, // 是否显示提示框组件           trigger: 'axis', //坐标轴触发,用在柱状图,折线图等会使用类目轴的图表中使用           ormatter: function( datas ) {           return datas[0].name + ' : ' + datas[0].data ...
解决echarts柱形图X轴标题显示不全的问题
如果柱形图x轴的信息太长会出现显示不全或者信息重叠在一起通过增加以下代码:grid: {     y2: 150 //增加柱形图纵向的高度 }, xAxis : [ {     type : 'category',     data : label,     axisLabel:{     interval:0,//横轴信息全部显示     rotate:-15,//-15度角倾斜显...
echarts x 轴文字过长,显示省略号,hover上去显示全部的实现方式
echarts中核心配置 xAxis: [{ type: 'category', data: xValues, axisTick: { show: false, }, axisLine: { show: false }, axisLabel: { show: true, interval: 0, ...
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置。(当然yAxis也是一样有这个属性的) axisLabel: { ...
解决ECharts 因X轴类目过多导致重叠显示不全的问题
https://blog.csdn.net/zheng_xiao_xin/article/details/80882113         dataZoom : [//横向滚动条             {                 type: 'slider',                 show: true,                 start: 94,         ...
Echarts学习记录——如何给x轴文字标签添加事件
Echarts学习记录——如何给x轴文字标签添加事件 关键属性axisLabel下属性clickable:true 并给图表添加单击事件 根据返回值判断点击的是哪里 感觉自己的方法有点变扭,有更好办法的同学,请留下方式。示例代码
echarts刷新数据时x轴数据不变的问题
写了一个echarts,再刷新图形的时候,发现x轴不变,经过多方查找发现问题,如下: 开始的时候我的写法如下, var myChart2 = echarts.init(document.getElementById("charts2"), 'shine'); option2 = { tooltip : { trigger: 'axis' }, lege...
echarts问题之列表横向(x轴)滑动条
首先,老样子解决问题分两种一种是治标,一种是  治本 。 样式: 解决方式: 只需要在option里面添上下面这段啊dataZoom就可以实现了,          dataZoom: [{                               type: 'slider',                               show: true, //flase直接隐...
echarts的xAxis的type=’time’时用法实例
https://www.cnblogs.com/vipstone/p/5318615.htmlxAxis内无需像type='category'那样写datavar data = [];var times=[[1522306819000, 2], [1522306919000, 1], [1522307019000, 3], [1522307119000, 1], [1522307120000, 1...
echarts自定义X轴,x轴数据转换
echarts x轴自定义,数据转换,比如,x轴的原始数据转换成汉字或者一定格式的显示,如星期转换、24小时转换 以星期转换为例 option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLabel: { show: true, ...
echarts柱形图X轴标题单双显示不全,字段长度变成省略号方式显示
单双数不显示,不是根本问题,把字段改成足够长后,是显示不出来的, 根本原因确定,是字段标题过长, 解决办法有倾斜和截取字段变省略号的 代码: xAxis : { data : JSON .parse(data.body.s4)["xAxis1"], axisLabel:{ /* interval:0,//横...
echarts两条或两条以上x轴不同的线合并x轴但保持数据连续
问题:这两组数据我想在一个图表上显示出来,他们的x轴都是时间点,但是时间点的数据是不统一的,请问echart能否实现固定一个x轴,数据自动对应到相应的时间轴上的点 解决方法: 整理数据 把时间x轴合并 x轴:['1:00', '1:05', '1:10', ...] data有两种方式: 1 . 空数据用null或者直接空表示 series: [{ data: [25,...
echarts让X轴标签和x轴的pointer都显示tooltip
项目上现在有一个需求是要求鼠标移到X轴标签上显示这个标签的总数,移到pointer上显示各个快的数量, 但是官方的tooltip.trigger只有,item,axis和none。其效果并不能达到我项目的要求。所以我只好查看api文档,首先要打开X轴标签的触发开关,X轴标签的触发开关默认是关闭的。xAxis.triggerEvent boolean [ default: false ] 坐标轴的标
解决 echarts X轴显示不全 问题
明明选择的2019-02-28 作为结束时间, 但是x轴上展示的却不是结束时间 解决办法 xAxis: { axisLabel:{ showMaxLabel: true } },
【echarts】柱状图X轴底部文字显示不全的解决方案
                                       柱状图X轴底部文字显示不全的解决方案   在使用echarts图表框架开发的过程中,遇到这样的一个问题,当柱状图底部X轴文字过多时,将会出现文字显示不全的问题。   解决方案,在添加以下代码    var option = { //.....其他属性 grid: { // 控制图...
ECharts x轴显示正负极
一、问题 要求显示的柱状图有正负值,如图效果: 二、经过 找官网上关于正负极的例子,再通过查找配置选项,美化为客户需要的样式。 三、结果 // FDIOption let FDIOption = { color: ['#004a79', '#007879'], // 设置图表主色调 tooltip: { trigger: 'axis', axisPointer: { ...
Echarts折现柱状图问题。将X轴设置为24小时显示。
由于echartsX轴type设置为time时 是根据传入data数据的时间戳间隔来自动生成的X轴时间范围。 所以只需在X轴上加入一个不显示的24小时时间范围的折线图即可。 代码如下 methods:{ line(){ var myChart = echarts.init(document.getElementById("main")); // 显示标题,图例和空的坐...
Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法
var myChart = echarts.init(document.getElementById('main'));            option = {                    xAxis: {                        triggerEvent: true,                        type: 'category',      ...
echarts dataZoom与X轴的标签问题
当X轴的刻度标签设置旋转并且图表拥有dataZoom的时候,dataZoom可能与X轴的刻度标签重叠,这时候可以设置option中的grid项,如下 grid:{      y2:150,//y2表示dataZoom与X轴的距离 }
echarts x轴标签文字过多导致显示不全
echarts x轴标签文字过多导致显示不全如图:解决办法1:xAxis.axisLabel 属性axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置。(当然yAxis也是一样有这个属性的)[html] view plain copyaxisLabel: {     interval:0,     rotate:40  }  以上就可解决x轴文字显示不全并将文字倾斜。如图...
Echarts折线图绑定动态数据 x轴当前时间 y轴百分比刻度 toolbox使用
项目中难免遇到将数据绑定至图表,这时候就可以使用echarts控件。 博主近期在项目中,需要将服务器CPU和内存使用率做成一张折线图,要用到绑定动态数据,于是在网上查阅后发现echarts官网中的实例都是死数据,问题解决后写了这篇博客分享给大家。内含绑定动态数据,toolbox的使用,x轴绑定当前时间,设置多长时间刷新,y轴刻度百分比,多条折线显示隐藏等,尽可能写全一些。
ECharts为X轴Y轴添加单位
yAxis : [ { type : 'value', max:100, //Y轴最大值 不写的话自动调节 axisLabel:{formatter:'{value} %'} } ],  
echarts X轴内容可滑动Y轴固定的常用配置项(解决echarts数据量太多的显示问题)
在使用echarts插件时,经常遇到X轴数据量过大的问题,这个时候X轴的数据就会层叠到一起.致使页面效果非常难看!之前用来开发的配项目就是如此;所以就将一些常用的配置项放在这里,希望对你们有用! 注:该配置只是折线图的配置,如果是柱状图的配置大同小异,配置项的作用不会又多大变动.我是把这个配置项option做了一个函数的封装 let myChart = echarts.init(docum...
echarts 隐藏x轴 y轴 网格线
echarts 隐藏x轴 y轴 网格线
echarts x轴 增加滚动条
最近blog里面大家都问 x轴类目显示不全问题 如何增加滚动条  下面把我项目中用到的跟大家分享出来  其中红色的代码就是增加滚动条用到的 function (ec) { var myChart = ec.init(document.getElementById('line'));
echarts使x轴标签显示tooltip
在基于Vue和Echarts的项目中需要X轴标签存在长度过长需要部分隐藏的情况,此时就需要当鼠标移到标签上时显示全部标签内容,官方的tooltip不能直接支持该需求。经过查询官方文档和博客echarts让X轴标签和x轴的pointer都显示tooltip,对博客内容适当修改,得到符合本人要求的tooltip。 首先需要开启X轴的触发开关,xAxis.triggerEvent设置为true。 ...
echarts折线图最后一位不显示的问题及重影问题
1、echarts折线图最后一位无法显示数据的问题,将xAxis:  boundaryGap: false,改成true就解决了。2、在某些安卓盒子上使用echarts会有重影的问题,将animation改为false就可以了...
echarts折线图纵横轴采用类似定义{value}KB/s单位过长被遮挡
options.grid.x=”500“  设置纵轴(value+单位)的总宽度,单位px支持百分比,适应所求。 同理: options.grid.y options.grid.x2 options.grid.y2
ECharts3.0柱状图隐藏y轴和x轴
var dataNum = ["100","200","300","400","500","600"];              var myChart = echarts.init(document.getElementById('box-four'));                 option ={    title : {        text: '',      
Echartsjs 柱形图加折线图 启用datazoom,滑动图标之后更新数据,不能覆盖原数据的问题。
1、最近使用echartsjs,有个需求是柱形图和折线图一起绘制,查看当天数据,有个切换的按钮,可以选择按小时查询或者按天查询,按小时查询的数据较多,启动datazoom,鼠标滑动查看。 2、问题复现:初始化按天查看,没有问题,切换之后按小时查看没有问题,滑动查看没有问题,问题出现在,滑动之后,如果要切换回按天查看,按小时查看的折线数据会出现在图标上。 3、解决办法:网上查到的 .setOpt...
echartsY轴数据不置顶
【前言】 最近有个需求是Y轴数据为自适应的,并且不能置顶。 【过程】 这样的话,普通的echarts的max ,min ,interval就不能用了。 var max=Max.max.apply(null,data); -----data为查询到的数据,此行代码是取得查询数据的最大值 if (max %10 ==0) { ...
echarts实现两个y轴
前几天有朋友问我,echarts怎么实现两个y轴,我告诉他了,他说不行,看到他的设计图我也是醉了,后来给解决了,我觉得这个我得和兄弟们分享分享。 上面这个就是他要实现的,但是如果他把柱状图改成横向的,两个y轴就会重合在一起如下 大家看到了吧,正常我们的图表都是竖直的,如下 <div id="main" style="width: 600px;height:400px;"></div>var m
关于Echarts的x轴(xAxis)的数据不显示问题
今天做公司的项目使用了Echarts制作表格,前端使用了vue框架来写,在使用其中一个表格的时候将xAxis设置为动态获取的,但是在网页上一直不显示,而将数据写死的话则可以,对比过动态数据和写死的数据,两个格式是一样的。故而推测不显示的原因是因为动态的数据是dom加载后传入的,故而dom加载的时候没有数据显示。故而将动态获取数据的代码放在created中(vue框架的生命周期,里面的代码会在dom...
echarts中x轴与x轴网格线不对应问题
安装导入echarts npm install echarts --save 引入并设置echarts容器 &amp;lt;template&amp;gt; &amp;lt;!--图表内容区域,必须给 ECharts 容器本身指定高度。不然它会使用默认高度--&amp;gt; &amp;lt;div class = &quot;chart&quot;&amp;gt; &amp;lt;div id = &quot;echarts&quot; style =...
Echarts x轴文字显示不全
option = { title:{ text:'城市车商数量的绝对增长和增长率' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: ...
echarts-2.2.7柱状图隐藏y轴和x轴
var dataNum = ["100","200","300","400","500","600"];      var myChartfour = ec.init(document.getElementById('box-four'));                  myChartfour.setOption({    title : {        text: '',
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 echarts教程python java 对象拷贝学习