echarts饼图

1、添加点击事件并跳转到不同的页面

// 路径配置
  require.config({
      paths: {
          echarts: 'http://echarts.baidu.com/build/dist/'
      }
  });  
// 使用
var option;(设置全局变量)
require(
    [
        'echarts',
        'echarts/chart/pie' // 使用柱状图就加载pie模块，按需加载
    ],
    function (ec) {
        // 基于准备好的dom，初始化echarts图表
        var myChart = ec.init(document.getElementById('chartsmain1')); 
    	var ecConfig = require('echarts/config');
	myChart.on(ecConfig.EVENT.CLICK, eConsole); 
         option = {
        	    title : {
        	        text: '最常用社交媒体占比',
        	        x:'center'
        	    },
        	    legend: {
        	        orient : 'vertical',
        	        x : 'left',
        	        y:'bottom',
        	        data:['QQ','微博','微信']
        	    },
        	    series : [
        	         {
        	            name:'访问来源',
        	            type:'pie',
        	            radius : '55%',
        	            clickable : true,
        	            center: ['50%','60%'],
        	            data:[
        	                {
        	                 value:335, 
        	                 name:'QQ',
        	                 itemStyle:{
	                	     normal:{
	                	       color:'rgb(255,192,0)'     	                	 
	                	      }
	                           }
        	                },
        	                {
        	                 value:310,
        	                 name:'微博',
        	                 itemStyle:{
 	                	     normal:{
 	                	       color:'rgb(1,175,80)'       	                	 
 	                	      }
 	                           }
        	                 },
        	                {
        	                 value:234, 
        	                 name:'微信',
        	                 itemStyle:{
  	                	    normal:{
  	                	       	color:'rgb(122,48,158)'       	                	 
  	                	        }
  	                           }
        	                }
        	            ]
        	        }
        	    ]
        	};
        // 为echarts对象加载数据 
        myChart.setOption(option); 
    });
function eConsole(option) {
       //获得option的值做出判断，添加链接
	if(option.name=="QQ"){
		window.open("http://www.runoob.com/")
	}else if(option.name=="微博"){
		window.open("http://www.weibo.com/")	
	}else{
		window.open("http://www.baidu.com/")
	}
}

　　注意：加红色的部分为饼图添加点击事件所需的代码

 

2、饼图颜色和折线图的线条颜色一一对应应当保持一致并不依赖默认颜色

饼图
 data:[
    {
      value:335, 
      name:'QQ',
       itemStyle:{
       normal:{
           color:'rgb(255,192,0)'     	                	 
            }
        }
      },     		                	         	                	             	                	       	              	           	                         
       {
         value:310,
          name:'微博',
           itemStyle:{
 	    normal:{
 	      color:'rgb(1,175,80)'       	                	 
 	        }
 	       }
             },
           {
             value:234, 
              name:'微信',
              itemStyle:{
  	      normal:{
  	       color:'rgb(122,48,158)'       	                	 
  	       }
  	     }
           }
         ]   

 红色的部分是修改默认颜色为自定义颜色

 

折线
series : [
    	{
    	  name:'QQ',
    	  type:'line',
    	  stack: '总量',
    	  data:[120, 132, 101, 134, 90, 230, 210],
    	  itemStyle:{
           normal:{
           color:'rgb(255,192,0)',        	                	 
                }
               }
    	      },
    	    {
    	      name:'微信',
    	      type:'line',
    	      stack: '总量',
    	      data:[220, 182, 191, 234, 290, 330, 310],
    	       itemStyle:{
	     	normal:{
	            color:'rgb(122,48,158)',        	                	 
	            }
	           }
    		 },
               {
    		 name:'微博',
    		 type:'line',
    		 stack: '总量',
    		 data:[150, 232, 201, 154, 190, 330, 410],
    		 itemStyle:{
	          normal:{
	           color:'rgb(1,175,80)',        	                	 
	            }
	           } 
    		 }
    		]

 

效果图