echarts 饼图demo

来源:互联网 发布:大富豪5.2源码 编辑:程序博客网 时间:2024/05/21 12:40

echarts 饼图demo

echarts写了一个饼图demo

1.引入echarts的js文件

<script src="static/common/script/echarts.common.min.js"></script>

2.声明echarts的dom对象

<!-- 为ECharts准备一个具备大小(宽高)的Dom -->    <div id="pieDemo" style="width: 800px;height:800px;"></div>

3.js编码

<script type="text/javascript">    function createChart(loanType){            // 基于准备好的dom,初始化echarts实例            var myChart = echarts.init(document.getElementById('pieDemo'));            // 指定图表的配置项和数据            var titleTxt = "";            if(loanType=='Cash'){                titleTxt='现金贷款信息分析';            }else if(loanType=='Car'){                titleTxt='购车贷款信息分析';            }            $.post('admin/queryChart/queryChartsDemo',{"loanType":loanType},                     function(data) {                if(data!=null){                    var LevelOne = data.LevelOne;                    var LevelTwo = data.LevelTwo;                    var LevelThr = data.LevelThr;                    var option = {                            title : {                                text: titleTxt,                                subtext: '饼图分析DEMO',                                x:'center'                            },                            tooltip : {                                trigger: 'item',                                formatter: "{a} <br/>{b} : {c} ({d}%)"                            },                            legend: {                                orient: 'vertical',                                left: 'right',                                data: ['1万以下(含1万)','1万-10万(含10万)','10万-100万(含100万)']                            },                            series : [{                                name: '数据分析',                                type: 'pie',                                radius : '55%',                                center: ['50%', '60%'],                                data:[                                    {value:LevelOne, name:'1万以下(含1万)'},                                    {value:LevelTwo, name:'1万-10万(含10万)'},                                    {value:LevelThr, name:'10万-100万(含100万)'},                                ],                                itemStyle: {                                    emphasis: {                                        shadowBlur: 10,                                        shadowOffsetX: 0,                                        shadowColor: 'rgba(0, 0, 0, 0.5)'                                        }                                    }                                }]                            };                    myChart.setOption(option);                }            });        }</script>

这里写图片描述