問題
先看一下正常的情況
再看一下顯示不全的情況
所有的數(shù)據(jù)都是從后臺(tái)取的吵血，也就是說動(dòng)態(tài)變化的，一開始的時(shí)候數(shù)據(jù)量不大不會(huì)出現(xiàn)問題驾中，后面y軸的值越來越大的時(shí)候就出現(xiàn)了這個(gè)顯示不全的情況赵刑。
分析
先貼一下頁面代碼
HTML
<div class="row-wrapper">
<div class="div-flex" style="text-align:center">
<div class="chart-tab selected" id="chart-tab0">最近30天</div>
<div class="chart-tab" id="chart-tab1">最近15周</div>
<div class="chart-tab" id="chart-tab2" style="border-right: 1px #dcdcdc solid;">最近12個(gè)月</div>
</div>
<div id="chart-line"></div>
</div>
CSS
.row-wrapper {
padding: 10px 15px;
border-top: 8px #eee solid;
font-size: 15px;
color: #737373;
}
.chart-tab {
flex: 1;
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（這里只貼跟折線圖有關(guān)的部分）
var lineChart = echarts.init(document.getElementById('chart-line'));
// 折線圖配置
option = {
tooltip: {
trigger: 'axis',
hideDelay: '300'
},
xAxis: {
show: false,
type: 'category',
data: [1, 2, 3, 4, 5, 6, 7],
axisTick: {
inside: true,
alignWithLabel: true
}
},
yAxis: {
type: 'value',
name: '營業(yè)額(元)',
axisTick: {
inside: true
},
scale: true
},
series: [{
name: '營業(yè)額',
type: 'line',
data: [1100000, 2000000, 450000, 1370000, 1200000, 4030000, 2350000], // 因?yàn)槭且治龅氖乔岸藛栴}分衫，這里我就直接寫一組很大的數(shù)據(jù)了，不管跟后臺(tái)交互部分
lineStyle: {
normal: {
color: '#82c26b'
}
},
itemStyle: {
normal: {
color: '#82c26b'
}
}
}]
};
lineChart.setOption(option);
然后頁面運(yùn)行的時(shí)候生成的html是這樣的
可以看到 id=chart-line 的 div 是我定義的般此，而它里面多了兩個(gè)元素蚪战，一個(gè) div 和一個(gè) canvas。這兩個(gè)就是 Echarts 運(yùn)行之后添加上去的铐懊，其中 canvas 就是圖表本身邀桑，外層的 div 是一個(gè)裝它的容器。
于是我嘗試一下修改這幾個(gè)元素的 width科乎、margin壁畸、padding，發(fā)現(xiàn)……沒用茅茂。
看下圖
修改了margin 和 padding 的之后在 chrome的debug模式下看 canvas 是這樣的捏萍，能看到其實(shí)y軸文字部分還是在content（藍(lán)色部分）里面的，所以就能明白為什么修改 canvas 的 margin空闲、padding 不會(huì)起作用了令杈。
于是能得出結(jié)論，這是 canvas 繪圖的時(shí)候就定了的碴倾，所以要通過修改傳給 echarts 的參數(shù)來修改逗噩。
好吧，那咱們就去官網(wǎng)看API咯……
解決辦法
官網(wǎng)在此：http://echarts.baidu.com/
我們要看的是配置項(xiàng)的部分：http://echarts.baidu.com/option.html#title
可以改的地方有下面幾個(gè)：
-
yAxis.axisLabel.margin：刻度標(biāo)簽與軸線之間的距離跌榔。默認(rèn)值是8异雁，可以改小一點(diǎn)。不過本來的值已經(jīng)很小了僧须，這個(gè)沒多大作用纲刀。 -
yAxis.axisLabel.formatter：刻度標(biāo)簽的內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式担平。比如可以設(shè)置太長了換行之類的柑蛇。 -
grid.left：grid 組件離容器左側(cè)的距離。默認(rèn)值是10%驱闷。
最后的代碼如下耻台。這里就只列出修改了的部分了，比原來添加了 grid.left 和 yAxis.axisLabel空另。
option = {
...
yAxis: {
type: 'value',
name: '營業(yè)額(元)',
axisTick: {
inside: true
},
scale: true,
axisLabel: {
margin: 2,
formatter: function (value, index) {
if (value >= 10000 && value < 10000000) {
value = value / 10000 + "萬";
} else if (value >= 10000000) {
value = value / 10000000 + "千萬";
}
return value;
}
},
},
grid: {
left: 35
},
...
};
最終效果還行盆耽。。
PS：最后忍不住要吐槽，這幾個(gè)配置項(xiàng)找了我老半天啊囧
