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

三、图表展示效果