Echarts之饼图

素颜马尾好姑娘i 2021-09-17 05:30 497阅读 0赞

引入jquery.js，echarts.js文件

<body>
    <div id="charts" style="min-width:150px;min-height:150px;height:100%;height:100%">
    </body>
    <script type='text/javascript'>
      function fnRainFall(year) {
            var Chart = echarts.init(document.getElementById('charts'));   
            option = {
                tooltip: {  //提示框设置
                    trigger: 'item', 
                    formatter: "{a} <br/>{b}: {c} ({d}%)", //提示框显示格式 <br/> 换行
                    position: function () {  //提示框对于饼图的位置
                        return ['50%', '50%']
    
                    }
                },
                legend: {
                    show:ture, //图例是否显示 默认true 显示
                    orient: 'vertical', //图例 垂直显示
                    y: 'center', //图例垂直方向居中显示
                    x: '40%',     //x轴方向居左40% 也可以是数字 默认 px eg:100
                    icon: 'circle', //图例的图标行状
                    data: ['北京','上海'],  
                    formatter: function (name) { //自定义图例显示的文字
                        if (name == '北京')
                            return name +"自定义"   //返回拼接成自己想要的格式
                        else if (name == '上海')
                            return name + "自定义";
                    },
                    textStyle: {
                        fontSize: 14,  //图例的字体大小
                       color: '#a0b5d4' //图例的字体颜色             
                      }
                },
            
                graphic: {    //显示在饼图中间的文字设置
                    type: 'text',
                    left: 'center',  //位置
                    top: 'center',
                    style: {
                        text: '消费总量\n\n' + "100", //文字 \n换行
                        textAlign: 'center',
                        fill: '#a0b5d4',  //文字 颜色
                        fontSize: 14      //文字 大小 默认px
                    }
                },
                series: [
                    {
                        name: '消费总额',
                        type: 'pie',
                        radius: ['65%', '80%'],  //饼图大小设置 两个数越接近 饼图的环的宽度越窄               
                        //center: ['20%','45%'], //图形相对于容器的位置
                        avoidLabelOverlap: false, //不会重叠
                        hoverAnimation: false,  // 鼠标悬停是否有提示框
                        label: {
                            normal: {
                                show: false,
                                position: 'center', // 鼠标悬停中间显示文字
    
                            },
                          
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            { value: "100", name: '北京' },
                            { value: "200", name: '上海' }                     
                        ]
                    }
                ],
                color: ['#0d7dfa', '#ffae00'],//饼图颜色, 
            };
            Chart .setOption(option);
            window.onresize = Chart.resize; //自适应屏幕大小
    </script>