echart饼图和折线图实例

require.config({
    paths: {
        echarts: 'js/echart'
    }
});




require(
    [
        'echarts',
        'echarts/chart/line',
        'echarts/chart/pie'


    ],
      displayOption




);
    var lineChart;
    var pieChart;


function displayOption (ec) {
    lineChart = ec.init(document.getElementById('line'));
    pieChart = ec.init(document.getElementById('pie'));
    var lineChartOtion= {};
    //饼图获得数据
    var Option= {} 
   lineChart.setOption(lineChartOtion);
    pieChart.setOption(Option);
   getChartOption();//aja后台交互获得数据
   
}


function displayOption1 (ec) {
    lineChart = ec.init(document.getElementById('line'));
    pieChart = ec.init(document.getElementById('pie'));
    var lineChartOtion= {};
    //饼图获得数据
    var Option= {} 
   lineChart.setOption(lineChartOtion);
    pieChart.setOption(Option);
   getChartOption1();//aja后台交互获得数据
   
}
//向图表里面加数据
function drawChart(legendlines,xAxis,seriesline,legendpie,series1,series2){
lineChart.setOption({
backgroundColor: {
           color: null
       },
       title: {
           text: '流量流向趋势',
           textStyle: {
               fontSize: 18,
               fontFamily:'微软雅黑',
               fontWeight:'normal',
               color: "black",
           },
           x:50


       },


       legend: {
           orient: 'vertical',
           x: '83%',
           y: '15%',
           textStyle: {
               fontSize: 14,
               fontFamily:'Roboto-Light',
               color: '#36383c'
           },
           data:legendlines
       },


       grid: {
           width: '68%',
           height: '70%',
           borderColor:'#f4f4f4',
           borderWidth:2
       },
       tooltip: {
           show: true,
           formatter: "{a} <br/>{b} : {c}"
       },
       toolbox: {
           show: true,
           feature : {
               saveAsImage : {show: true}
           }
       },
       xAxis: [
           {
               type: 'category',
               boundaryGap: true,
               axisTick: {
                   show: true,
               },
               splitLine:{
                   show:true,
                   lineStyle:{
                       color: ['#f4f4f4'],
                       width: 2,
                       type: 'solid'
                   }
               },
               data:xAxis
           }
       ],
       yAxis: [
           {
               type: 'value',
               axisLabel: {
                   formatter: '{value}'
               },
               splitLine:{
                   show:true,
                   lineStyle:{
                       color: ['#f4f4f4'],
                       width: 2,
                       type: 'solid'
                   }
               },
               splitArea : {
                   show : true,
                   areaStyle:{
                       color: [
                           'rgba(200,200,200,0.1)',
                           'rgba(250,250,250,0.2)'


                       ]
                   }
               }


           }
       ],
       series:seriesline
});
pieChart.setOption({
backgroundColor: {
           color: null
       },
       title: {
           text: '流量流向分布',
           textStyle: {
               fontSize: 18,
               fontFamily:'微软雅黑',
               fontWeight:'normal',
               color: '#36383c'
           },
           x:50
       },
       tooltip: {
           show: true,
           formatter: "{a} <br/>{b} : {c} ({d}%)"
       },
       legend: {
           orient: 'vertical',
           x: '3%',
           y: '15%',
           data:legendpie
       },
       toolbox: {
           show: true,
           feature: {
               saveAsImage: {show: true}
           }
       },
series:[{
             name: '访问来源',
             type: 'pie',
             center: ['58%', '50%'],
             radius: '40%',
             itemStyle: {
                 normal: {
                     label: {
                         position: 'inner',
                         formatter: function (params) {
                             return (params.percent - 0).toFixed(0) + '%'
                         }
                     },
                     labelLine: {
                         show: false
                     }
                 },
                 emphasis: {
                     label: {
                         show: true,
                         formatter: "{b}\n{d}%"
                     }
                 }
             },
             data:series1
         },
         {
             name: '访问来源',
             type: 'pie',
             center: ['58%', '50%'],
             radius: ['55%', '75%'],
             data:series2
         }]
});
}




