ehcarts生成彩虹图，半圆饼图，蚊香图等

最新推荐文章于 2025-03-11 16:26:33 发布
最新推荐文章于 2025-03-11 16:26:33 发布
阅读量619 收藏 5
点赞数 6
文章标签： android javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38318244/article/details/142517509
版权

其实这三种图我都认为是一种图，都是饼图的变形，需求长这样子
在这里插入图片描述
我的效果图这样子
在这里插入图片描述
想要一模一样自己改改颜色就行了

我们先生成完整的蚊香图，众所周知，我们正常的饼图只是把seriesData配置一次，然后把数据全部塞进去，就好，如官网示例
在这里插入图片描述

那想要生成很多条数据，我们把series里面的每一条数据都按比例分（比如100处长啥样，40分长啥样，60分长啥样），搞成很多条就好了，循环数据，把每一个数据都搞成一个seriesData数据条，就变成一圈一圈的了

const obj = {//定义要用到的变量：
    series: [],
    maxRadius: 90,
    barWidth: 6,
    barGap: 2,
    // sumValue: 0,
    showValue: true,
    showPercent: true,
    option: {},
    //图形数据
    PieDatas: [
        {
            "value": 95,
            "name": "XXXXXXXXXX数据XXXXXXXXXX完整率"
        },
        {
            "value": 85,
            "name": "XXXXXXXXXX数据XXXXXXXXXX完整率"
        },
        {
            "value": 35,
            "name": "XXXXXXXXXX数据XXXXXXXXXX完整率"
        },
        {
            "value": 65,
            "name": "XXXXXXXXXX数据XXXXXXXXXX完整率"
        },
        {
            "value": 100,
            "name": "XXXXXXXXXXXXXXXX完整率识别准确率"
        },
        {
            "value": 55,
            "name": "XXXXXXX完整率时钟准确率"
        },
        {
            "value": 75,
            "name": "车XXXXXXXXXX数据XXXXXXXXXX完整率上传率"
        }, {
            "value": 95,
            "name": "XXXXXXXXXX数据XXXXXXXXXX完整率上传率"
        }, {
            "value": 15,
            "name": "XXXXXXXXXX数据XXXXXXXXXX完整率可用率"
        }, {
            "value": 25,
            "name": "XXXXXXXXXX数据XXXXXXXXXX完整率用率"
        },
    ],
    //图形颜色
    BarColor: [
        {
            "color1": "#4E9DFF",
            "color2": ""
        },
        {
            "color1": "#36C4F7",
            "color2": ""
        },
        {
            "color1": "#65D4AB",
            "color2": ""
        },
        {
            "color1": "#9FFF8D",
            "color2": ""
        },
        {
            "color1": "#FFE154",
            "color2": ""
        },
        {
            "color1": "#FFB854",
            "color2": ""
        }, {
            "color1": "#FF9254",
            "color2": ""
        }, {
            "color1": "#FF8181",
            "color2": ""
        }, {
            "color1": "#FF81BA",
            "color2": ""
        }, {
            "color1": "#DC81FF",
            "color2": ""
        },
    ],
}

我们制作两个 series数据条，直接把数据条显示成有颜色的，不足100%的用灰色显示，以下是series中的data写法

    data: [
                  {
                    value: item.value,
                    name: item.name,
                    itemStyle: {
                        color: obj.BarColor[i].color1
                    }
                }, {
                    value: 100 - item.value,
                    name: '',
                    itemStyle: {
                        color: "transparent",
                    },
                    tooltip: {
                        show: false
                    },
                    hoverAnimation: false
                }]

完整版循环代码

 obj.PieDatas.forEach((item, i) => {
            obj.series.push({
                center: ['50%', '60%'],
                type: 'pie',
                // clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [(obj.maxRadius - i * (obj.barGap + obj.barWidth)) + '%', (obj.maxRadius - (i + 1) * obj.barWidth - i * obj.barGap) + '%'],
                label: {
                    show: false
                },
                itemStyle: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false
                    },
                    borderWidth: 5,
                },
                data: [
                 {
                    value: item.value,
                    name: item.name,
                    itemStyle: {
                        color: obj.BarColor[i].color1
                    }
                }, {
                    value: 100 - item.value,
                    name: '',
                    itemStyle: {
                        color: "transparent",
                    },
                    tooltip: {
                        show: false
                    },
                    hoverAnimation: false
                }]
            })
        })

