【Echarts】设置主题、扇形格式化

var myCooky = echarts.init(document.getElementById('cooky'),'walden');

 

walden是主题名称：具体可以在官网定制http://echarts.baidu.com/theme-builder/

 

cooky_option = {
    title: {
        text: '占比分析'
    },
    tooltip: {
        trigger: 'item',
        formatter: function(a){
            console.log(a);
            if(a.seriesIndex==0){
                return a.data.name+":￥"+a.data.value+"<br/>占比："+a[3]+"%";
                //return "{a} <br/>{b}: {c} ({d}%)";
            }else if(a.seriesIndex==1){
                return a.data.name+":"+a.data.value+"张"+"<br/>占比："+a[3]+"%";
                //return "{a} <br/>{b}: {c} ({d}%)";
            }
        }
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        y: '30',
        data:[]
    },
    series: [
        {
            name:'订单金额',
            type:'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
                normal: {
                    position: 'inner'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                /* {value:335, name:'直达', selected:true}*/
            ]
        },
        {
            name:'票数',
            type:'pie',
            radius: ['40%', '55%'],
            label: {
                normal: {
                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}张  {per|{d}%}  ',
                    backgroundColor: '#eee',
                    borderColor: '#aaa',
                    borderWidth: 1,
                    borderRadius: 4,
                    // shadowBlur:3,
                    // shadowOffsetX: 2,
                    // shadowOffsetY: 2,
                    // shadowColor: '#999',
                    // padding: [0, 7],
                    rich: {
                        a: {
                            color: '#999',
                            lineHeight: 22,
                            align: 'center'
                        },
                        // abg: {
                        //     backgroundColor: '#333',
                        //     width: '100%',
                        //     align: 'right',
                        //     height: 22,
                        //     borderRadius: [4, 4, 0, 0]
                        // },
                        hr: {
                            borderColor: '#aaa',
                            width: '100%',
                            borderWidth: 0.5,
                            height: 0
                        },
                        b: {
                            fontSize: 12,
                            lineHeight: 25
                        },
                        per: {
                            color: '#eee',
                            backgroundColor: '#334455',
                            padding: [2, 4],
                            borderRadius: 2
                        }
                    }
                }
            },
            data:[
                /* {value:335, name:'直达'}*/
            ]
        }
    ]
};
myCooky.setOption(cooky_option);

 感觉太单调，加了点样式

<style type="text/css">
    .sckDiv{}
    .sckPercent{
        color:red;
        background-color:#fff;
        -webkit-border-radius: 2px;
           border-radius: 2px;
    }
</style>
扇形图格式化
tooltip: {
        trigger: 'item',
        formatter: function(a){
            console.log(a);
            if(a.seriesIndex==0){
                return '<div class="sckDiv">采购金额<br/><hr/>'+a.data.name+"：￥"+a.data.value+"<br/>占比：<span class='sckPercent'>"+a['percent']+"%</span></div>";
                //return "{a} <br/>{b}: {c} ({d}%)";
            }else if(a.seriesIndex==1){
                return '<div class="sckDiv">订单票数<br/><hr/>'+a.data.name+"："+a.data.value+"张"+"<br/>占比：<span class='sckPercent'>"+a['percent']+"%</span></div>";
                //return "{a} <br/>{b}: {c} ({d}%)";
            }
        }
    }

柱状图格式化：
tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function(a){
            var rv = '';
            console.log(a[0]);
            if(a[0]){
                rv+= a[0].name+'<hr/>'+a[0].seriesName+'：￥'+a[0].value;
            }
            if(a[1]){
                rv+= '<br/>'+a[1].seriesName+'：'+a[1].value+'张';
            }
            return rv;
        }
    }