ecahrt 扇形(半扇形)

 var data = [{
     "name": "1",
     "value": 54
 }, {
     "name": "2",
     "value": 10
 }, {
     "name": "3",
     "value": 10
 },
 {
     "name": "4",
     "value": 10
 },
 {
     "name": "5",
     "value": 120,
        label: {
        	normal: {
        		show: false
        	}
        },     
	  itemStyle: {
	     normal: {
    		label: {
    			show: false
    		},
    		labelLine: {
    			show: false
    		},
    		color: 'rgba(0, 0, 0, 0)',
    		borderColor: 'rgba(0, 0, 0, 0)',
    		borderWidth: 0
    	} 
	 }
 }]
 
  var data1 = [{
     "name": "1",
     "value": 0
 },
 {
     "name": "2",
     "value": 0
 },
 {
     "name": "3",
     "value": 0
 },
 {
     "name": "4",
     "value": 0
 },
 {
     "name": "5",
     "value": 0
 }, 
      {
     "name": "6",
     "value": 54,
        
 }]



 option = {

     color: ['#A0CE3A', '#31C5C0', '#1E9BD1','#149BD1', 'transparent',"#ffffff"],
     backgroundColor: 'rgba(225,225,225,0.7)',
     title: {
         text: '松鼠',
         subtext: 7789,
         textStyle: {
             color: '#000000',
             fontSize: 20,
             // align: 'center'
         },
         subtextStyle: {
             fontSize: 30,
             color: ['#ff9d19']
         },
         x: 'center',
         y: 'center',
     },
     grid: {
         bottom: 150,
         left: 100,
         right: '10%'
     },
    tooltip: {
        show:true,
		trigger: 'item',
        formatter: function(params){
			if(params.dataIndex === 4){
				//剔除总数据,避免鼠标移上的bug
				return '';
			}else{
			   //  '{b}:{c}({d})%'
				return params.data.name+":"+params.data.value;
			}
		},
		textStyle:{
			fontSize:12
		}
	
	},
     legend: {
         show:false,
         data: data,
     },
     series: [
         // 主要展示层的
         {
             radius: ['30%', '61%'],
             center: ['50%', '50%'],
             type: 'pie',
             label: {
                 normal: {
                     show: true,
                     formatter: "{c}",
                     textStyle: {
                         fontSize: 12,

                     },
                     position: 'inside'
                 },
                 emphasis: {
                     show: false
                 }
             },
             name: "民警训练总量",
             data: data,
             startAngle:80, //起始角度
         },
         {
             radius: ['0', '30%'],
             center: ['50%', '50%'],
             label: {
                 normal: {
                     show: false,
                 },
                 emphasis: {
                     show: false
                 }
             },             
             type: 'pie',
             data: data1,
             startAngle:80, //起始角度
         }           
         
     ]
 };
 
 /*暂时未使用*/
 function  _colors() {
	return [
		new this.echarts.graphic.LinearGradient(0, 0, 0, 1, 
			[
				{ offset: 0, color: '#d4a26a' },  // 0% 处的颜色
				{ offset: 1, color: '#dec399' } // 100% 处的颜色
			], 
		false),
		new this.echarts.graphic.LinearGradient(0, 0, 0, 1, 
			[
				{ offset: 0, color: '#588ec5'  }, // 0% 处的颜色 
				{ offset: 1, color: '#93bbd8' } // 100% 处的颜色
			], 
		false),
		new this.echarts.graphic.LinearGradient(0, 0, 0, 1, 
			[
				{	offset: 0, color: '#72ede0' }, // 0% 处的颜色
				{ offset: 1, color: '#02758a' } // 100% 处的颜色
			], 
		false),
		new this.echarts.graphic.LinearGradient(0, 0, 0, 1, 
			[
				{ offset: 0, color: '#db4bb4' }, // 0% 处的颜色
				{ offset: 1, color: '#85035f' } // 100% 处的颜色
			], 
		false),
		new this.echarts.graphic.LinearGradient(0, 0, 0, 1, 
			[
				{ offset: 0, color: '#edd099' }, // 0% 处的颜色
				{ offset: 1, color: '#ffa13c' } // 100% 处的颜色
			 ], 
		false),
		new this.echarts.graphic.LinearGradient(0, 0, 0, 1, 
			[
				{ offset: 0, color: '#5df5af' }, // 0% 处的颜色
				{ offset: 1, color: '#1a8764' } // 100% 处的颜色
			], 
		false),
		new this.echarts.graphic.LinearGradient(0, 0, 0, 1, 
			[
				{ offset: 0, color: '#53b1d9' }, // 0% 处的颜色
      { offset: 1, color: '#023f8a' } // 100% 处的颜色
			], 
		false),
		new this.echarts.graphic.LinearGradient(0, 0, 0, 1, 
			[
				{  offset: 0, color: '#db8fe6' }, // 0% 处的颜色
 				{ offset: 1, color: '#af44e6' }, // 100% 处的颜色
			], 
		false),
		new this.echarts.graphic.LinearGradient(0, 0, 0, 1, 
			[
				{ offset: 0, color: '#fa864c' }, // 0% 处的颜色
      { offset: 1, color: '#aa3815' } // 100% 处的颜色
			], 
		false),
		new this.echarts.graphic.LinearGradient(0, 0, 0, 1, 
			[
				{  offset: 0, color: '#b4dbf6' }, // 0% 处的颜色
				{ offset: 1, color: '#3c9cff' } // 100% 处的颜色
			], 
		false)
	];
}


  

 实例展示地址:  https://gallery.echartsjs.com/editor.html?c=xnNT33748W
posted @ 2019-04-26 15:12  海中松树  阅读(846)  评论(0编辑  收藏  举报