ECharts圖表json數據格式獲取和座標數據顯示不完整的問題

一、引入ECharts

 <script src="echarts.min.js"></script>

二、自定義構建圖表

1、定義一個div，放置圖表（必須爲div指定高度和寬度，否則表無法顯示）

 <div id="chart" style="width: 600px;height:400px;"></div>

2、在js代碼中設置圖表的樣式，綁定相應的數據，生成圖表

<script type="text/javascript">
//初始化echarts實例
    var lineChart=echarts.init(document.getElementById("chart"));
//echarts接受後臺的數據爲json格式，$.getJSON方法將後臺返回的數據轉換爲json格式
$.getJSON("../lossmonitor/jsonData.json").done(function(data){
		lineChart.setOption({
                      title: {
                            left: 'center',
                            text: '歷史流失客戶月份分佈情況',
                             },
			xAxis: {
				name:"月份",
				type: 'category',
                              //橫軸數據
				data: data.month,
			axisLabel:{
					interval:0,
					rotate:-30
				}
				},
			yAxis: {
				type: 'value'
				},
			series: [{
                             //縱軸數據
                                data: data.lossData,
				type: 'line'
				}]
		});
	});
 </script>

其中，axisLabel標籤能解決座標軸文字過多顯示不完整的問題，其中的interval屬性是座標軸刻度標籤的顯示間隔，設置爲0，強制顯示所有的標籤，設置爲1則隔一個標籤顯示一個標籤。其中rotate屬性爲座標軸刻度標籤的旋轉角度，數值爲-90至90，可以解決文字顯示不下來的情況。

具體還有恨多的配置項可以去ECharts官網查看：http://echarts.baidu.com/option.html

三、圖表展示效果