echarts之饼状图扇形区域和标示线上显示数据（图标）

最新推荐文章于 2024-07-05 15:59:12 发布
红色的苏里南苦樱桃
最新推荐文章于 2024-07-05 15:59:12 发布
阅读量6.2k
点赞数 4
分类专栏： Echarts
本文链接：https://blog.csdn.net/weixin_44962808/article/details/104413557
版权
Echarts 专栏收录该内容
4 篇文章 0 订阅
订阅专栏
效果图：在这里插入图片描述
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>demo</title>
</head>
<body>
     <div id="one" style="width: 500px;height:400px;"> </div>
    <script type="text/javascript" src="../lib/jquery.1.11.3.min.js"></script>
    <script src="../lib/echarts.min.js"></script>
    <script>
       var myEcharts = echarts.init(document.getElementById("one"))
                var mounoption9 = {
                    title: {
                        text: "火情总数:5次",
                        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: "{b} : {c} ({d}%)"
                    },
                    legend: {
                        data: ["正常区域", "预警区域", "高发区域", '不发区域'],
                        selectedMode: false,
                        show: false
                    },
                    color: ['#66ebe1', '#4ec1ff', '#e2503c', '#fed246'],
                    series: [{
                        type: 'pie',
                        radius:['15%','65%'] ,//大小
                        center: ['50%', '55%'],//这个属性调整图像的位置
                        selectedMode: 'single',
                        data: [{
                            value: 180,
                            name: '不发区域'
                        }, {
                            value: 200,
                            name: '高发区域'
                        }, {
                            value: 180,
                            name: '预警区域'
                        }, {
                            value: 400,
                            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: '{b}\n\n',//显示内容
                                textStyle: {
                                    color: 'white',  // 改变标示文字的颜色
                                    fontSize: 16,//文字大小
                                },
                                // formatter: '{b}\n\n',
                                formatter:function(params){
                                    var res = [];
                                    var mySeries = mounoption9.series[0];
                                    // console.log(mySeries)
                                    for (const key in mySeries.data) {
                                        if(mySeries.data[key].name == params.name){
                                            return mySeries.data[key].name + `{img` + key + `|}` + '\n\n'
                                        }
                                    }
                                },
                                rich:{
                                    img0:{
                                        backgroundColor:{
                                            image:'../assets/mountailFire/mapDW/1.png'
                                        },
                                        height:20,
                                        width:20

                                    },
                                    img1:{
                                        backgroundColor:{
                                            image:'../assets/mountailFire/mapDW/2.png'
                                        },
                                        height:20,
                                        width:20

                                    },
                                    img2:{
                                        backgroundColor:{
                                            image:'../assets/mountailFire/mapDW/3.png'
                                        },
                                        height:20,
                                        width:20

                                    },
                                    img3:{
                                        backgroundColor:{
                                            image:'../assets/mountailFire/mapDW/4.png'
                                        },
                                        height:20,
                                        width:20

                                    },
                                },
                                borderWidth: 20,
                                borderRadius: 4,
                                padding: [0, -90],//标示线上面文字的位置
                            },
                        },
                    },
                    {
                        name: '',
                        type: 'pie',//饼状图
                        // radius:'65%' ,//中间没有圆圈
                        radius:['15%','65%'] ,//大小，中间有黑色圆圈
                        center: ['50%', '55%'],//调整图像的位置
                        data: [
                            {
                                value: 180,
                                name: '不发区域'
                            }, {
                                value: 200,
                                name: '高发区域'
                            }, {
                                value: 180,
                                name: '预警区域'
                            }, {
                                value: 400,
                                name: '正常区域'
                            },
                        ],
                        itemStyle: {
                            normal: {
                                label: {        //此处为指示线文字
                                    show: true,
                                    position: 'inner', //标签的位置
                                    textStyle: {
                                        fontWeight: 200,
                                        fontSize: 16    //文字的字体大小
                                    },
                                    formatter: '{c}次' //指示线对应文字
                                },
                                labelLine: {    //指示线状态
                                    show: true,
                                    smooth: 0.2,
                                    length: 10,
                                    length2: 20
                                }
                            }
                        },
                    }]
                }
                myEcharts.setOption(mounoption9)
    </script>
</body>
</html>