记录下之前的总结吧♪(＾∀＾●)ﾉ
Step:1 为ECharts准备一个具备大小（宽高）的Dom 例如：div标签 <div id="main" style="height:500px;width:500px;"></div> 这里div的高和宽就是报表在页面显示的大小哦~
Step:2 引入echarts的所有 js 文件 附上下载链接~
http://echarts.baidu.com/build/echarts-2.2.7.zip
当然也少不了jQuery的js文件引用，毕竟总是会用到的..
Step:3 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
function refresh(){
if ($("#main5").length > 0){
var cup_arr = eval('<b:write property="cupload" filter="false"/>');
//初始化报表组件
var myChart4 = echarts.init(document.getElementById('main5'),"blue");
var option4 = {
tooltip : {
trigger: 'axis',
axisPointer : {
// 坐标轴指示器，坐标轴触发有效
type :'shadow'
},
position:function(p){
//其中p为当前鼠标的位置
return [250, 10]; }
},
toolbox: {
//报表工具栏
show : true,
feature : {
mark : {show: false},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true} }
},
legend: {
//可控制数据显示、隐藏 date的值需跟 series[数据]的name一样
show:true, //显示控制按钮
data:['cup负载1分钟','cup负载5分钟'] },
calculable : true, //设置控制为可用
xAxis : [ //X轴 数据
{ type : 'category',//X(横)轴默认为 类目型 category
axisLabel:{ //坐标轴文本标签
textStyle:{ //文本样式
fontSize:'8' //字体大小 } },
data : function(){ //date 类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行
var xarr = []; for (var i=0;i<cup_arr.length;i++){
//通过循环拿到数组中的HOSTNAME作为X轴的标题
xarr.push(cup_arr[i].HOSTNAME); }
return xarr;//返回一个数组 }() }
],
yAxis : [
{ type : 'value', //Y(纵)轴默认为 数值型 value
axisLabel: { //坐标轴文本标签，
formatter: '{value}',
//间隔名称格式器 例如：'{value}%' 可在Y轴带数据单位
textStyle:{ fontSize:'10' } } }
],
series : [
{ name:'cup负载1分钟',
//系列名称，如启用legend，该值将被legend的data索引相关 点击可显示/隐藏数据
type:'bar',
//报表类型 bar 柱状图 其他type属性例如：
//'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图） 'pie'（饼图） //'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）| 'radar'（雷达图）
data:function(){
var yarr = []; for (var i=0;i<cup_arr.length;i++){
//通过循环拿到数组中的VALUE作为Y轴上显示的数值
yarr.push(cup_arr[i].VALUE); }
return yarr;
}(),
markLine : { // Y轴上的标线
itemStyle:{ //标线图形样式属性
normal:{ //默认样式
lineStyle:{ //线条样式
type: 'dashed'
//线条样式，可选为：'solid' | 'dotted' | 'dashed'， 树图还可以选：'curve' | 'broken'
} } },
data : [ //标注图形数据
[{type : 'max'}, {type : 'min'}] ] }
}
myChart4.setOption(option4, true);
//为组件加载数据
}
}
baobiao.png
