echarts laben 饼图指示线条+文字颜色继承

最新推荐文章于 2024-03-22 17:55:09 发布

不甘平庸!!!

最新推荐文章于 2024-03-22 17:55:09 发布

阅读量1.2k

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/weixin_51747411/article/details/126244716

版权

注意：
label并不支持HTML片段
版本5.30

 label: {
                        show: true,
                        alignTo: 'edge',
                        position: 'outside',
                        // formatter: '{name|{b}}\n{time|{c} 小时}',
                        // formatter: '{b|{b}}\n{cstyle|{c}}',
                        formatter: params => `${params.value >= 1 ? '{b|' + params.value + '}' : params.value}元\n${params.name}`,  // label不支持html片段  
                        edgeDistance: 1,
                        lineHeight: 20,
                        rich: { // 因为label不支持html片段，所以css样式需要使用rich给添加进去  // formatter: '{b|{b}}\n{cstyle|{c}}', 详见https://echarts.apache.org/zh/option.html#series-pie.label
                            b: {
                                fontSize: 30,
                                color: "red",
                            },
                            cstyle: {
                                color: 'blue'
                            }
                        },
                        color: 'inherit'  // inherit 让字体和线条保持同一种颜色
                    },

效果图：
大于等于1的值以红色字体展示字体大小设置为30，其余小于1的继承线条的颜色
在这里插入图片描述
完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./echarts.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="echarts" style="width: 600px;height:500px"></div>
    <script>
        var chartDom = document.getElementById('echarts');
        var myChart = echarts.init(chartDom);
        var option;

        var datas = [
            [
                { name: '圣彼得堡来客', value: 5.6 },
                { name: '陀思妥耶夫斯基全集', value: 1 },
                { name: '史记精注全译（全6册）', value: 0.8 },
                { name: '加德纳艺术通史', value: 0.5 },
                { name: '表象与本质', value: 0.5 },
                { name: '其它', value: 3.8 }
            ],
        ];
        option = {
            title: {
                text: '阅读书籍分布',
                left: 'center',
                textStyle: {
                    color: '#999',
                    fontWeight: 'normal',
                    fontSize: 14
                }
            },
            series: datas.map(function (data, idx) {
                var top = idx * 33.3;
                return {
                    type: 'pie',
                    radius: [20, 60],
                    top: top + '%',
                    height: '33.33%',
                    left: 'center',
                    width: 400,
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    label: {
                        show: true,
                        alignTo: 'edge',
                        position: 'outside',
                        // formatter: '{name|{b}}\n{time|{c} 小时}',
                        // formatter: '{b|{b}}\n{cstyle|{c}}',
                        formatter: params => `${params.value >= 1 ? '{b|' + params.value + '}' : params.value}元\n${params.name}`,  // label不支持html片段  
                        edgeDistance: 1,
                        lineHeight: 20,
                        rich: { // 因为label不支持html片段，所以css样式需要使用rich给添加进去  // formatter: '{b|{b}}\n{cstyle|{c}}', 详见https://echarts.apache.org/zh/option.html#series-pie.label
                            b: {
                                fontSize: 30,
                                color: "red",
                            },
                            cstyle: {
                                color: 'blue'
                            }
                        },
                        color: 'inherit'  // inherit 让字体和线条保持同一种颜色
                    },
                    labelLine: {
                        length: 15,
                        length2: 0,
                        maxSurfaceAngle: 80
                    },
                    labelLayout: function (params) {
                        const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                        const points = params.labelLinePoints;
                        // Update the end point.
                        points[2][0] = isLeft
                            ? params.labelRect.x
                            : params.labelRect.x + params.labelRect.width;
                        return {
                            labelLinePoints: points
                        };
                    },
                    data: data
                };
            })
        };
        option && myChart.setOption(option);

    </script>
</body>

</html>