使用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)

3个回答

图片说明

图片说明

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
echarts自定义X轴,x轴数据转换
echarts x轴自定义,数据转换,比如,x轴的原始数据转换成汉字或者一定格式的显示,如星期转换、24小时转换 以星期转换为例 option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLabel: { show: true, ...
echarts X轴显示不全
项目中有遇到X轴显示不全的问题,如下图: 代码如下: "xAxis": { "axisLine": { "lineStyle": { "color": "#fcead4", "fontSize": 14 } }, "type": "category", "data": [
echarts X轴过长时 滑动显示
主要是对 dataZoom 属性的运用,没什么难点。只需注意一点,如果遇到加了这个属性还是不出现滑动情况的,多半是用的echarts.min.js  不支持此属性,去官网找最新版替换即可 .electricDescribeYear { width:
echarts使用:X轴不从0开始
只需要设置xAxis中的boundaryGap属性,设置为false代表是零刻度开始,设置为true代表离零刻度间隔一段距离 ... xAxis: { type: 'category', boundaryGap: false, data: dateList }, ...  ...
echarts的x轴y轴的颜色改变
在操作echarts时,需求要求echarts的xy轴的颜色要与图形的颜色一致。 图1: 图2: 解决方案: 代码展示: var myChart1; $(function() { document.getElementById("begin1").flatpickr(); document.getElementById("end1").
echarts 隐藏x轴 y轴 网格线
echarts 隐藏x轴 y轴 网格线
echarts x轴文字显示不全
1、xAxis.axisLabel 属性 通过 axisLabel: { interval:0, rotate:40 } 使x轴文字倾斜显示 //控制x轴 xAxis: [ { type: 'category', //字体倾斜 axisLabel: { interval:0, rotat...
Echarts x轴文字显示不全
option = { title:{ text:'城市车商数量的绝对增长和增长率' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: ...
echarts x轴位置固定
![图片说明](https://img-ask.csdn.net/upload/201708/08/1502185242_520073.png)n我想做一个这样坐标轴对称的图,并且x轴的位置是固定的,但是实际上数值一变X轴的位置就变了,看了Echarts官方文档,x轴位置只有两个选项,一个top,一个bottom,不能自己设置位置,请问大神有没有好的方法?
echarts的x轴自动动态刷新
x轴动态刷新且x轴为时间
echarts改变X轴文字颜色
xAxis:  {         type: 'category',         boundaryGap: false,         data: ['周一','周二','周三','周四','周五','周六','周日'],         axisLabel: {             color: function (value) {                 return va...
echarts X轴数据倾斜展示
效果图如下: 废话不多说,解决方法:
ECharts x轴设置成时间间隔
问题: data=[ { value: [ "1997-10-1", 684 ] }, { value: [ "1997-10-2", 200 ] }, { ...
echarts x轴文字高度
-
echarts x轴 增加滚动条
最近blog里面大家都问 x轴类目显示不全问题 如何增加滚动条  下面把我项目中用到的跟大家分享出来  其中红色的代码就是增加滚动条用到的 function (ec) { var myChart = ec.init(document.getElementById('line'));
echarts折线图x轴动态刷新
[code=javascript]var base = +new Date(2014, 9, 3);rnvar oneDay = 24 * 3600 * 1000;rnvar date = [];rnrnvar data = [Math.random() * 150];rnvar now = new Date(base);rnrnfunction addData(shift) rn now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');rn date.push(now);rn data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);rnrn if (shift) rn date.shift();rn data.shift();rn rnrn now = new Date(+new Date(now) + oneDay);rnrnrnfor (var i = 1; i < 6; i++) rn addData();rnrnrnoption = rn xAxis: rn type: 'category',rn boundaryGap: false,rn data: datern ,rn yAxis: rn boundaryGap: [0, '50%'],rn type: 'value'rn ,rn series: [rn rn name:'成交',rn type:'line',rn smooth:true,rn symbol: 'none',rn stack: 'a',rn areaStyle: rn normal: rn ,rn data: datarn rn ]rn;rnrnsetInterval(function () rn addData(true);rn myChart.setOption(rn xAxis: rn data: datern ,rn series: [rn name:'成交',rn data: datarn ]rn );rn, 1000);[/code]rnrn想让x轴单位格式为:rn 年/月/日rn小时:分钟:秒 rnrn但是我写出来小时分钟秒有问题,带秒的问题如下:rn[code=javascript]改分钟刷新rnrnvar base = +new Date(2014, 9, 3, 5, 12,10);rnvar oneMin = 1000;rnvar date = [];rnrnvar data = [Math.random() * 150];rnvar now = new Date(base);rnrnfunction addData(shift) rn now = [now.getFullYear(), now.getMonth() + 1, now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds()].join('/');rn date.push(now);rn data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);rnrn if (shift) rn date.shift();rn data.shift();rn rnrn now = new Date(+new Date(now) + oneMin);rn rnrnrnfor (var i = 1; i < 6; i++) rn addData();rnrnrnoption = rn xAxis: rn type: 'category',rn boundaryGap: false,rn data: datern ,rn yAxis: rn boundaryGap: [0, '50%'],rn type: 'value'rn ,rn series: [rn rn name:'成交',rn type:'line',rn smooth:true,rn symbol: 'none',rn stack: 'a',rn areaStyle: rn normal: rn ,rn data: datarn rn ]rn;rnrnsetInterval(function () rn addData(true);rn myChart.setOption(rn xAxis: rn data: datern ,rn series: [rn name:'成交',rn data: datarn ]rn );rn, 1000);[/code]rnrn谢谢。
echarts x轴显示格式blog
下面的博客,比较详细的介绍了echarts x轴显示格式 http://blog.csdn.net/kebi007/article/details/68488694
ECharts x轴显示正负极
一、问题 要求显示的柱状图有正负值,如图效果: 二、经过 找官网上关于正负极的例子,再通过查找配置选项,美化为客户需要的样式。 三、结果 // FDIOption let FDIOption = { color: ['#004a79', '#007879'], // 设置图表主色调 tooltip: { trigger: 'axis', axisPointer: { ...
echarts x轴文字倾斜
echarts x轴文字倾斜 xAxis : [ { type : 'category', axisLabel: { interval:0, rotate:40 } ,
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轴的值。
因为x轴的数据太多了,大概两百多条,我想先显示的时候只显示12个点,然后鼠标滚轮放大的时候,再把其他小的隐藏的点显示出来。求各位大神指点。
echarts x轴坐标文字显示不全
在echarts中应用柱状图或者折线图时,当数据量过多的时候,X轴的坐标就会显示不全(如下图图一),在ECharts图表组件内部有一个机制,用于统计xAxis坐标刻度的个数和图表宽度,从而会自动调整刻度间隔个数以此达到刻度相互之间不致于很拥挤而影响图表欣赏性。刻度间隔的相关属性就是:interval。还有一个属性:rotate: number 度角是倾斜的控制所在。 图一:显示不全
echarts柱状图x轴字体显示不全问题
this.chart = echarts.init(document.getElementById(id));rn this.chart.showLoading();rn this.chart.setOption(rn title: rn text: '产品线统计',rn textStyle: rn fontSize:18,rn fontWeight:'bold',rn rn ,rn legend:rn textStyle: rn fontSize: 12,rn ,rn data:['容器数', '项目数', '机器数'],rn align: 'right',rn right: 10rn ,rn tooltip:rn show: true,rn trigger: 'axis',rn axisPointer: rn type:'shadow',rn ,rn ,rn grid:rn left:5,rn right:20,rn top:80,rn bottom:50,rn containLabel:true,rn ,rn xAxis: rn show:true,rn axisLabel:rn interval:0,rn rotate:-30,rn margin: 30,rn textStyle:rn align: 'center'rn ,rn ,rn axisTick:rn alignWithLabel:truern ,rn data: this.appNameArr,rn ,rn yAxis: [rn rn type:'value',rn axisTick:rn alignWithLabel:truern ,rn splitLine:rn show:false,rn ,rn rn ],rn series: [rn rn type: 'bar',rn name:'容器数',rn data:this.containerCountArr,rn label: rn normal: rn show:true,rn position: 'insideTop',rn offset:[0,20],rn ,rn ,rn ,rn rn type: 'bar',rn name:'项目数',rn data:this.appCountArr,rn label: rn normal: rn show:true,rn position: 'insideTop',rn offset:[0,20],rn ,rn ,rn ,rn rn type: 'bar',rn name:'机器数',rn data:this.masterCountArr,rn label: rn normal: rn show:true,rn position: 'insideTop',rn offset:[0,20],rn ,rn ,rn rn ]rn );rn this.chart.hideLoading()rn rnrnrnrn[img=https://img-bbs.csdn.net/upload/201707/03/1499047390_720916.png][/img]rn这种要怎么改呢,不知道是什么原因,以前也从来没遇到过,这个是写在vuejs里面的,其它也没什么特别的样式,我把这个option放到官网上面显示也是没问题的
echarts X轴固定在上方
option = {     xAxis: {         position: 'top',         type: 'category',         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],         axisLine: {             onZero: false         }     ...
Echarts x轴文本内容太长的几种解决方案
Echarts 标签中文本内容太长的时候怎么办 ? - 1对文本进行倾斜 在xAxis.axisLabe中修改rotate的值 xAxis: { data: ["衬衫11111","羊毛二二","雪纺衫111","裤子111","高跟鞋11","袜子111"],//x轴中的数据 name:"123",//坐标轴名称。 na
echarts问题之列表横向(x轴)滑动条
首先,老样子解决问题分两种一种是治标,一种是  治本 。 样式: 解决方式: 只需要在option里面添上下面这段啊dataZoom就可以实现了,          dataZoom: [{                               type: 'slider',                               show: true, //flase直接隐...
解决 echarts X轴显示不全 问题
明明选择的2019-02-28 作为结束时间, 但是x轴上展示的却不是结束时间 解决办法 xAxis: { axisLabel:{ showMaxLabel: true } },
echarts x轴类目显示不完
今天做报表遇到个问题   x轴类目显示不完   echarts会给隔一个显示一个 看了下文档 在xaxais 里面添加 axisLabel:{ interval:0 , formatter:function(val){
Echarts 柱状图x轴显示全部类目
xAxis : [ { type : 'category', data : ['类目1','类目2','类目3','类目4','类目5'], axisLabel :{
echarts X轴数据显示不全问题
很奇怪,X轴只显示了部分节点。没有显示全。 在xAxis上加上下面的配置就能解决: axisLabel :{ interval:0 , formatter:function(val){ return val.split("").join("\n"); }, rotate:-30 }
Echarts X轴多项百分比的展示
app.title = '堆叠柱状图'; option = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' ...
ECharts 给X轴文字添加点击事件
给x轴的文字添加点击事件,y轴同理,针对于ECharts 3.x,共两步。 第一步: 将xAxis或者yAxis的属性triggerEvent 置为 true; 第二步: 点击事件,如代码: mybarDoubleChart.setOption(option); mybarDoubleChart.on('click', function (params) {
echarts dataZoom与X轴的标签问题
当X轴的刻度标签设置旋转并且图表拥有dataZoom的时候,dataZoom可能与X轴的刻度标签重叠,这时候可以设置option中的grid项,如下 grid:{      y2:150,//y2表示dataZoom与X轴的距离 }
echarts中自定义X轴显示
axisLabel: { interval: 119, // 自定义显示X轴坐标显示间隔 textStyle: { color: '#626262', fontSize: '10', }, formatter: (val) =&amp;gt; { if (val === '11:30') { // eslint-disable-next-line ...
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轴文字显示不全(倾斜、竖直)
https://blog.csdn.net/kebi007/article/details/68488694
echarts中x轴动态刷新,如何实现?
特别是series与xAxis中的data数据怎么写、如何动态刷新。看了echarts中的例子,但接触不多,这部分实在不太如何动态刷新实在不太会写,十分感谢。
Echarts中的X轴坐标的旋转
echarts的坐标旋转
echarts使x轴标签显示tooltip
在基于Vue和Echarts的项目中需要X轴标签存在长度过长需要部分隐藏的情况,此时就需要当鼠标移到标签上时显示全部标签内容,官方的tooltip不能直接支持该需求。经过查询官方文档和博客echarts让X轴标签和x轴的pointer都显示tooltip,对博客内容适当修改,得到符合本人要求的tooltip。 首先需要开启X轴的触发开关,xAxis.triggerEvent设置为true。 ...
echarts柱状图的x轴文字纵向显示
在xAxisLabel中使用formatter回调函数实现换行,就能实现文字纵向显示。。 具体代码如下所示: axisLabel:{ formatter:function(value){ return value.split(&quot;&quot;).join(&quot;\n); } } 具体实现代码如下: 实现效果如下图: ...
相关热词 c# stream 复制 android c# c#监测窗口句柄 c# md5 引用 c# 判断tabtip 自己写个浏览器程序c# c# 字符串变成整数数组 c#语言编程写出一个方法 c# 转盘抽奖 c#选中treeview