【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; } }
复制代码

 

posted @   丶会飞的羊  阅读(775)  评论(0编辑  收藏  举报
编辑推荐:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
点击右上角即可分享
微信分享提示