echarts2 实例

1引入

<script type="text/javascript" src="<?php echo STATIC_File_url;?>js/chart/echarts.js"></script>

2、

function revenue(type){var ecjsUrl = static_url+"js/chart/";$('#close_type').val(type);  /*判断进入的首页还是淘股页，加载不同的遮罩层 */var hre1 = window.location.href;var hre2 = "m_stock";var index_zhezhao = 1;if(hre1.indexOf(hre2) > 0 ){index_zhezhao = 0;$('.tng_blackbg').show();}else{$('.markbg').show();}$("#clo_revenue").show();/* 路径配置*/require.config({paths: {/*echarts: 'http://echarts.baidu.com/build/dist'*/echarts: ''+ecjsUrl}});/* 使用 */require(['echarts','echarts/chart/line' ],function (ec) {/* 基于准备好的dom，初始化echarts图表 */var myChart = ec.init(document.getElementById('myChartTu'));/*ajax请求数据，重新渲染*/var AjaxLurl = reAjaxUrl;$.ajax({type: 'post',async: false, url: AjaxLurl,data: '',success: function (mag) {/*alert(mag);*/var strs = mag.split("@"); /*字符分割*/var str0 = tes0 = strs[0]; /*文字标题1 即：今日高手竞猜股平均收益*/var str1 = tes1 =strs[1]; /*文字标题2 */var str2 = tes2 =strs[2]; /*文字标题3 */var str6 = strs[6]; /*超大盘多少*/var str7 = strs[7];var str8 = strs[8];var str9 = strs[9]; /*三段文字 平均收益多少*/var str10 = strs[10];var str11 = strs[11];if(parseFloat(str9)>0){str0 = str0+"<span class='ld_red'>"+str9+"%</span>";}else if(parseFloat(str9)<0){str0 = str0+"<span class='ld_green'>"+str9+"%</span>";}else{str0 = str0+"<span class='ld_white'>"+str9+"%</span>";}if(parseFloat(str10)>0){str1 = str1+"<span class='ld_red'>"+str10+"%</span>";}else if(parseFloat(str10)<0){str1 = str1+"<span class='ld_green'>"+str10+"%</span>";}else{str1 = str1+"<span class='ld_white'>"+str10+"%</span>";}if(parseFloat(str11)>0){str2 = str2+"<span class='ld_red'>"+str11+"%</span>";}else if(parseFloat(str11)<0){str2 = str2+"<span class='ld_green'>"+str11+"%</span>";}else{str2 = str2+"<span class='ld_white'>"+str11+"%</span>";}  /*只要正数*/if(parseFloat(str6)>0){$("#day1Text").html("");if(tes0 != ""){$("#day1Text").html(str0+",超大盘<span class='ld_red'>"+str6+"</span>");}}else{$("#day1Text").html("");if(tes0 != ""){$("#day1Text").html(str0);}}if(parseFloat(str7)>0){$("#day2Text").html("");if(tes1 != ""){$("#day2Text").html(str1+",超大盘<span class='ld_red'>"+str7+"</span>");}}else{$("#day2Text").html("");if(tes1 != ""){$("#day2Text").html(str1);}}if(parseFloat(str8)>0){$("#day3Text").html("");if(tes2 != ""){$("#day3Text").html(str2+",超大盘<span class='ld_red'>"+str8+"</span>");}}else{$("#day3Text").html("");if(tes2 != ""){$("#day3Text").html(str2);}}var str3 = strs[3]; /*line1*/var Line1str = str3.split(","); /*字符分割*/var str4 = strs[4]; /*line2*/var Line2str = str4.split(","); /*字符分割*/var str5 = strs[5]; /*横坐标*/var Ystr5 = str5.split(","); /*字符分割*/var add = 0;if(Ystr5.length<5){add = 5 - Ystr5.length;var arr = new Array(add);var len = arr.length;for(var i=0;i<arr.length;i++){arr[i] = '';}Ystr5 = Ystr5.concat(arr); /*追加数组*/}myChart.hideLoading(); /*隐藏加载动画*/if(Line1str.length == 5){var option = {grid:{y: 10,y2: 120, /*和app不一样*/borderWidth: 0},/* toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line']}, restore : {show: true}, saveAsImage : {show: true} } }, */calculable : false,title : {/*text: '未来一周气温变化', *//*subtext: '纯属虚构'*/},tooltip : {trigger: 'axis'},legend: {data:[''],/*淘股高手们日均收益','大盘走势*/textStyle: {color: '#f00'}},xAxis : [{type : 'category',axisLine: {show:true,onZero:false, /* Y轴都为负数的情况下，倒着显示*/lineStyle: {color: '#fff',width:0.5}},boundaryGap : false,/*data : ["2016-07-08","2016-07-11","2016-07-12","2016-07-14","2016-07-15"] */data : [Ystr5[0],Ystr5[1],Ystr5[2],Ystr5[3],Ystr5[4]],/*data : ["2016-07-14","2016-07-15"], */axisLabel: {show: true,textStyle: {color: '#fff'}},splitLine:{show:false  /*去背景网格*/}}],yAxis : [{type : 'value',axisLine: {lineStyle: {color: '#fff',width:0.5}},axisLabel: {formatter: '{value}%',show: true,textStyle: {color: '#fff'}},splitLine:{show:false  /*去背景网格*/}}],series : [{/*smooth: true,平滑曲线*/name:'最高值',type:'line',/*symbol:'none',隐藏拆线折点*/data:[parseFloat(Line1str[0]),parseFloat(Line1str[1]),parseFloat(Line1str[2]),parseFloat(Line1str[3]),parseFloat(Line1str[4])],itemStyle:{normal:{color:"#df10ed", /*拆线折点时折点颜色*/lineStyle:{color:'#df10ed',width:3}}}},{/*smooth: true,平滑曲线*/name:'最低值',type:'line',data:[parseFloat(Line2str[0]),parseFloat(Line2str[1]),parseFloat(Line2str[2]),parseFloat(Line2str[3]),parseFloat(Line2str[4])],/*data:[-0.03, -0.08], */itemStyle:{normal:{color:"#ffe400",lineStyle:{color:'#ffe400',width:3}}},markPoint : {data : [/*{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}*/]},markLine : {data : [/*{type : 'average', name : '平均值'}*/]}}]};}else if(Line1str.length == 4){var option = {grid:{y: 10,y2: 120, /*和app不一样*/borderWidth: 0},calculable : false,title : {/*text: '未来一周气温变化',*/},tooltip : {trigger: 'axis'},legend: {data:[''],textStyle: {color: '#f00'}},xAxis : [{type : 'category',axisLine: {show:true,onZero:false,lineStyle: {color: '#fff',width:0.5}},boundaryGap : false,data : [Ystr5[0],Ystr5[1],Ystr5[2],Ystr5[3],Ystr5[4]],axisLabel: {show: true,textStyle: {color: '#fff'}},splitLine:{show:false  /*去背景网格*/}}],yAxis : [{type : 'value',axisLine: {lineStyle: {color: '#fff',width:0.5}},axisLabel: {formatter: '{value}%',show: true,textStyle: {color: '#fff'}},splitLine:{show:false  /*去背景网格*/}}],series : [{/*smooth: true,平滑曲线*/name:'最高值',type:'line',data:[parseFloat(Line1str[0]),parseFloat(Line1str[1]),parseFloat(Line1str[2]),parseFloat(Line1str[3])],itemStyle:{normal:{color:"#df10ed",lineStyle:{color:'#df10ed',width:3}}}},{/*smooth: true,平滑曲线*/name:'最低值',type:'line',/*symbol:'none',*/data:[parseFloat(Line2str[0]),parseFloat(Line2str[1]),parseFloat(Line2str[2]),parseFloat(Line2str[3])],itemStyle:{normal:{color:"#ffe400",lineStyle:{color:'#ffe400',width:3}}},markPoint : {data : [/*{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}*/]},markLine : {data : [/*{type : 'average', name : '平均值'}*/]}}]};}else if(Line1str.length == 3){var option = {grid:{y: 10,y2: 120, /*和app不一样*/borderWidth: 0},calculable : false,title : {},tooltip : {trigger: 'axis'},legend: {data:[''],textStyle: {color: '#f00'}},xAxis : [{type : 'category',axisLine: {show:true,onZero:false,lineStyle: {color: '#fff',width:0.5}},boundaryGap : false,data : [Ystr5[0],Ystr5[1],Ystr5[2],Ystr5[3],Ystr5[4]],axisLabel: {show: true,textStyle: {color: '#fff'}},splitLine:{show:false  /*去背景网格*/}}],yAxis : [{type : 'value',axisLine: {lineStyle: {color: '#fff',width:0.5}},axisLabel: {formatter: '{value}%',show: true,textStyle: {color: '#fff'}},splitLine:{show:false  /*去背景网格*/}}],series : [{/*smooth: true,平滑曲线*/name:'最高值',type:'line',data:[parseFloat(Line1str[0]),parseFloat(Line1str[1]),parseFloat(Line1str[2])],itemStyle:{normal:{color:"#df10ed",lineStyle:{color:'#df10ed',width:3}}}},{/*smooth: true,平滑曲线*/name:'最低值',type:'line',data:[parseFloat(Line2str[0]),parseFloat(Line2str[1]),parseFloat(Line2str[2])],itemStyle:{normal:{color:"#ffe400",lineStyle:{color:'#ffe400',width:3}}},markPoint : {data : [/*{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}*/]},markLine : {data : [/*{type : 'average', name : '平均值'}*/]}}]};}else if(Line1str.length == 2){var option = {grid:{y: 10,y2: 120, /*和app不一样*/borderWidth: 0},tooltip : {trigger: 'axis'},legend: {data:[''],textStyle: {color: '#fff'}},calculable : false,xAxis : [{type : 'category',axisLine: {show:true,onZero:false,lineStyle: {color: '#fff',width:0.5}},boundaryGap : false,data : [Ystr5[0],Ystr5[1],Ystr5[2],Ystr5[3],Ystr5[4]],axisLabel: {show: true,textStyle: {color: '#fff'}},splitLine:{show:false  /*去背景网格*/}}],yAxis : [{type : 'value',axisLine: {lineStyle: {color: '#fff',width:0.5}},axisLabel: {formatter: '{value}%',show: true,textStyle: {color: '#fff'}},splitLine:{show:false  /*去背景网格*/}}],series : [{/*smooth: true,平滑曲线*/name:'最高值',type:'line',data:[parseFloat(Line1str[0]),parseFloat(Line1str[1])],itemStyle:{normal:{color:"#df10ed",lineStyle:{color:'#df10ed',width:3}}}},{/*smooth: true,平滑曲线*/name:'最低值',type:'line',data:[parseFloat(Line2str[0]),parseFloat(Line2str[1])],itemStyle:{normal:{color:'#ffe400',lineStyle:{color:'#ffe400',width:3}}},markPoint : {data : [/*{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}*/]},markLine : {data : [/*{type : 'average', name : '平均值'}*/]}}]};}else if(Line1str.length == 1){var option = {grid:{y: 10,y2: 120, /*和app不一样*/borderWidth: 0},calculable : false,title : {},tooltip : {trigger: 'axis'},legend: {data:[''],textStyle: {color: '#f00'}},xAxis : [{type : 'category',axisLine: {show:true,onZero:false,lineStyle: {color: '#fff',width:0.5}},boundaryGap : false,data : [Ystr5[0],Ystr5[1],Ystr5[2],Ystr5[3],Ystr5[4]],axisLabel: {show: true,textStyle: {color: '#fff'}},splitLine:{show:false  /*去背景网格*/}}],yAxis : [{type : 'value',axisLine: {lineStyle: {color: '#fff',width:0.5}},axisLabel: {formatter: '{value}%',show: true,textStyle: {color: '#fff'}},splitLine:{show:false  /*去背景网格*/}}],series : [{/*smooth: true,平滑曲线*/name:'最高值',type:'line',data:[parseFloat(Line1str[0])],itemStyle:{normal:{color:'#df10ed',lineStyle:{color:'#df10ed',width:3}}}},{/*smooth: true,平滑曲线*/name:'最低值',type:'line',data:[parseFloat(Line2str[0])],itemStyle:{normal:{color:'#ffe400',lineStyle:{color:'#ffe400',width:3}}},markPoint : {data : [/*{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}*/]},markLine : {data : [/*{type : 'average', name : '平均值'}*/]}}]};}else{var option = {};}myChart.setOption(option);}});/* 为echarts对象加载数据*//*myChart.setOption(option);*/});$('#clo_revenueExit').click(function () {$('#clo_revenue').hide();if(index_zhezhao == 1){$('.markbg').hide();}else{$('.tng_blackbg').hide();}})}