纯Javascript的图表库，支持各种图表的绘制。
下载ECharts.js
1.标签式单文件引入
<body>
<div id="main" style="height:400px;"></div>
//图表位置
<script src="./js/echarts-all.js"></script>
// 引入js文件
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = { }
myChart.setOption(option);
</script>
</body>
（这是较为简洁的使用方法）
2.模块化引入文件
<body>
<div id="main" style="height:400px;"></div>
...
<script src="./js/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: './js/dist'
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
}
);
</script>
</body>
1.为 ECharts 准备一个具备大小（宽高）的 DOM 。
定义一个待用的div，指定宽度、高度，设置id
<div id="main" style="height:400px;"></div>
2.引入echarts.js并加载
<script src="./js/echarts.js"></script>
3.基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
4.指定图表的配置项和数据
// 定义样式和数据
var option = {
title: { //图表标题，可以通过show:true/false控制显示与否，subtext:'二级标题',
text: ''
},
backgroundColor: '#FFFFFF',
tooltip : {//鼠标浮动时的工具条，显示鼠标所在区域的数据，trigger这个地方每种图有不同的设置
trigger: 'axis'
},
legend: {// 图例，每条折线或者项对应的示例
data:[]
},
calculable : true,
xAxis : [
{
axisLabel:{
rotate: 30,
interval:0
},
axisLine:{
lineStyle :{
color: '#CCCCCC'
}
},
type : 'category',
boundaryGap : false,//从0刻度开始
// data:[] X轴的定义
data : function (){
var list = [];
for (var i = 10; i <= 18; i++) {
if(i<= 12){
list.push('2016-'+i + '-01');
}else{
list.push('2017-'+(i-12) + '-01');
}
}
return list;
}()
}
],
yAxis : [
{
type : 'value',
axisLine:{
lineStyle :{
color: '#CCCCCC'
}
}
}
],
series : [
{
name:'新增用户',
type:'line',
// symbol:'none',//原点
smooth: 0.2,//弧度
color:['#66AEDE'],
// data:Y轴数据
data:[500,100,200,400,600,150,750,800,400,250,650,350]
},
]
};
5.使用刚指定的配置项和数据显示图表
myChart.setOption(option);
使用ajax请求数据接口，获取图表数据，重新加载图表
$.ajax({
url:"user/userIncreaseList",
type:'get',
dataType:'json'
success:function(jsons){
var Item = function(){
return {
name:'',
type:'line',
// itemStyle: {normal: {areaStyle: {type: 'default'}}},这为线条设置
label: {normal: {position: 'top'}},
markLine: {data: [{type: 'average', name: '平均值'}]},
data:[]
}
};// series中的每一项为一个item,所有的属性均可以在此处定义
var legends = [];// 准备存放图例数据
var Series = []; // 准备存放图表数据
var json = jsons.data;// 后台返回的json
for(var i=0;i < json.length;i++){
var it = new Item();
it.name = json[i].name;// 先将每一项填充数据
legends.push(json[i].name);// 将每一项的图例名称也放到图例的数组中
it.data = json[i].data;
Series.push(it);// 将item放在series中
}
// option.series.data=jsons.
option.xAxis[0].data = jsons.xcontent;// 设置X轴数据了
// 折线图可设置上下两个X轴，必须是option.xAxis[0].data = json.xcontent
option.legend.data = legends;// 设置图例
option.series = Series; // 设置图表
myChart.setOption(option);// 重新加载图表
},
error:function(){
alert("数据加载失败！请检查数据链接是否正确");
}
});
<body>
<div id="main" style="height:400px;"></div>
<script src="./js/echarts-all.js"></script>
// 引入js文件
<script>
var myChart = echarts.init(document.getElementById('main'));
//根据需求进行相应的设置
var option = {
title: { //图表标题，可以通过show:true/false控制显示与否，subtext:'二级标题',
text: ''
},
backgroundColor: '#FFFFFF',
tooltip : {//鼠标浮动时的工具条，显示鼠标所在区域的数据，trigger这个地方每种图有不同的设置
trigger: 'axis'
},
legend: {// 图例，每条折线或者项对应的示例
data:[]
},
calculable : true,
xAxis : [ ],
yAxis : [ ],
series : [ ]
};
$.ajax({
url:"user/userIncreaseList",
type:'get',
dataType:'json'
success:function(jsons){
var Item = function(){
return {
name:'',
type:'line',
// itemStyle: {normal: {areaStyle: {type: 'default'}}},这为线条设置
label: {normal: {position: 'top'}},
markLine: {data: [{type: 'average', name: '平均值'}]},
data:[]
}
};// series中的每一项为一个item,所有的属性均可以在此处定义
var legends = [];// 准备存放图例数据
var Series = []; // 准备存放图表数据
var json = jsons.data;// 后台返回的json
for(var i=0;i < json.length;i++){
var it = new Item();
it.name = json[i].name;// 先将每一项填充数据
legends.push(json[i].name);// 将每一项的图例名称也放到图例的数组中
it.data = json[i].data;
Series.push(it);// 将item放在series中
}
// option.series.data=jsons.
option.xAxis[0].data = jsons.xcontent;// 设置X轴数据了
// 折线图可设置上下两个X轴，必须是option.xAxis[0].data = json.xcontent
option.legend.data = legends;// 设置图例
option.series = Series; // 设置图表
myChart.setOption(option);// 重新加载图表
},
error:function(){
alert("数据加载失败！请检查数据链接是否正确");
}
});
// 初次加载图表
myChart.setOption(option);
</script>
</body>
相关图表的属性设置，可以根据需求，查看官网上的相关API，进行设置。
可以将绘制图表的方法单独写做一个方法，通过请求接口，获取数据之后，把数据格式调整为图表所需要的格式，再调用方法。
echart官网
https://echarts.baidu.com/index.html