echarts实现饼图

1.饼图的配置	
   //饼图的配置，dataZs是一个对象，其中包含开始时间，结束时间，以及该时间段的list数据 
   function aa(dataZs, id){          //id为放置的div的id 
    var opt = [];
		var dataType = [];
		if(dataZs.tuBiaoDtoList.length != 0){
			for (var i = 0; i < dataZs.tuBiaoDtoList.length; i++) {
				opt.push({name:dataZs.tuBiaoDtoList[i].type,value:dataZs.tuBiaoDtoList[i].sum});
				dataType.push(dataZs.tuBiaoDtoList[i].type);
			}
		}
		id = (id == undefined) ? 'myChart' : id;
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById(id));
		var text = "时间：";
		var start;
		var end ;
		if(dataZs.startDate== null){
			start = "";
			end = " 至今"
		}else{
			var startDate = new Date(dataZs.startDate.time); //时间戳
			var endDate =  new Date(dataZs.endDate.time);
			start = startDate.getFullYear()+"-"+(startDate.getMonth()+1)+"-"+startDate.getDate();
			end = endDate.getFullYear()+"-"+(endDate.getMonth()+1)+"-"+endDate.getDate();
		}
		text +=  start +"--"+end;
		// 指定图表的配置项和数据
		var option = {
			title:{
				text: text,
				x: "center"
			},
			legend: {
				orient: 'vertical',
				x:'right',   //位置
				y:'center',
				data: dataType
			},
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)'  //饼图的计算方式
			},
			series: [
				{
					name:'所属费用',
					type: 'pie',
					radius: '55%',
					center: ['50%', '60%'],
				    data: opt
				}
			],
			color: ['rgb(108,215,128)','rgb(252,157,154)','rgb(249,205,173)','rgb(200,200,169)'], //饼图显示的


颜色设置
			itemStyle: {
			emphasis: {
				shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
			}
		}
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
}
2.echarts饼图的legend形状修改。
 legend: {
        orient: 'horizontal', // 'vertical'
        x: 'right', // 'center' | 'left' | {number}, //显示的位置
        y: 'top', // 'center' | 'bottom' | {number}
        backgroundColor: '#eee',
        borderColor: 'rgba(178,34,34,0.8)',
        borderWidth: 4,
        padding: 10,    // [5, 10, 15, 20]
        itemGap: 20,
        textStyle: {color: 'red'},
        selected: {
            '降水量' : false
        },
        data: [
            {
                name:'蒸发量',
                icon : 'image://../asset/ico/favicon.png',
                textStyle:{fontWeight:'bold', color:'green'}
            },
            '降水量','最高气温', '最低气温'
        ]
    }

3 柱状图和折线图添加滑动轴
   dataZoom: {
      show: true,
      realtime: true,
      start: 0,   //滑动开始
      end: 50,    //结束
      height:20,  //滑动轴的高度
      top:20     //滑动轴的位置
}
主要看data属性里面