echarts环图

最新推荐文章于 2024-05-28 15:45:01 发布
最新推荐文章于 2024-05-28 15:45:01 发布
阅读量159 收藏
点赞数
分类专栏： java 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Theshy08/article/details/114976730
版权 
<!--查询培训状态，培训人数-->
    <select id="selectExternalEcharts" resultType="java.util.Map">
SELECT
          sum(    CASE TRAIN_STATE WHEN   '未培训' THEN 1 ELSE 0 END ) a  ,
          sum(    CASE TRAIN_STATE WHEN   '培训中' THEN 1 ELSE 0 END )  b ,
          sum(     CASE TRAIN_STATE WHEN  	 '培训通过' THEN 1 ELSE 0 END )  c

      FROM ZT_HWBK_RLZYBZGL
      where
              STATUS = '1'
        <if test="ltype != null and ltype != 'null' and ltype != 'undefined' and ltype != '' and ltype != undefined">
            and   EMPLOYEE_TYPE=#{ltype}
        </if>

    </select>
    <!--查询培训状态，各类别的人数-->
    <select id="selectExternalEcharts2" resultType="java.util.Map">
SELECT
				  sum(     CASE EMPLOYEE_TYPE WHEN  	 '海外人员' THEN 1 ELSE 0 END )  aa ,
          sum(     CASE EMPLOYEE_TYPE WHEN  	 '后备人员' THEN 1 ELSE 0 END )  bb ,
			    sum(     CASE EMPLOYEE_TYPE WHEN  	 '在库人员' THEN 1 ELSE 0 END )  cc ,
					sum(     CASE EMPLOYEE_TYPE WHEN  	 '其他人员' THEN 1 ELSE 0 END )  dd

      FROM ZT_HWBK_RLZYBZGL
      where
              STATUS = '1'

     <if test="train != null and train != 'null' and train !='undefined' and train !='' and train !=undefined ">
         and    TRAIN_STATE=#{train}
     </if>

    </select>
   /**
     * 一级页面获类型环形图
     * @return
     */
    @RequestMapping(value = "/getLssData")
    @ResponseBody
    public List<Map> selectExternalEcharts2() {
        List<Map> rateList = new ArrayList<>();
        try{
            Map<String,Object> map = new HashMap<>();
            String train = this.getPara("train");
                map.put("train",train);
            rateList = languageCompetenceDevelopmentService.selectExternalEcharts2(map);
        }catch (Exception e){
            e.printStackTrace();
        }
        return rateList;
    }

    /**

     * 一级页面获取培训状态环形图
     * @return
     */
    @RequestMapping(value = "/getYssData")
    @ResponseBody
    public List<Map> selectExternalEcharts() {
        List<Map> rateList = new ArrayList<>();
        try{
            Map<String,Object> map = new HashMap<>();
            String ltype = this.getPara("ltype");
            map.put("ltype",ltype);
            rateList = languageCompetenceDevelopmentService.selectExternalEcharts(map);
        }catch (Exception e){
            e.printStackTrace();
        }
        return rateList;
    }


    /*echarts图表数据源*/
    function echartsData1(ltype) {
        var dwtype1, ajinum1, bjinum1, cjinum1, djinum1;
        $.ajax({
            type: "get",
            url: "${root!}/haiwaiyuyannenglipeiyang/languageCompetenceDevelopment/getYssData?ltype="+ltype,
            success: function (res) {
                console.log("res==?>"+res);

                        ajinum1 = res[0].A;
                        bjinum1 = res[0].B;
                        cjinum1 = res[0].C;

 
                option1 = {

                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        padding:[0,10,10,20],
                        show: true,
                        top: "20",
                        itemWidth: 10,
                        itemHeight: 10,
                        itemGap: 10,
                        title: '培训',
                        data: ['未培训',  '培训中','培训通过'],
                        icon: "circle",
                        borderRadius: [50, 50, 50, 50],
                        // color: "red",

                    },
                    grid: {
                        //调整整个echars图的大小
                        top: '25%',
                        left: '20%',
                        right: '30%',
                        bottom: '20%',
                        containLabel: true
                    },
                    tooltip: {
                        show: true, //显示提示框
                        formatter: "{a}{b}:{c}个({d}%)",
                    },
                    color: ['#7b86ed', '#f79b03', '#00a2e8'],
                    series: [
                        {
                            name: 'peixun ',
                            type: "pie",
                            radius: ["30%", "55%"],
                            avoidLabelOverlap: true,
                            center: ['50%', '50%'],
                            label: {
                                normal: {
                                    show: true,
                                    position: "",
                                    // color: "#217ef9",
                                    formatter: "数量:{c}\n比例:{d}%",
                                    textStyle: {
                                        fontSize: 10,
                                    }
                                },
                                emphasis: { //选中时候的样式
                                    show: true,
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                borderWidth: 2, //设置border的宽度有多大
                                borderColor: '#fff',
                            },

                            data: [
                                {value: ajinum1, name: '未培训'},
                                {value: bjinum1, name: '培训中'},
                                {value: cjinum1, name: '培训通过'},


                            ]

                        },
                        // 设置值域的标签

                    ]
                }

                //获取dom容器
                var myChart = echarts.init(document.getElementById('ring_charts_03'));
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option1);




            }
        })

    }
    /*echarts图表数据源*/
    function echartsData2(train) {
        var dwtype1, ajinum1, bjinum1, cjinum1, djinum1;
        $.ajax({
            type: "get",
            url: "${root!}/haiwaiyuyannenglipeiyang/languageCompetenceDevelopment/getLssData?train=" +train,
            success: function (res) {
                console.log("res==>"+res);

                        ajinum1 = res[0].AA;
                        bjinum1 = res[0].BB;
                        cjinum1 = res[0].CC;
                        djinum1 = res[0].DD;
                        console.log("ajinum1+>"+ajinum1)
                        console.log("bjinum1+>"+bjinum1)
                        console.log("cjinum1+>"+cjinum1)
                        console.log("djinum1+>"+djinum1)

                //恒大地产
                option1 = {

                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        padding:[0,10,10,20],
                        show: true,
                        top: "20",
                        itemWidth: 10,
                        itemHeight: 10,
                        itemGap: 10,
                        title: '获取类型',
                        data: ['海外人员',  '后备人员','在库人员', '其他人员'],
                        icon: "circle",
                        borderRadius: [50, 50, 50, 50],
                        // color: "red",

                    },
                    grid: {
                        //调整整个echars图的大小
                        top: '25%',
                        left: '20%',
                        right: '30%',
                        bottom: '20%',
                        containLabel: true
                    },
                    tooltip: {
                        show: true, //显示提示框
                        formatter: "{a}{b}:{c}个({d}%)",
                    },
                    color: ['#7b86ed', '#f79b03', '#00a2e8', '#de5037'],
                    series: [
                        {
                            name: '类型',
                            type: "pie",
                            radius: ["30%", "55%"],
                            avoidLabelOverlap: true,
                            center: ['50%', '50%'],
                            label: {
                                normal: {
                                    show: true,
                                    position: "",
                                    // color: "#217ef9",
                                    formatter: "数量:{c}\n比例:{d}%",
                                    textStyle: {
                                        fontSize: 10,
                                    }
                                },
                                emphasis: { //选中时候的样式
                                    show: true,
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                borderWidth: 2, //设置border的宽度有多大
                                borderColor: '#fff',
                            },

                            data: [
                                {value: ajinum1, name: '海外人员'},
                                {value: bjinum1, name: '后备人员'},
                                {value: cjinum1, name: '在库人员'},
                                {value: djinum1, name: '其他人员'},

                            ]

                        },
                        // 设置值域的标签

                    ]
                }

                //获取dom容器
                var myChart = echarts.init(document.getElementById('ring_charts_04'));
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option1);




            }
        })

    }

 

