echart折线图删除_echarts之折线图介绍及使用

line

// 图表实例化

// step 3:初始化Echarts图表

var mychart = echarts.init(document.getElementById("main"));

// 图表使用

// step 4:指定图表的配置项和数据

var option = {

title : {

text: '未来一周气温变化',

subtext: '纯属虚构',

},

tooltip : {

show: true,

trigger: 'axis'

},

legend: {

data:['蒸发量','降水量'],

left: "left"

},

toolbox: {

show : true,

orient: 'horizontal',

left: 'right',

top: 'top',

color: ['#1e90ff','#22bb22','#4b0082','#d2691e'],

backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色

borderColor: '#ccc', // 工具箱边框颜色

borderWidth: 0, // 工具箱边框线宽

padding: 5, // 工具箱内边距

showTitle: true,

feature : {

mark: {show: true,title: {mark:'辅助线-开关',markUndo:'辅助线-删除',markClear:'辅助线-清空'},lineStyle:{width:1,color:'#1e90ff',type:'dashed'}},

dataZoom:{

show:true,title:'数据视图',readOnly:true,

lang:['数据视图','美团','刷新'],

optionToContent: function(opt){

console.log(opt);

var axisData = opt.xAxis[0].data;

var series = opt.series;

var table = '

时间

'+series[0].name+'

'+series[1].name+'

for(var i=0,l=axisData.length;i

table += '

'

+ '

' + axisData[i] + ''

+ '

' + series[0].data[i] + ''

+ '

' + series[1].data[i] + ''

+ '

';

}

table += '

';

return table;

}

},

dataView : {show: true, readOnly: false},

magicType : {show: true, title:{line:'动态类型切换-折线图',bar:'动态类型切换-柱形图', stack:'动态类型切换-堆积',tiled:'动态类型切换-平铺'}, type: ['line', 'bar','stack','tiled']},

restore : {show: true,title:'还原',color:'black'},

saveAsImage : {show: true,title:'保存为图片',type:'jpeg',lang:['点击本地保存']}

}

},

calculable : true,

dataZoom:{

show: true,

realtime: true,

start: 20,

end: 80

},

xAxis : [

{

type : 'category',

boundaryGap: false, // 类目起始和结束两端空白策略,默认true留空,false则顶头

data : function(){

var list = [];

for(var i=1;i<=30;i++){

list.push('2013-03-'+i);

}

return list;

}()

}

],

yAxis : [

{

type : 'value'

}

],

series : [

{

name:'最高',

type:'line',

data:function(){

var list = [];

for(var i=1;i<=30;i++){

list.push(Math.round(Math.random()*30));

}

return list;

}()

},

{

name:'最低',

type:'line',

data:function(){

var list = [];

for(var i=1;i<=30;i++){

list.push(Math.round(Math.random()*10));

}

return list;

}()

}

]

};

// step 5:设置图表配置项。使用刚指定的配置项和数据显示图表

mychart.setOption(option);