echarts想让每条折线对应不同Y轴，如何处理
[问题点数：40分，结帖人ericlee1994]
本版专家分：194
结帖率 94.12%
CSDN今日推荐
本版专家分：19091
2016年12月 Web 开发大版内专家分月排行榜第二2016年10月 Web 开发大版内专家分月排行榜第二
2017年11月 Web 开发大版内专家分月排行榜第三2017年6月 Web 开发大版内专家分月排行榜第三2017年3月 Web 开发大版内专家分月排行榜第三2017年2月 Web 开发大版内专家分月排行榜第三2017年1月 Web 开发大版内专家分月排行榜第三2016年11月 Web 开发大版内专家分月排行榜第三
本版专家分：194
本版专家分：19091
2016年12月 Web 开发大版内专家分月排行榜第二2016年10月 Web 开发大版内专家分月排行榜第二
2017年11月 Web 开发大版内专家分月排行榜第三2017年6月 Web 开发大版内专家分月排行榜第三2017年3月 Web 开发大版内专家分月排行榜第三2017年2月 Web 开发大版内专家分月排行榜第三2017年1月 Web 开发大版内专家分月排行榜第三2016年11月 Web 开发大版内专家分月排行榜第三
本版专家分：194
本版专家分：194
本版专家分：19091
2016年12月 Web 开发大版内专家分月排行榜第二2016年10月 Web 开发大版内专家分月排行榜第二
2017年11月 Web 开发大版内专家分月排行榜第三2017年6月 Web 开发大版内专家分月排行榜第三2017年3月 Web 开发大版内专家分月排行榜第三2017年2月 Web 开发大版内专家分月排行榜第三2017年1月 Web 开发大版内专家分月排行榜第三2016年11月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！
其他相关推荐先看一下正常的情况
再看一下显示不全的情况
所有的数据都是从后台取的，也就是说动态变化的，一开始的时候数据量不大不会出现问题，后面y轴的值越来越大的时候就出现了这个显示不全的情况。
先贴一下页面代码
class="row-wrapper"&
class="div-flex" style="text-align:center"&
class="chart-tab selected" id="chart-tab0"&最近30天&
class="chart-tab" id="chart-tab1"&最近15周&
class="chart-tab" id="chart-tab2" style="border-right: 1px #"&最近12个月&
id="chart-line"&&
.row-wrapper {
padding: 10px 15px;
border-top: 8px #eee solid;
font-size: 15px;
color: #737373;
.chart-tab {
border-top: 1px #dcdcdc solid;
border-left: 1px #dcdcdc solid;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
.div-flex {
display: -webkit-box;
display: -webkit-flex;
display: flex;
#chart-line {
height: 26rem;
padding-left: 14px;
padding-top: 10px;
border: 1px #dcdcdc solid;
.selected {
background-color: #EAEAEA;
JS（这里只贴跟折线图有关的部分）
var lineChart = echarts.init(document.getElementById('chart-line'));
option = {
tooltip: {
trigger: 'axis',
hideDelay: '300'
show: false,
type: 'category',
data: [1, 2, 3, 4, 5, 6, 7],
axisTick: {
inside: true,
alignWithLabel: true
type: 'value',
name: '营业额(元)',
axisTick: {
inside: true
scale: true
series: [{
name: '营业额',
type: 'line',
data: [1100000, 2000000, 450000, 1370000, 1200000, 4030000, 2350000],
lineStyle: {
color: '#82c26b'
itemStyle: {
color: '#82c26b'
lineChart.setOption(option);
然后页面运行的时候生成的html是这样的
可以看到 id=chart-line 的 div 是我定义的，而它里面多了两个元素，一个 div 和一个 canvas。这两个就是 Echarts 运行之后添加上去的，其中 canvas 就是图表本身，外层的 div 是一个装它的容器。
于是我尝试一下修改这几个元素的 width、margin、padding，发现……没用。
修改了margin 和 padding 的之后在 chrome的debug模式下看 canvas 是这样的，能看到其实y轴文字部分还是在content（蓝色部分）里面的，所以就能明白为什么修改 canvas 的 margin、padding 不会起作用了。
于是能得出结论，这是 canvas 绘图的时候就定了的，所以要通过修改传给 echarts 的参数来修改。
好吧，那咱们就去官网看API咯……
官网在此：
我们要看的是配置项的部分：
可以改的地方有下面几个：
yAxis.axisLabel.margin：刻度标签与轴线之间的距离。默认值是8，可以改小一点。不过本来的值已经很小了，这个没多大作用。
yAxis.axisLabel.formatter：刻度标签的内容格式器，支持字符串模板和回调函数两种形式。比如可以设置太长了换行之类的。
grid.left：grid 组件离容器左侧的距离。默认值是10%。
最后的代码如下。这里就只列出修改了的部分了，比原来添加了 grid.left 和 yAxis.axisLabel。
option = {
type: 'value',
name: '营业额(元)',
axisTick: {
inside: true
scale: true,
axisLabel: {
margin: 2,
formatter: function (value, index) {
if (value &= 10000 && value & ) {
value = value / 10000 + "万";
} else if (value &= ) {
value = value /
最终效果还行。。
PS：最后忍不住要吐槽，这几个配置项找了我老半天啊囧
echart X,Y轴内容显示不全问题(echart修改图表其大小及位置)
echart可以通过设置grid修改其x,y轴的位置及大小.如上图所示,y轴的内容没有完全显示出来.grid: {
}效果如...
echarts x轴坐标文字显示不全
在echarts中应用柱状图或者折线图时，当数据量过多的时候，X轴的坐标就会显示不全（如下图图一），在ECharts图表组件内部有一个机制，用于统计xAxis坐标刻度的个数和图表宽度，从而会自动调整刻...
echarts y轴数据如果太大就会造成坐标轴显示不完全的问题
描述：如果数据为400，可能数据太大造成222不显示，就显示500,400，怎样解决呢？如下图所示解决方法：
echarts中横坐标值显示不全(自动隐藏)解决方案
echarts中，横轴数据如果非常多，会自动隐藏一部分数据，我们可以通过属性interval来进行调整。
如下图，当横轴时间为13天时，echarts会自动隔天显示
如果我们想显示...
echarts图Y周坐标轴文字过长的解决方案
今天做项目的时候需要展示一个x轴为数据轴，y轴为类型轴的柱状图，而且带有分页效果。当完成时我发现有些页面y轴文字特别长，并且由于我设置了containLabel: true，所以图的范围忽大忽...
echarts中应用柱状图或者折线图时，当数据量过多的时候，X轴的坐标就会显示不全，所以这就需要我们进行相应调整，interval:0为x轴全部显示、rotate:-30角度倾斜显示。...
echarts x轴标签文字过多导致显示不全如图：解决办法1：xAxis.axisLabel 属性axisLabel的类型是object ,主要作用是：坐标轴刻度标签的相关设置。（当然yAxis也是一...
项目中有遇到X轴显示不全的问题，如下图：
代码如下：
&xAxis&: {
&axisLine&: {
&lineStyle&: {
1、xAxis.axisLabel 属性
axisLabel: {
interval:0,
使x轴文字倾斜显示
echarts X轴数据显示不全问题
很奇怪，X轴只显示了部分节点。没有显示全。
在xAxis上加上下面的配置就能解决：
axisLabel :{
interval:0 ,
formatter:function(val){...
没有更多推荐了，&分为2.0和3.0
　　修改的代码：
　　　　x轴：
　　　　　　
type : 'category',
data : ['&30','30-','40-','50-','60-','&=70'],
axisLabel: {
show: true,
textStyle: {
color: '#fff'
　　　　　　y轴：
　　　　　　　　
type : 'value',
name : '%',
axisLabel : {
formatter: '{value}',
textStyle: {
color: '#fff'
& & & 实例地址：http://echarts.baidu.com/echarts2/doc/example/bar5.html　　
　　修改的代码：
axisLabel : { // 坐标轴小标记
textStyle : { // 属性lineStyle控制线条样式
fontWeight : 'bolder',
color: '#f00',
shadowColor : '#f00', // 默认透明
shadowBlur : 10,
fontSize : 10
& & &实例地址：　http://echarts.baidu.com/demo.html#bar-negative
阅读(...) 评论()echarts折线图可以做到y轴不等距吗？_echarts吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0可签7级以上的吧50个
本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：1,338贴子：
echarts折线图可以做到y轴不等距吗？
如题，求助高手，多谢啦~~~
补充一下，不等距是指Y轴的间距不一样，比如说5、10、15.....然后突然变到100这样
您好，请问您这个问题解决了吗？可否告知一下？我目前也碰到了类似问题。
同求啊。。。。。。。。。。。。。
挖坟了，我也碰到了
echarts折线图可以做到y轴不等距吗
这个解决了吗
好吧 我也遇到了
echarts折线图可以做到X轴不等距吗 …………**好烦的
贴吧热议榜
使用签名档&&
保存至快速回贴echarts柱状图x轴字体显示不全问题
[问题点数：20分]
本版专家分：0
结帖率 66.67%
CSDN今日推荐
本版专家分：3774
本版专家分：194
匿名用户不能发表回复！
其他相关推荐