第一步：首先在body里给一个“容器”，方便在里面绘制图表
<!-- 容器：id:用来绑定option属性 style:设置容器的大小、位置等样式 ->
<div id="main" style="width:1100px;height:500px;margin-left:auto;margin-right: auto;"></div>
<!-- 获取数据的方法按钮 ->
<input type="button" onClick="getDate(‘http://....’)" value="提交" /> 第二步：编写获取数据的方法
//找到“容器”
var myChart = echarts.init(document.getElementById('main'));
//编写获取数据的方法
function getDate(url) {
var vdate = new Array(); //时间：定义变量，接收返回的数据
var intonum = new Array(); //进入：定义变量，接收返回的数据
var sumMonth=0;; //总月数：定义变量，方便赋值
var showPercentage=0;//数据显示的百分比：定义变量，方便赋值
var myzj=”这里是副标题”;
$.getJSON(url, function(json) {
if (json.length > 0) {
/* 数据溢出的时候：数据显示的百分比 */
sumJSON=json.length-2;
sumMonth=sumJSON/20;
showPercentage=Math.round(100/sumMonth);
/*将数据循环赋值给变量*/
for (var i = 0; i < json.length - 2; i++) {
vdate.push(json[i].VDATE); //JS中给数据赋值用的是.push方法
intonum.push(parseInt(json[i].INTO_NUM));
}
}
}
// 给option中的一些属性赋值【方便赋值option中的动态属性】
option.title.x = 'center'; //标题的位置
option.dataZoom[0].end=showPercentage; //外部滚动条显示的数据占比
option.dataZoom[1].end=showPercentage; //内部滑动显示的数据占比
option.title.subtext=myzj; //给副标题赋值
// 把刚指定的配置项和数据赋值给要绘制图表的“容器”
myChart.setOption(option);
});第三步：在javascript中 配置option属性(此处的属性是常用到的)
//定义成变量，方便一会儿赋值使用
var option = {
//工具箱
toolbox : {
show : true,
feature : { //特征
saveAsImage : { //是否保存为图片
show : true,
excludeComponents : [ 'toolbox' ], //排除组件
pixelRatio : 1 //图片的像素比率
}
}
},
//标题
title : {
text:'图表的名字（标题）',
subtextStyle:{ //副标题
fontSize:14,
color:'red',
}
},
//工具提示【一般为空】
tooltip : {
/* trigger: 'axis'-->鼠标浮动上去会显示X和Y的交叉点 */
},
legend : { //图例
left : '80%',
data : ['第一个含义'] //此处的名字要和“series”中的name一样，否则不显示
},
//X轴
xAxis : {
type : 'category',//类别
splitLine : {
show : false
},
//分割线
axisLabel : { //轴标
interval : 0, //间隔
rotate : -30, //旋转
},
data : vdate, //json返回的数据
boundaryGap : true,
},
//Y轴
yAxis : {
type : 'value',
scale:true, //echarts y轴百分比，不写的话系统会自动分配
axisLabel : {
formatter : '{value} '
},
},
//当数据太多时，可以使用滚动条(在此为X轴数据)
dataZoom :
[{ //外部显示
type: 'slider', //组件的类型：滑块；
show: true,
start: 0,
end:20,
handleSize: 8
},
{ //内部也有效果
type: 'inside',
start:0,
end:20,
}],
//图表的一些配置
series : [{
name : '第一个含义',
type : 'line', //折线
data : intonum, //数据【由连接返回的JSON数据】
symbol : 'circle', //符号
symbolSize : 6, //符号大小
color : [ '#0099FF' ],
itemStyle : { normal: {label : {show: true}}} ,
markLine : {
lineStyle : {
normal : {
type : 'solid', //实线
color : '#FF3300'
}
},
data : [ { //自带的平均值属性，不能改变小数点
type : 'average',
name : '平均值'
} ]
},
}]
};第四步：最后把所有的option配置项赋值给“容器”，以便“容器”根据配置项绘制图表
myChart.setOption(option);
最后：看一下效果图