//动态绘制图表
function ChangeChart(){
var line = data.lineChart;
 var pie=data.pieChart;

      //折线图表
 //折线图表的类目
     var legendlines=[];
     for(var i=1;i<line.length;i++){
         legendlines.push({
         name:line[i].name,
         
         icon:'circle'})
     }
   //折线图表的横轴
    var xAxis=data.lineChart[0].value;
 //折线图表的系列
     var seriesline = [];
     for (var i = 1; i < line.length; i++) {
         seriesline.push({
             name: line[i].name,
             type: 'line',
             smooth:'true',
             symbol:'emptyCircle',
             symbolSize : 3,
             data: line[i].value
         });
     }
   //饼图表
    //饼图类目
          var legendpie = [];
          $.each(pie, function (i, o) {
         legendpie.push(o.name);
          });
     //饼图系列1
          var series1=[];
          $.each(pie, function (i, o) {
              if(o.name=='网内'||o.name=='网外' ){
                  series1.push({
                      name: o.name,
                      value: o.value
                  });
              }
          });
      //饼图系列2
          var series2=[];
          $.each(pie, function (i, o) {
              if(o.name!='网内'&&o.name!='网外' ){
             if(o.name=='陕西移动'){
             series2.push({  name: o.name,
                          type:"pie",
                          value: o.value,
                          itemStyle : {
                              normal : {
                                  color : (function (){
                                      var zrColor = require('zrender/tool/color');
                                      return zrColor.getRadialGradient(
                                          300, 200, 110, 300, 200, 140,
                                          [[0, 'rgba(255,255,0,1)'],[1, 'rgba(30,144,250,1)']]
                                      )
                                  })()
                                  
                              }
                          }
                      })
             }else{
             series2.push({
                          name: o.name,
                          value: o.value
                      }); 
             }
                  
              }
          });
          drawChart(legendlines,xAxis,seriesline,legendpie,series1,series2);
}






//第一次加载
function getChartOption()
{
ChangeChart();
}




//根据条件查找重新加载图表
function getChartOption1(){
   search()
   var page=data.page;
   var pagesize=page.pagesize;
   var total=page.totalNum;
   $("#pageToolbar").Paging({pagesize:pagesize,count:total,toolbar:true});
   ChangeChart();
   drawTable(1);
}


//判断日期的格式当粒度为天时
//根据查询条件图表动态改变值
function check(){
var regexp = /^([1][7-9][0-9][0-9]|[2][0][0-9][0-9])(\-)([0][1-9]|[1][0-2])(\-)([0-2][1-9]|[3][0-1])$/g;
var ym1 = /^([1][7-9][0-9][0-9]|[2][0][0-9][0-9])(\-)([0][1-9]|[1][0-2])$/g;
var ym2 = /^([1][7-9][0-9][0-9]|[2][0][0-9][0-9])(\-)([0][1-9]|[1][0-2])$/g;
var yym1 = /^([1][7-9][0-9][0-9]|[2][0][0-9][0-9])(\-)([0][1-9]|[1-4][0-9]|[5][0-2])/g


var ld=$("#TimeDate").val();
var start=$("#Times").val();
var end=$("#Times1").val();
var regexp2 = /^([1][7-9][0-9][0-9]|[2][0][0-9][0-9])(\-)([0][1-9]|[1][0-2])(\-)([0-2][1-9]|[3][0-1])$/g;
var yym2 = /^([1][7-9][0-9][0-9]|[2][0][0-9][0-9])(\-)([0][1-9]|[1-4][0-9]|[5][0-2])/g
var year,mouth,day,week;
var year1,mouth1,day1,week1;
var str="结束时间必须大于等于开始时间";
var format="开始日期格式错误";
var format1="结束日期格式错误";
if(ld=="2"){
if(!regexp.test(start)){
alert(format);
return false;
}
if(!regexp2.test(end)){
alert(format1);
return false;
}
//都符合日期格式后执行下面的
year=start.substr(0,4);
   mouth=start.substr(5,2);
day=start.substr(8,2);

year1=end.substr(0,4);
   mouth1=end.substr(5,2);
day1=end.substr(8,2);
if(year>year1){
alert(str);
return false;
}else if(mouth>mouth1){
alert(str);
return false;
}else if(day>day1){
alert(str);
return false;
}
}else if(ld=="3"){
var yy=start.substr(0,7);
var ee=end.substr(0,7);
alert(yy+"==="+ee);
if(!yym1.test(yy)){
alert(format);
return false;
}
if(!yym2.test(ee)){
alert(format1);
return false;
}
year=start.substr(0,4);
week=start.substr(5,2);
year1=end.substr(0,4);
week1=end.substr(5,2);
if(year>year1){
alert(str);
return false;
}else if(week>week1){
alert(str);
return false;
}


}else if(ld=="4"){
if(!ym1.test(start)){
alert(format);
return false;
}
if(!ym2.test(end)){
alert(format1);
return false;
}
year=start.substr(0,4);
mouth=start.substr(5,2);

year1=end.substr(0,4);
   mouth1=end.substr(5,2);
if(year>year1){
alert(str);
return false;
}else if(mouth>mouth1){
alert(str);
return false;
}
}



$("#pie").html("");
$("#line").html("");
$("#tab-thead").html("");
$("#tab-tbody").html("");
$("#pageToolbar").html("");
require(
   [
       'echarts',
       'echarts/chart/line',
       'echarts/chart/pie'


   ],
     displayOption1




);
return true;
};


//点击图表变色
function changeColor(obj){
    obj.style. border="1px solid #379cf8";
}


function outcolor(obj){
    obj.style. border="";
}