一、引入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
三、图表展示效果
![](https://i-blog.csdnimg.cn/blog_migrate/c18f18398597d32dcdb94c2f7a4f6469.png)