echarts 饼图demo

最新推荐文章于 2024-07-30 11:48:07 发布

iamapsycho

最新推荐文章于 2024-07-30 11:48:07 发布

阅读量1.8k

点赞数

分类专栏： echarts 文章标签： javascript

本文链接：https://blog.csdn.net/ampsycho/article/details/77748552

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>