echart饼图标签和悬浮框一致性

最新推荐文章于 2024-06-27 14:57:58 发布

布布诺

最新推荐文章于 2024-06-27 14:57:58 发布

阅读量414

点赞数

分类专栏：解决Web bug 文章标签： html5

本文链接：https://blog.csdn.net/q18852548808/article/details/124242102

版权

本文介绍了如何在ECharts饼图中实现标签和悬浮框的一致性，包括设置饼图内外圈颜色、标签位置、以及自定义图表内部填充图片。示例代码展示了具体的配置项，如legend的滚动、formatter函数、颜色渐变等，以达到理想效果。

摘要由CSDN通过智能技术生成

1.echart饼图标签和悬浮框一致性

2.echart柱图坐标轴透明

3.echert饼图中间嵌套图片

(1)image地址格式正确

(2)内圈颜色设置为透明色

内圈颜色设置为透明，否则，加载的时候，内圈会盖住图片

(3)标签距离饼图的位置

(4)源码

<div class="c-panel-body">
    <div id="chart-fxjd" style="height:200px;"></div>
    <script type="text/javascript">
        let datas = [{
            value: 129879.32,
            name: '生产用电能耗',
            percent: '10'
        },
            {
                value: 129990.32,
                name: '非生产用电能耗',
                percent: '40'
            }
        ]

        let colors = ['#6e7ce0', '#5fede1', '#388df6', '#7fdefe']
        let legendData = []
        for (var j = 0; j < datas.length; j++) {
            var data = {
                name: datas[j].name,
                icon: 'rect',//圆形改成正方形
                textStyle: {
                    fontSize: 16,
                    //color: colors[j]
                }
            }
            lege