一只小鸟儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中使用echarts制作圆环图的实例代码
10-18
主要介绍了vue中使用echarts制作圆环图的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
使用echarts实现立体-柱状图
07-21
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的...
echarts之环形图
zhangdui2016的博客
10-13 2万+
echarts中环形图就是饼图，区别在于是否定义了图形内部镂空的半径而已，就像下图： 那么现在有了一个圆环，中间如果空着的话就太难看了，所以给了如下的样式： 就是要给圆环中心添加内容。如果是单纯的添加内容的话，有以下三种方式： 1、graphic，是原生图形元素组件。优点是支持多种图形元素，但是如果要实现上图不太合适。因为圆环中心的字体有两种样式，面对多种样式，我能想到的只有富文本。 2、label，支持富文本，实现上图完全没问题，但是人家貌似不是干这个的。。。 如果使用了珍贵的lab
echarts 环形图
aibujin的博客
05-16 1万+
echarts 环形图，多层嵌套，自定义 legend 位置、颜色，中间插入数据及文字，颜色渐变；
封装通用 ECharts 图表组件（三）：环形图实现
最新发布
m0_54340021的博客
05-28 1020
本文详细介绍了封装ECharts环形图组件的步骤和优势。环形图作为一种展示占比关系的有效图表，具有视觉上的吸引力。封装组件不仅可以提高代码复用率，简化维护工作，还能增强组件的灵活性。文章通过实例代码，展示了从引入依赖、创建Vue组件、定义数据、配置计算属性到样式定义的完整流程。计算属性pieOption是核心，它负责生成图表的颜色、网格、提示框和系列等配置。最终，封装后的组件能够在Vue项目中轻松复用，提升开发和维护效率。希望本文能帮助读者深入理解并实现自定义的ECharts组件。
echarts实现环形图
qq_42628504的博客
02-01 647
//职称结构取数 var getsjjg = ['高级', '中级', '初级', '无等级']; var getsjjgrs = [35, 30, 22, 12]; var syjgdata = []; for (var i = 0; i < getsjjg.length; i++) { syjgdata.push({ name: getsjjg[i], value: getsjjgrs[i] }) } var syjgdata2 = []; for.
echarts 饼图 多环
d597180714的博客
12-27 8597
网上找了好多博客，都不是很详细。摸爬滚打一上午，总结一下 相当于series里三个饼图option = { tooltip: { show:false,//防止鼠标移到不需要的数据上弹出label trigger: 'item', formatter: "{a} : {c} ({d}%)" },
echarts 圆环图 中间显示数据 下边显示标题
01-07
echarts 圆环图 中间显示数据 下边显示标题 $(function(){ getqykpnzqdata(qykpnzqjn,qykpnzqqn,wmgdseletj); }) /** * 获得数据并显示echarts图 * idnamejn : 显示今年数据的idname * idnameqn : 显示去年数据...
echarts圆环中间显示文字.docx
01-20
ECharts是目前非常流行的一款基于JavaScript的数据可视化库，它提供了各种图表类型，包括柱状图、折线图、饼图、散点图等。今天，我们来讨论如何使用ECharts在圆环图中间显示文字。 在ECharts中，圆环图是一种常用...
echarts实践总结(常用三)：圆环(特点：圆环、多层嵌套的间隙、标题问题解决)
qq_45796592的博客
03-24 2294
实现单层圆环、多层圆环嵌套的间隙、标题问题解决案例
【ECharts】环形图、饼状图
joanmelon的博客
12-01 1万+
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
【Echarts】echarts饼图、圆环图配置代码详解
做笔记/记录遇到的前端bug
07-01 1万+
图文详解，带你快速了解Echarts饼图、圆环图、多层圆环图。并附上多种常见echarts饼图、圆环图示例及全量代码
ECharts圆环图(详细示例——满满的注释)
热门推荐
GRAY_KEY的博客
06-03 2万+
图表效果如下：具体代码如下：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;圆环图案例&lt;/title&gt; &lt;!-- 引入 ECharts 文件 --&gt; &lt;script src="js/
echarts实现多层环图（复制粘贴即可）
蜗牛~~
07-31 2718
【代码】echarts实现多层环图（复制粘贴即可）
Echarts制作饼图之环状图
个人博客
09-14 8129
环状图初始化Echarts实例设置对应参数最终实现完整代码 详细配置参考官网配置文档：https://echarts.apache.org/zh/option.html#title 初始化Echarts实例 首先在HTML中定义一个容器div用来绘制图像，切记为容器设置适当的宽、高属性。 <div style="width: 100%;height: 100%;" id="ec-sh"> </div> 在项目中引入ECharts JS文件 <script src="..
ECharts 之 环形图
记得笑的博客
12-17 1万+
环形图是饼图的一种，具体的饼图可以自己更改radius属性的大小。 radius : ['50%', '70%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形 效果图： 代码如下： &lt;html&gt; &lt;head&gt; &lt;base href="&lt;%=basePath%&gt;"&gt; ...
ECharts数据可视化（绘制环形图）
weixin_56814370的博客
04-04 1691
绘制环形图和嵌套环形图
echarts 圆环图
06-06
好的，echarts 圆环图是一种数据可视化图表，它可以用来展示数据的占比关系。可以通过 echarts 提供的 API 来设置数据和样式，来生成一个圆环图。下面是一个简单的 echarts 圆环图的示例代码： ```javascript // ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值