各种echarts深度自定义(自定义过多,自己用)

本文详细探讨了如何对ECharts进行深度自定义,包括图表样式、交互行为等方面的调整,旨在满足个性化需求。通过实例解析,展示了自定义过程的关键步骤和技巧。
摘要由CSDN通过智能技术生成
function initPie(el,data,options){
   
    var options = Object.prototype.toString.call(options) === "[object Object]" ? options : {
   };
    var chartTitle = 'chartTitle' in options ? options.chartTitle : "",
        radius = 'radius' in options ? options.radius : '50%',
        isLabel = 'isLabel' in options ? options.isLabel : true,
        colors = 'colors' in options ? options.colors : null,
        hoverAnimation = 'hoverAnimation' in options ? options.hoverAnimation : true,
        center = 'center' in options ? options.center : ['50%','50%'],
        labelPosition = 'labelPosition' in options ? options.labelPosition : 'outside',
        emphasis = 'emphasis' in options ? options.emphasis : {
   },
        labelFormatter = 'labelFormatter' in options ? options.labelFormatter : '{b}',
        labelLine = 'labelLine' in options ? options.labelLine : {
   },
        roseType = 'roseType' in options ? options.roseType : false,
        legendBoxLeft = 'legendBoxLeft' in options ? options.legendBoxLeft : 'auto';
        legendBoxBottom = 'legendBoxBottom' in options ? options.legendBoxBottom : 'auto',
        legendBoxHeight = 'legendBoxHeight' in options ? options.legendBoxHeight : 'auto',
        y = 'y' in options ? options.y : 'center',
        legendType = 'legendType' in options ? options.legendType : 'plain';
    var option = {
   
        title: {
   
            text: chartTitle,
            x:'center',
            top:10,
            textStyle:{
   
                color:'#5E5E5E',
                fontSize:20
            }
        },
        tooltip : {
   
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend:{
   
            type:legendType,
            orient:"vertical",
            y:y,
            right:legendBoxLeft,
            bottom:legendBoxBottom,
            height:legendBoxHeight,
            itemWidth:14,
            data:data.map(function (a,b) {
   
                return a.name;
            })
        },
        toolbox: {
   
            show: true,
            feature: {
   
                dataZoom: {
   
                    yAxisIndex: 'none'
                },
                dataView: {
   readOnly: false},
                magicType: {
   type: ['line', 'bar']},
                restore: {
   },
                saveAsImage: {
   }
            },
        	top:35,
        	right:20,
        },
        color:colors,
        series : [
            {
   
                name:chartTitle,
                type:'pie',
                radius :radius,
                hoverAnimation:hoverAnimation,
                center: center,
                avoidLabelOverlap: false,
                roseType:roseType,
                data:data.sort(function (a, b) {
    return a.value - b.value; }),
                label: {
   
                    normal: {
   
                        show:isLabel,
                        position:labelPosition,
                        formatter:labelFormatter
                    },
                    emphasis: emphasis
                },
                labelLine: {
   
                    normal:labelLine
                }
            }
        ]
    };
    var myechsrt = echarts.init(document.querySelector(el));
    myechsrt.setOption(option)
    return myechsrt;
}
function initbarOrPieBtn(el,toBar,toPie,endValue){
   
	$(el).css('position',"relative");
	var html='<div class="chart-btns"><div class="chart-btns-box"><span class="app-icon-3232 app-bar to-bar"></span><span class="app-icon-3232 app-pie to-pie"></span></div></div>'
	$(el).append(html);
	$("span.to-bar").bind("click",function () {
   
		toBar(endValue);
	})
	$("span.to-pie").bind("click",function () {
   
		toPie();
	})
}
function record(options){
   //更新记录数
	 var el = 'el' in options ? options.el : console.error('cannot find el'),
        data = 'data' in options ? options.data : [];
    if(data.length > 0){
   
    	data = data.sort(function (a, b) {
    return b.value - a.value; });
    }
    var title = 'title' in options ? options.title : "",
        tooltipFormatter = 'tooltipFormatter' in options ? options.tooltipFormatter() : null,
        xData = 'xData' in options ? options.xData() : data.map(function (a,b){
   return a.name}),
        val = 'val' in options ? options.val() : data.map(function (a,b){
   return a.value}),
        err = 'err' in options ? options.err() : data.map(function (a,b){
   return a.error}),
        legendData = 'legendData' in options ? options.legendData() : [],
        colors = 'colors' in options ? options.colors : ['#6797f5'],
        endValue = 'endValue' in options ? options.endValue : 6
    var seriesData = 'seriesData' in options? options.seriesData() : null;   
  var  option = {
   
    	    tooltip : {
   
    	        trigger: 'axis',
    	        axisPointer : {
               // 坐标轴指示器,坐标轴触发有效
    	            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
    	        }
    	    },
    	    title:{
   
                text: title,
                left:'center',
                top:10,
                textStyle:{
   
                    color:'#5E5E5E',
                    fontSize:20
                }
            },
            dataZoom: [{
   
                type: 'inside',
                //startValue:0,
                //endValue:endValue
                orient:"vertical",
            }, {
   
                type: 'slider',
                show:false,
                bottom:-20,
                textStyle:{
   
                    color:'#7CAAFB',
                    fontSize:0
                },
               borderColor:'rgba(0,0,0,0)',
                fillerColor:'#2b91e7',
                handleSize:"0%"
            }],
    	    grid: {
   
    	        left: '3%',
    	        right: '4%',
    	        bottom: '3%',
    	        containLabel: true
    	    },
    	    xAxis:  {
   
    	        type: 'value'
    	    },
    	    yAxis: {
   
    	        type: 'category',
    	        data: xData,
    	        axisLabel: {
   
                    textStyle: {
   
                        fontSize: 15,
                    }
                },
    	    },
    	    series: [
    	        {
   
    	            name: '成功数量',
    	            type: 'bar',
    	            stack: '总量',
    	            label: {
   
    	                normal: {
    
    	                    show: true,
    	                    //
    	                    position: 'insideLeft',
    	                    textStyle: {
   
                                fontSize: 15,
                            }
    	                }
    	            },
    	            data: val
    	        },
    	        {
   
    	            name: '失败数量',
    	            type: 'bar',
    	            stack: '总量',
    	            label: {
   
    	                normal: {
   
    	                	
    	                	
    	                         formatter: '{c}\n\n',
    	                 
    	                    show: true,
    	                    position: 'right',
    	                    textStyle: {
   
                                fontSize: 15,
                            }
    	                }
    	            },
    	            data:err
    	        },
    	       
    	    ]
    	};
           
    var myechsrt = echarts.init(document.querySelector(el));
    myechsrt.setOption(option)
    return myechsrt
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值