echarts之饼状图文字放在横线上

领导要求饼状图文字需要放在标示线之上,这样才 beautiful,emmmmmm

以下效果:在这里插入图片描述

<div id="mountain_echarts01" style="width: 600px;height: 400px;margin-top: 20px;background-color: dimgrey;"></div>

var MountainOne = echarts.init(document.getElementById("echarts01"));
    var option01 = {
        title: {
            text: "这里是主标题文本",
            subtext: "这里是副标题文本",
            itemGap: 10,//主副标题之间间距
            x: '25px',
            // 主标题文本样式设置
            textStyle: {
                fontSize: 20,
                fontWeight: 'bolder',
                color: '#fff',
            },
            // 副标题文本样式设置
            subtextStyle: {
                x: '25px',
                fontSize: 18,
                color: '#fff',
                fontWeight: 'bolder',
            }
        },
        tooltip: {
            trigger: 'item',
            // formatter: '{a} <br/>{b} : {c} ({d}%)',
            formatter: '{b} : {c} ({d}%)',
        },
        color:['#fbe1a3','#f1ab6c','#5d84f8'],   //环形颜色
        series: [
            {
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data: [
                    {value: 1, name: '一级',},
                    {value: 10, name: '二级'},
                    {value: 22, name: '正常'},
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                labelLine: {
                    normal: {
                        length: 30,// 改变标示线的长度
                        length2: 80,
                        lineStyle: {
                            color: 'white',// 改变标示线的颜色
                        },
                    }
                },
                label: {
                    // normal: {
                    //     show:true,
                    //     position:'inner',//显示在扇形上
                    //     formatter: '{c}',//显示内容
                    // },
                    textStyle: {
                        color: 'white',  // 改变标示文字的颜色
                        fontSize:18,//文字大小
                    },
                    formatter: '{b}:{c}' + '个\n\n',
                    borderWidth: 20,
                    borderRadius: 4,
                    padding: [0, -80],
                },
            }
        ]
    };
    MountainOne.setOption(option01);

记得引入 echarts.min.js 和 jquery.1.11.3.min.js 哦

<script src="../lib/jquery.1.11.3.min.js"></script>
<script src="../lib/echarts.min.js"></script>
发布了7 篇原创文章 · 获赞 0 · 访问量 90
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览