近來由於有幾個小項目要用到echarts里的一些圖，不得不使用，可是要完全按照自己的意願來，要對它有些了解，要翻閱資料，遂有以下小結：
1.最開始第一步是把數據調出來就行，能在圖上顯示就成，以下是最開始的樣子：
老板一看說怎么和內頁的詳情顯示的不一樣，內頁顯示的是上升的，你再好好看看到底怎么回事？
看啊看啊，提示框的數據也對着呢，誰知道是咋回事啊。算了換個圖顯示吧，遂改拆線圖為面積圖：
（列表圖）
然而還是不對吧，這是典型的換湯不換葯啊，老板與客戶都不答應啊。欲哭無淚，為毛內頁好好的，
列表頁是這樣子的，為毛為毛，糾結完還是得繼續啊：
（內頁是這種類似的圖）
上天還是幫助我的，偶然放大來看才發現列表圖之所以隨着數值越來越大而曲線卻向下是因為原點被設置在左上角，怎么調到左下角（原點）呢，百度或者必應后看資料唄：
找到這么個參數：grid（具體詳情點擊：http://echarts.baidu.com/echarts2/doc/doc.html#Grid）
設置為原點的寫法：
grid:{
x:0,
y:0
}
藍后圖就成了這樣：
我去，怎么和我想的不一樣呢，再查再找，原來要這樣啊：
grid:{
x:0,
y:0,
width:'50px',
height:'60px'
}
再一想手機有大有小，怎么能直接定寬高呢，試下百分比：
grid:{
x:0,
y:0,
width:90%,
height:90%
}
一刷新，居然報錯，要不加上引號試試：
grid:{
x:0,
y:0,
width:‘90%’,
height:‘90%’
}
一刷新，好了，歪打正着，算了，還是百分百吧，有空隙不好看：
grid:{
x:0,
y:0,
width:‘100%’,
height:‘100%’
}
給老板客戶一看，客戶說為什么第二張圖的曲線起點那么高，不像第一張圖與第三圖那樣；
哦，好的，我稍后修改：
接着查閱資料，有人說可以設置Y軸的最大值最小值：
資料地址：http://echarts.baidu.com/echarts2/doc/doc.html#Yaxis
yAxis : [
{
name : '',
type : 'value',
show : false,
if(json.y.min){
min:json.y.min,
}
if(json.y.max){
max:json.y.max
}
}
]
對的，你沒猜錯，一刷新又報錯；同事說這是定義好的是吧，怎么能這么寫呢。那具體
怎么寫還是你自己問度娘與必應吧，前翻后翻終於翻出來了：
if(json.data.y.mintotal) { option.yAxis[0].min=json.data.y.mintotal; } if(json.data.y.maxtotal) { option.yAxis[0].max=json.data.y.maxtotal; }
這下終於有點接近原點了，總算過去了，舒口氣放松了下。
你以為可以下班走人了，想得美，內頁問題還多着呢；
你看這個圖的起點最低最小，為什么不是從原點開始：
行，算你狠，我改改改：
這不和上面列表頁的一個道理么，找出Y軸數據的最大值與最小值並設置不就完了么，
這有什么難的，看着啊：
if(data.mintotal) { option.yAxis[0].min=data.mintotal; } if(data.maxtotal) { option.yAxis[0].max=data.maxtotal; }
結果就這么乖乖地顯示了：
這下好了吧，沒什么問題了吧。
客戶：不對，左邊的數字是不是疊在一起了，你看下這個怎么弄？
我：哦，好的，我再找找資料看看。
其實偶已經像個泄了氣的皮球，沒辦法還是得鼓着氣繼續，嗚嗚嗚......
左問右邊，試啊試，看啊看，是的，找到參數了：
如下圖所示：
最終代碼如下所示，這個可以單獨命名為一個JS文件，當然一定要引入echarts.min.js啊。
1 var TLR = { 2 showLineBarChart: function (wrap, title, xaxis, data) { 3 var legend = [], bottom = 50, dataZoomStart = 0, dataZoomShow = false; 4 if (typeof(data) === "object" && data.length > 0) { 5 $.each(data, function (i, n) { 6 legend.push(n.name); 7 }); 8 /*if (legend.length > 0) { 9 bottom = 30; 10 }*/ 11 if (data.length > 100) { 12 dataZoomShow = true; 13 dataZoomStart = (data.length - 100) / data.length * 100; 14 bottom += 30; 15 } 16 } 17 18 var myChart = echarts.init(document.getElementById(wrap)); 19 var option = { 20 title: { 21 show: (title ? true : false), 22 text: title || '', 23 left: 'center', 24 textStyle: { 25 fontSize: 14, 26 fontWeight: 500, 27 color:'#cf2222' 28 } 29 }, 30 tooltip: { 31 trigger: 'axis' 32 }, 33 legend: { 34 data: legend, 35 bottom: 0 36 }, 37 /*toolbox: { 38 feature: { 39 saveAsImage: {} 40 } 41 },*/ 42 grid: { 43 left: '8%', 44 right: '4%', 45 bottom: bottom, 46 containLabel: true, 47 borderColor: 'rgb(128,128,128,0.1)', 48 backgroundColor: 'rgb(128,128,128,0.1)' 49 }, 50 xAxis: [ 51 { 52 type: 'category', 53 boundaryGap: false, 54 splitLine: {lineStyle: {type: 'dashed'}}, 55 data: xaxis, 56 axisLabel:{ 57 textStyle:{ 58 align:'left', 59 fontSize:10 60 } 61 } 62 } 63 ], 64 yAxis: [ 65 { 66 type: 'value', 67 splitLine: {lineStyle: {type: 'dashed'}}, 68 axisLabel:{ 69 textStyle:{ 70 baseline:'middle', 71 fontSize:10 72 } 73 } 74 } 75 ], 76 /*dataZoom: [ 77 { 78 type: 'slider', 79 realtime: true, 80 show: dataZoomShow, 81 start: dataZoomStart, 82 end: 100, 83 bottom: 30, 84 xAxisIndex: [0] 85 } 86 ],*/ 87 series: data 88 }; 89 myChart.setOption(option); 90 if(data.mintotal) { 91 option.yAxis[0].min=data.mintotal; 92 } 93 if(data.maxtotal) { 94 option.yAxis[0].max=data.maxtotal; 95 } 96 myChart.setOption(option); 97 }, 98 otherFunction: function () { 99 } 100 }
調用代碼如下，當然是用JSON格式的數據啦：
TLR.showLineBarChart(wrap || 'EzChartWrap', json.data.title, json.data.x, json.data.y);
哦，對了，右邊的日期還是被截取掉了啊。
喂喂喂，你說什么？聽不清啊，明天再說吧，已經很晚了。我要下班了。拜拜！