echarts环状图

冷不防 2022-06-08 08:42 287阅读 0赞

依赖：见echarts柱状图  
[http://blog.csdn.net/zk\_1325572803/article/details/78041389][http_blog.csdn.net_zk_1325572803_article_details_78041389]

body中

<div id="main_s" style="height:192px;position:absolute;top:15%;left:52%;width:720px;"></div>

javascript

function huan(){ 
        //基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main_s'));
        var option = {
                title : {  
                text: kssj+"至"+jssj+"全部运动物占比情况", 
                textStyle: {
       //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                       fontSize: 13,
                       fontStyle: 'normal',
                       fontWeight: 'bold',
                 },
                 x:"center"  
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x:'15',
                    y:'15',
                    data:[车,两轮车,其他,行人]  //数组
                },
                series: [
                    {
                        name:'运动物类型:',
                        type:'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {   //视觉引导线
                                show: true,
                                position: 'right'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '17',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: "#FFFFFF", 
                                borderWidth: 1, 
                                label:{  
                                    show:true,  
                                    formatter:'{b} : {c} ({d}%)'  
                                },  
                            }
                        },
                        data:[100,200,300,400] //数组
                    }
                ]
            };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

效果图  
![这里写图片描述][SouthEast]

[http_blog.csdn.net_zk_1325572803_article_details_78041389]: http://blog.csdn.net/zk_1325572803/article/details/78041389
[SouthEast]: /images/20220608/a7cf495d36c84a3898fdc6656ed61ed9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，287人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts 画饼状U形环状占比图

export function echarts100(){ let option = { angleAxis: { ma

喜欢ヅ旅行/ 2023年07月24日 02:36/ 0 赞/ 1 阅读

相关 echarts环状饼图默认选中且图例可点击选择二次封装

核心库 echarts lodash ResizeListener 代码 <!-- @Author: your name

刺骨的言语ヽ痛彻心扉/ 2022年12月27日 06:28/ 0 赞/ 754 阅读

相关 echarts实现颜色渐变的环状图（包括自定义各种配置项的属性）

文章转载自：[https://blog.csdn.net/qq\_27387133/article/details/104775880][https_blog.csdn.ne

分手后的思念是犯贱/ 2022年12月15日 11:20/ 0 赞/ 579 阅读

相关 echarts-组合图

![这里写图片描述][SouthEast] <!DOCTYPE html> <html lang="en"> <head> <meta

布满荆棘的人生/ 2022年06月08日 09:46/ 0 赞/ 283 阅读

相关 echarts-环形图

![这里写图片描述][SouthEast] <!DOCTYPE html> <html lang="en"> <head> <meta

我不是女神ヾ/ 2022年06月08日 09:41/ 0 赞/ 283 阅读

相关 echarts环状图

依赖：见echarts柱状图 [http://blog.csdn.net/zk\_1325572803/article/details/78041389][http_blo

冷不防/ 2022年06月08日 08:42/ 0 赞/ 288 阅读

相关环状序列

前言没什么好说的了，哈哈，现在快凌晨一点了，为了晚上睡觉不梦见做题，把这个问题还是解决了环状序列问题描述长度为n的环状串有n种表示法，分别为某个位置开始顺时

￡神魔★判官ぃ/ 2022年05月28日 03:49/ 0 赞/ 179 阅读

相关 echarts 雷达图

var evalateStaTableOption = { title: { // text: '基础雷达图'

浅浅的花香味﹌/ 2022年01月06日 00:45/ 0 赞/ 392 阅读

相关 Echarts实现环状半圆形饼图

实现效果 ![format_png][] 实现代码 option = { backgroundColor: 'fff', titl

系统管理员/ 2021年07月26日 15:21/ 1 赞/ 2484 阅读

相关 echarts 雷达图

1、配置数据 (1)配置各个边角极限值 var dataMax=[{name:'名称',max:最大值}] (2)配置展示

骑猪看日落/ 2021年07月24日 19:32/ 0 赞/ 840 阅读