echarts组合环形图的参考例子

https://gallery.echartsjs.com/editor.html?c=x6LFNVgmfx 婚姻情况环形图 该例子提取placeHolderStyle公共变量

series: [
                {
                name: ‘Line 4‘,
                type: ‘pie‘,
                clockWise: true,
                hoverAnimation: false,
                radius: [‘65%‘, ‘75%‘],
                itemStyle: dataStyle,

            data: [{
                value: 7645434,
                name: ‘已婚已育‘
            }, {
                value: 3612343,
                name: ‘总数‘,
                tooltip: {
                    show: false
                },
                itemStyle: placeHolderStyle
            }

            ]
        }, {
            name: ‘Line 3‘,
            type: ‘pie‘,
            clockWise: true,
            radius: [‘50%‘, ‘60%‘],
            itemStyle: dataStyle,
            hoverAnimation: false,

            data: [{
                value: 2632321,
                name: ‘已婚未育‘
            }, {
                value: 2212343,
                name: ‘总数‘,
                tooltip: {
                    show: false
                },
                itemStyle: placeHolderStyle
            }]
        }, {
            name: ‘Line 2‘,
            type: ‘pie‘,
            clockWise: true,
            hoverAnimation: false,
            radius: [‘35%‘, ‘45%‘],
            itemStyle: dataStyle,

                    data: [{
                        value: 1823323,
                        name: ‘未婚‘
                    }, {
                        value: 1812343,
                        name: ‘总数‘,
                        tooltip: {
                            show: false
                        },
                        itemStyle: placeHolderStyle
                    }]
                },
                {
                    name: ‘Line 1‘,
                    type: ‘pie‘,
                    clockWise: true,

                    radius: [‘20%‘, ‘30%‘],
                    itemStyle: dataStyle,
                    hoverAnimation: false,

                    data: [ {
                        value: 1342221,
                        name: ‘学生‘
                    },{
                        value:1912343,
                        name: ‘总数‘,
                        tooltip: {
                            show: false
                        },
                        itemStyle: placeHolderStyle
                    }

                    ]
                }
            ]

https://gallery.echartsjs.com/editor.html?c=xrD67xXLT9 3/4圆环图 该例子根据data的长度,动态改变radius值。

    var res = {
        series: [],
        yAxis: []
    };
    for (let i = 0; i < data.length; i++) {
        res.series.push({
            name: ‘学历‘,
            type: ‘pie‘,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [65 - i * 15 + ‘%‘, 57 - i * 15 + ‘%‘],
            center: ["30%", "55%"],
            label: {
                show: false
            },
            itemStyle: {
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                },
                borderWidth: 5,
            },
            data: [{
                value: data[i].value,
                name: data[i].name
            }, {
                value: sumValue - data[i].value,
                name: ‘‘,
                itemStyle: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }]
        });
        res.series.push({
            name: ‘‘,
            type: ‘pie‘,
            silent: true,
            z: 1,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [65 - i * 15 + ‘%‘, 57 - i * 15 + ‘%‘],
            center: ["30%", "55%"],
            label: {
                show: false
            },
            itemStyle: {
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                },
                borderWidth: 5,
            },
            data: [{
                value: 7.5,
                itemStyle: {
                    color: "#E3F0FF",
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }, {
                value: 2.5,
                name: ‘‘,
                itemStyle: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }]
        });
        res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + "%");
    }
    return res;
    }

原文地址:https://www.cnblogs.com/qtx-/p/11675366.html

时间: 2024-11-11 23:34:20

echarts组合环形图的参考例子的相关文章

echarts白色实心环形图(空心饼图)的编写

// 数据接入机构统计let myDom = document.getElementById('myChart');let myWidth = myDom.offsetWidth - 5; // 获取容器宽度let myHeight = myDom.offsetHeight - 5; // 获取容器高度let myRadius = myHeight * 0.44 / 2; // 根据环形图内圈百分比获取内圆半径let myPX = (0.3 - (myRadius / myWidth)) * 1

环形图 自定义(一)

需求:自定义环形图(饼图),实现2项数据配比显示; 效果图: 实现分析: 1.目录结构: 代码实现: 1. color.xml <?xml version="1.0" encoding="utf-8"?> <resources> <!-- 饼图 --> <color name="pie_progress_bank">#fd8f8b</color> <color name="

Jfreechart创建环形图

package com.lyf.iaqms; import java.awt.Color; import java.awt.Font; import org.jfree.chart.ChartFactory; import org.jfree.chart.ChartFrame; import org.jfree.chart.JFreeChart; import org.jfree.chart.StandardChartTheme; import org.jfree.chart.axis.Numb

数据输入——生成你需要的echart图(堆积柱状图、扇形图、嵌套环形图)

最近论文需要一些比较直观的图表, 发现echart做出来的图还是比较美观的,这里介绍如何修改数据生成你需要的echart图. 1.堆积柱状图: http://echarts.baidu.com/examples/editor.html?c=bar-stack 以上的类型的颜色是自动分配的,stack属性可以将同一类型的数据放在一个矩形图中. 2.扇形图 http://echarts.baidu.com/examples/editor.html?c=pie-legend 1---->随机生成扇形图

echart 折线图、柱状图、饼图、环形图颜色修改

之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: [javascript] view plain copy xAxis: { type: 'category', boundaryGap: false, data: ['年龄','20岁以下','30岁','40岁','50岁','60岁','60岁以上'] }, yAxis: { type: 'value' }, series: [ { name:'员工

iOS 画环形图

由于新项目的的需求,需要画环形图,由于以前都没接触过这一类(我是菜鸟),去cocochina山找到了一个案例,个人觉得还可以,分享一下 github 地址https://github.com/zhouxing5311/ZZCircleProgress 这个使用起来非常的简单 作者开放了很多接口,可以根据自己的需求进行更改 一般就是声明一个累类就Ok了 具体实现的代码如下 可能我的代码有点不一样,我自己加入了一些元素进去 //无小圆点.同动画时间 self.zzCircleProgress = [

demo: 全页面CSS3动画的一个参考例子

全页面CSS3动画的一个参考例子: http://wow.blizzard.cn/wow/wod-achievement/ 魔兽的一个活动页 第二页.第三页,文字进入页面 <script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script> <input type="button" value="3屏显示" id="btn31&

selenium python bindings 初步用法及简单参考例子

掌握selenium最简单的方法就是参考例子进行学习,下面给出之前项目的测试例子及分析 # -*- coding: utf-8 -*- import time from selenium import webdriver # 使用firefox浏览器来展示效果,创建了selenium WebDriver的实例 driver = webdriver.Firefox() #driver.get方法打开测试网址 127.0.0.1:8000/ChasingSomeone driver.get('htt

Sliverlight实例之 绘制扇形和环形图

原文:Sliverlight实例之 绘制扇形和环形图 未解决: 1,任意偏角,是个重点问题: (1),  另一边在弧上坐标 (2),  这个弧的弧度(ArcSegment中的Size或Angle属性) (3),  如何把这个弧度做成依赖属性配置的 2,做成一个自定义控件 有时间,再完成 准备知识: 1,  平面几何思维(三角形,圆,弧,曲线,斜率,方程式) 2,  三次贝塞尔曲线的数学公式 3,  定时器与动画的区别是时间序列 4,  缓动动画   一,1道几何题 已知两点坐标确定一条直线,直线