在这里插入图片描述

想制作带底色的图，我们再写一个series， 底色改成灰色就行，蚊香图就出来了

 obj.PieDatas.forEach((item, i) => {
  obj.series.push({
                // startAngle: 0,
                // endAngle: 180,
                // radius: ['40%', '70%'],
                center: ['50%', '60%'],
                name: 'blank',
                type: 'pie',
                silent: true,
                z: 0,
                // clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [(obj.maxRadius - i * (obj.barGap + obj.barWidth)) + '%', (obj.maxRadius - (i + 1) * obj.barWidth - i * obj.barGap) + '%'],
                // center: ["30%", "50%"],
                label: {
                    show: false
                },
                itemStyle: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false
                    },
                    borderWidth: 5,
                },
                data: [{
                    value: 1,
                    itemStyle: {
                        color: "#f7f7f7",//圆圈另一半的颜色
                        // color: "transparent",
                        borderWidth: 0
                    },
                    tooltip: {
                        show: false
                    },
                    hoverAnimation: false
                }]
            });
         })

在这里插入图片描述
最后就是制作成半圆形，制作半圆的精髓就是咱们把刚才设置的第2个series设置成透明色,或者把直接把第2个series数据删除，然后第一个series数据条的底色设置成想要的颜色就ok，然后再设置`起始角度结束角度等，我们先来看这个图
在这里插入图片描述

咱们设置startAngle和endAngle，然后根据自己的需求看是否要设置顺时加载colockWise等属性，要设置彩虹底色可以自定义颜色等，直接放setOption完整代码吧

 
        obj.PieDatas.forEach((item, i) => {
            obj.series.push({
                startAngle: 0,
                endAngle: 180,
                // radius: ['40%', '70%'],
                center: ['50%', '60%'],
                type: 'pie',
                // clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [(obj.maxRadius - i * (obj.barGap + obj.barWidth)) + '%', (obj.maxRadius - (i + 1) * obj.barWidth - i * obj.barGap) + '%'],
                // center: ["30%", "50%"],
                label: {
                    show: false
                },
                itemStyle: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false
                    },
                    borderWidth: 5,
                },
                data: [{
                    value: 100,
                    itemStyle: {
                        normal: {
                            color: "transparent" // 透明色
                        }
                    }, name: ''
                }, {
                    value: item.value,
                    name: item.name,
                    itemStyle: {
                        color: obj.BarColor[i].color1
                    }
                }, {
                    value: 100 - item.value,
                    name: '',
                    itemStyle: {
                        color: "#f7f7f7",
                    },
                    tooltip: {
                        show: false
                    },
                    hoverAnimation: false
                }]
            })
            // 制作半圆图时这段要不要都可
            // obj.series.push({
            //     startAngle: 0,
            //     endAngle: 180,
            //     // radius: ['40%', '70%'],
            //     center: ['50%', '60%'],
            //     name: 'blank',
            //     type: 'pie',
            //     silent: true,
            //     z: 0,
            //     // clockWise: false, //顺时加载
            //     hoverAnimation: false, //鼠标移入变大
            //     radius: [(obj.maxRadius - i * (obj.barGap + obj.barWidth)) + '%', (obj.maxRadius - (i + 1) * obj.barWidth - i * obj.barGap) + '%'],
            //     // center: ["30%", "50%"],
            //     label: {
            //         show: false
            //     },
            //     itemStyle: {
            //         label: {
            //             show: false,
            //         },
            //         labelLine: {
            //             show: false
            //         },
            //         borderWidth: 5,
            //     },
            //     data: [{
            //         value: 1,
            //         itemStyle: {
            //             // color: "#f7f7f7",//圆圈另一半的颜色
            //             color: "transparent",
            //             borderWidth: 0
            //         },
            //         tooltip: {
            //             show: false
            //         },
            //         hoverAnimation: false
            //     }]
            // });

        })
        obj.option = {
            // startAngle: 180,
            // endAngle: 360,
            grid: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
            },
            backgroundColor: '#fff',
            tooltip: {
                show: true,
                trigger: "item",
            },
            legend: {//右侧文字
                show: true,
                left: '20%',
                top: 'bottom',
                icon: "circle",
                itemWidth: 6,
                itemHeight: 8,
                itemGap: 5,
                textStyle: {
                    //右侧字体样式
                    rich: {
                        bothNameValue: {
                            width: 300,  //给文字设置统一长度，保证右侧的百分比对齐
                        },
                        title: {
                            fontSize: 14,
                            lineHeight: 16,
                            color: '#999999',
                            width: 260,
                        },
                        value: {
                            color: '#489DF7',
                            fontSize: 18,
                            fontFimely: 'DIN Alternate'
                        }
                    }
                },
                formatter: (name) => {
                    var datas = obj.PieDatas;
                    let total = 0;
                    datas.map(item => {
                        total += (item.value - 0)
                    })
                    let valueIndex = datas.map(item => item.name).indexOf(name);
                    let htmlValue = obj.showPercent ? datas[valueIndex].value + "%" : ''
                    return "{title|" + name + "} {value|" + htmlValue + "}"
                    // return name + "  " + (obj.showPercent ? ((datas[valueIndex].value / total) * 100).toFixed(2) + "%" : '');
                },

            },
            series: obj.series,

        }

react demo完整版代码，可直接复制粘贴

import React, { useEffect, useState } from 'react';


const obj = {//定义要用到的变量：
    series: [],
    maxRadius: 90,
    barWidth: 6,
    barGap: 2,
    // sumValue: 0,
    showValue: true,
    showPercent: true,
    option: {},
    //图形数据
    PieDatas: [
        {
            "value": 95,
            "name": "XXXXXXXXXX数据XXXXXXXXXX完整率"
        },
        {
            "value": 85,
            "name": "XXXXXXXXXX数据XXXXXXXXXX完整率"
        },
        {
            "value": 35,
            "name": "XXXXXXXXXX数据XXXXXXXXXX完整率"
        },
        {
            "value": 65,
            "name": "XXXXXXXXXX数据XXXXXXXXXX完整率"
        },
        {
            "value": 100,
            "name": "XXXXXXXXXXXXXXXX完整率识别准确率"
        },
        {
            "value": 55,
            "name": "XXXXXXX完整率时钟准确率"
        },
        {
            "value": 75,
            "name": "车XXXXXXXXXX数据XXXXXXXXXX完整率上传率"
        }, {
            "value": 95,
            "name": "XXXXXXXXXX数据XXXXXXXXXX完整率上传率"
        }, {
            "value": 15,
            "name": "XXXXXXXXXX数据XXXXXXXXXX完整率可用率"
        }, {
            "value": 25,
            "name": "XXXXXXXXXX数据XXXXXXXXXX完整率用率"
        },
    ],
    //图形颜色
    BarColor: [
        {
            "color1": "#4E9DFF",
            "color2": ""
        },
        {
            "color1": "#36C4F7",
            "color2": ""
        },
        {
            "color1": "#65D4AB",
            "color2": ""
        },
        {
            "color1": "#9FFF8D",
            "color2": ""
        },
        {
            "color1": "#FFE154",
            "color2": ""
        },
        {
            "color1": "#FFB854",
            "color2": ""
        }, {
            "color1": "#FF9254",
            "color2": ""
        }, {
            "color1": "#FF8181",
            "color2": ""
        }, {
            "color1": "#FF81BA",
            "color2": ""
        }, {
            "color1": "#DC81FF",
            "color2": ""
        },
    ],
}

const PieChart = (props) => {
    const {
        // data,
        // isEmpty,
        width = '500px',
        height = '500px',
        // radius = [fitChartSize(50), fitChartSize(60)], // 饼图的半径
        // title = '',
        // subTitle = '达成率',
        // gradient = false, // 渐变
        // showLable = false,
        // centerTextFontSize = fitChartSize(16)
        // color,
        // value,
        // value2,
        // value3,
        // value4,
        // tooltipShowPercent,
        // unit = '',
    } = props;


    const [option, setOption] = useState(null);

    useEffect(() => {
        setOptionData();
    }, []);

    const setOptionData = () => {
        // 指定图表的配置项和数据
        console.log('    obj.pieDatas', obj)

        obj.PieDatas.forEach((item, i) => {
            obj.series.push({
                startAngle: 0,
                endAngle: 180,
                // radius: ['40%', '70%'],
                center: ['50%', '60%'],
                type: 'pie',
                // clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [(obj.maxRadius - i * (obj.barGap + obj.barWidth)) + '%', (obj.maxRadius - (i + 1) * obj.barWidth - i * obj.barGap) + '%'],
                // center: ["30%", "50%"],
                label: {
                    show: false
                },
                itemStyle: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false
                    },
                    borderWidth: 5,
                },
                data: [{
                    value: 100,
                    itemStyle: {
                        normal: {
                            color: "transparent" // 透明色
                        }
                    }, name: ''
                }, {
                    value: item.value,
                    name: item.name,
                    itemStyle: {
                        color: obj.BarColor[i].color1
                    }
                }, {
                    value: 100 - item.value,
                    name: '',
                    itemStyle: {
                        color: "#f7f7f7",
                    },
                    tooltip: {
                        show: false
                    },
                    hoverAnimation: false
                }]
            })
            // obj.series.push({
            //     startAngle: 0,
            //     endAngle: 180,
            //     // radius: ['40%', '70%'],
            //     center: ['50%', '60%'],
            //     name: 'blank',
            //     type: 'pie',
            //     silent: true,
            //     z: 0,
            //     // clockWise: false, //顺时加载
            //     hoverAnimation: false, //鼠标移入变大
            //     radius: [(obj.maxRadius - i * (obj.barGap + obj.barWidth)) + '%', (obj.maxRadius - (i + 1) * obj.barWidth - i * obj.barGap) + '%'],
            //     // center: ["30%", "50%"],
            //     label: {
            //         show: false
            //     },
            //     itemStyle: {
            //         label: {
            //             show: false,
            //         },
            //         labelLine: {
            //             show: false
            //         },
            //         borderWidth: 5,
            //     },
            //     data: [{
            //         value: 1,
            //         itemStyle: {
            //             // color: "#f7f7f7",//圆圈另一半的颜色
            //             color: "transparent",
            //             borderWidth: 0
            //         },
            //         tooltip: {
            //             show: false
            //         },
            //         hoverAnimation: false
            //     }]
            // });

        })
        obj.option = {
            // startAngle: 180,
            // endAngle: 360,
            grid: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
            },
            backgroundColor: '#fff',
            tooltip: {
                show: true,
                trigger: "item",
            },
            legend: {//右侧文字
                show: true,
                left: '20%',
                top: 'bottom',
                icon: "circle",
                itemWidth: 6,
                itemHeight: 8,
                itemGap: 5,
                textStyle: {
                    //右侧字体样式
                    rich: {
                        bothNameValue: {
                            width: 300,  //给文字设置统一长度，保证右侧的百分比对齐
                        },
                        title: {
                            fontSize: 14,
                            lineHeight: 16,
                            color: '#999999',
                            width: 260,
                        },
                        value: {
                            color: '#489DF7',
                            fontSize: 18,
                            fontFimely: 'DIN Alternate'
                        }
                    }
                },
                formatter: (name) => {
                    var datas = obj.PieDatas;
                    let total = 0;
                    datas.map(item => {
                        total += (item.value - 0)
                    })
                    let valueIndex = datas.map(item => item.name).indexOf(name);
                    let htmlValue = obj.showPercent ? datas[valueIndex].value + "%" : ''
                    return "{title|" + name + "} {value|" + htmlValue + "}"
                    // return name + "  " + (obj.showPercent ? ((datas[valueIndex].value / total) * 100).toFixed(2) + "%" : '');
                },

            },
            series: obj.series,

        }

        setOption(obj.option)
    }

    return <MyChart chartOption={option} width={width} height={height} />;
}

export default PieChart;

MyChart 就是把echarts init封装了一下，自己按官网的示例，把数据塞进去就行了

Echarts实现半圆形饼图，Echarts实现扇形图
weixin_41346436的博客
05-31 1032
【代码】Echarts实现半圆形饼图，Echarts实现扇形图。
echarts实现半圆饼图
chaitong2204的博客
11-01 9335
var myChart = this.$echarts.init(document.getElementById('myChart')) let data = [ { value: 57, name: '半年分配', itemStyle: { normal: { ...
echarts实现地图以及半圆图表
04-15
echarts实现地图以及半圆图表
echart、饼状图半圆实现方法
最新发布
林中明月间丶
03-11 63
下面180°的图形，只是将图形通过rgba(0,0,0,0)隐藏了，在实际场景中需要调整 ​​center: ["50%", "70%"]​​来控制具体的显示方式。
使用echarts实现半圆饼图
qq_43440659的博客
03-20 4507
要实现的效果如下所示： <div id="myChart" :style="{ width: '285px', height: '285px' }"></div> 在mounted里调用如下代码即可。 drawLine() { // 基于准备好的dom，初始化echarts实例 let myChart = this.$echarts.init(document.getElementById("myChart")); // 绘制图表
Echarts实现环状半圆形饼图
江湖行骗老中医
12-09 2913
实现效果 实现代码 option = { backgroundColor: '#fff', title: { text: "设备告警", textStyle: { color: '#000', fontSize: 32, fontWeight: 'bold' ...
echarts分段式视觉映射组件与彩虹图
测试
12-09 650
分段式视觉映射组件：pieces: [ {gt: 1500}, // (1500, Infinity] {gt: 900, lte: 1500}, // (900, 1500] {gt: 310, lte: 1000}, // (310, 1000] {gt: 200, lte: 300}, // (200, 300] {g...
实现绘制百分比半圆饼图
04-01
如果它是一个Swift文件，那么它可能包含了绘制半圆饼图的自定义视图类，包括计算角度、画圆弧、添加标签等功能。如果是Objective-C文件，那么可能有一个名为`PercentageChart`的类别或子类，扩展了`UIView`来实现...
空白中心圆饼图生成示例
用户可以自行添加或修改数据集，以生成符合自己需求的圆饼图。现在，让我们深入地分析与这一主题相关的知识点。 ### 圆饼图基础知识点 1. **圆饼图定义**： 圆饼图是将一个圆分割成若干扇形区域，每个扇形区域的...
C# 控件Chart的 圆饼图百分比
02-14
1. 开发环境： 基于 VS2019 基于C#语言 ... 用C# 控件Chart 画出 圆饼图百分比，很直观 3、源代码解释地址： https://blog.csdn.net/hgaohr1021/article/details/129023432?spm=1001.2014.3001.5502
VC绘制扇形的程序.rar_VC如何画扇形_Vc_c++画扇形_vc扇形_圆饼图
09-23
本教程将重点讲解如何使用VC++来绘制扇形，这是构建圆饼图的基础。圆饼图是一种用于表示数据比例关系的图表，其中每个扇形代表一部分数据，通过扇形的大小可以直观地看出各个部分在整体中的占比。 首先，你需要了解...
flash统计图- flash柱形图- flash圆饼图- flash折线图 多款flash统计图动画
08-06
在Flash中，圆饼图可以添加动画效果，如旋转、渐变色等，使得数据解读更为生动有趣。 4. 折线图：折线图以折线连接数据点，展示了数据随时间的变化趋势。Flash中的折线图可以设置为动态，用户可以交互式地改变时间...
echarts----饼状图（quarter）
grow_的博客
03-15 404
第一步：参考官方示例：https://www.echartsjs.com/examples/zh/editor.html?* 寻找官方的类似示例，给予分析,引入到HTML页面中。* 按照需求来定制它。
Echarts 半圆饼图
weixin_44443380的博客
12-14 718
【代码】Echarts 半圆饼图。
vue中使用echarts实现彩虹图
qq_46130855的博客
09-14 865
实现效果： 组件化实现过程： <template> <e-chart class="pie" theme="customed" :options="pieOption" @click="handleClick"></e-chart> </template> <script> export default { name: 'pieRainbow', props: { mData: { type:
Echarts 实现环状半圆形饼图
程序猿小白的博客
09-04 8282
*可以用整个圆，也可以用半圆，自由发挥即可。有问题可留言 1、效果如下 2、代码实现 // 环状半圆形饼图 var option = { grid: { left: "3%", right: "3%", bottom: "3%", containLabel: true }, series: [ { name: "一般",
如何用echarts画一个好看的饼图
m0_54355172的博客
09-10 8460
详细讲解echarts饼图各项属性，从而绘制出满意的饼图
echarts环形图--彩虹图--蚊香图
YSys12345678的博客
07-12 1537
需要实现的效果图 分析如何实现 1、可以看到这个数据图标不是常规的echarts图，需要从echarts的更多资源去找类似的例子copy，找了一圈还真找到类似的如图： 2、例子找到了，大致也差不多，动手改。 3、两者之间的区别： （1）圈的个数不同、颜色不同 （2）右侧文字字体的样式（字体、颜色等） 上代码 定义变量 //定义要用到的变量： series: [], maxRadius: 90, barWidth: 6, barGap: 2, // sumValue: 0, sh
echarts蚊香图
bidepanm的博客
10-28 596
// 事件处理函数 export default { props: { // 需要传递的数据 data: { type: Array, default() { return [{ name: '本科及以上', value: 13211 }, {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值