精华内容
下载资源
问答
  • echarts环形图显示百分比
    2022-01-15 16:30:29

    echarts环形图按照数据显示在整个图表上的占比情况,比如下图所示
    在这里插入图片描述
    代码如下:

    let option = {
            title: {
              text: "90%",
              x: "center",
              y: "center",
              textStyle: {
                fontWeight: "normal",
                color: "#fff",
                fontSize: "20",
              },
            },
            tooltip: {
              formatter: function (params) {
                return params.name + ":" + params.percent + " %";
              },
              show: false,
            },
            legend: {
              show: false,
              itemGap: 12,
              data: ["占比", "剩余"],
            },
    
            series: [
              {
                name: "内环",
                type: "pie",
                clockWise: true,
                radius: ["45", "55"],
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
                hoverAnimation: false,   //取消鼠标悬浮放大的效果
                data: [
                  {
                    value: '90',   //实际占比的数据
                    name: "占比",
                    itemStyle: {
                      normal: {
                        color: "#6bb136",  //绿色区域
                        label: {
                          show: false,
                        },
                        labelLine: {
                          show: false,
                        },
                      },
                    },
                  },
                  {
                    name: "剩余",
                    value: 100 - 90,
                    itemStyle: {
                      normal: {
                        color: "rgba(108,119,122,0.3)",   //灰色区域
                      },
                    },
                  },
                ],
              },
              {
                name: "外环",
                radius: ["60", "65"],
                type: "pie",
                hoverAnimation: false,  //取消鼠标悬浮放大的效果
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
                data: [
                  {
                    name: "",
                    // value: handred - point, 
                    value: 100 - 90,
                    itemStyle: {
                      normal: {
                        color: "rgba(108,119,122,0.3)",
                      },
                    },
                  },
                ],
              },
            ],
          };
    
    更多相关内容
  • echarts环形图显示百分比

    万次阅读 2019-10-17 10:14:31
    echarts 环形图 var ring = echarts.init(document.getElementById('main1')); var labelTop = {开发 normal: { label: { show: true, position: 'ce...

    效果图

    echarts 环形图

    let myChart = this.$echarts.init(document.getElementById("userChart"));
    //myChart.clear() 如果需要动态加载的需要加这个,在每次加载的时候清除画布
          myChart.setOption({
            tooltip: {
              trigger: "item",
              formatter: '{d}%\n{b}',
            },
            //标题
            title: {
                text: '智工用户统计',
                top: "15px",
                left: "18px"
            },
            //图例组件
            legend: {
                orient: 'vertical',
                x:'right',
                padding:[20,20,0,0], 
                selectedMode: false,
                icon:"circle",
                align:'left',
            },
            //全局颜色样式
            color: ["#C6E2FF", "#76B5F5", "#409EFF", "#166AC1","#68A4E2","#68A4E2"],
            series: [
              {
                name: "地区交易金额",
                type: "pie",
                radius: ["40%", "52%"],//圆环大小
                center: ["44%", "50%"],//图表的位置
                avoidLabelOverlap: false,//是否启用防止标签重叠策略
                hoverAnimation:false,//动画效果
                label: {
                  formatter: '{d}%',// 显示百分比,
                },
                // 指示折现
                labelLine: {
                  normal: {
                    show: true,
                    legend: 8,//第一条折现
                    legend2: 15,//第二条折现
                    lineStyle: {
                      color: "#166AC1"//折现颜色
                    },
                  }
                },
                data: [
                  { value: 335, name: "上海" },
                  { value: 310, name: "北京" },
                  { value: 234, name: "乌鲁木齐" },
                  { value: 135, name: "积极哈尔" }
                ]
              }
            ]
          });
    

    以上为环形图代码

    在HTML中设置一个名为 main1 的容器,设置宽高

    formatter: ‘{d}%\n{b}’,
    let ring = this. e c h a r t s . i n i t ( t h i s . echarts.init(this. echarts.init(this.refs.chart); // 绘制图表

    展开全文
  • echarts环形图 百分比

    千次阅读 2020-11-16 09:53:10
    "gauge", center: ["50%", "50%"], radius: '85%', splitNumber: 10, axisLine: { lineStyle: { color: [ [ e / 100, new echarts.graphic....

    在这里插入图片描述

    var e=80
    option={
    
    							grid: {
    								top: 0,
    								bottom: 0,
    								left: 0,
    								right: 0
    							},
    							title: [{
    								text: e +'%',
    								x: '50%',
    								y: '37%',
    								textAlign: 'center',
    								textStyle: {
    									fontSize: '18',
    									color: '#fff',
    									textAlign: 'center',
    								},
    							}, {
    								text: '所含成分占比',
    								left: '48%',
    								top: '52%',
    								textAlign: 'center',
    								textStyle: {
    									fontSize: '10',
    									fontWeight: '400',
    									color: '#7D8CB5',
    									textAlign: 'center',
    								},
    							}, ],
    							polar: {
    								radius: ['85%', '75%'],
    								center: ['50%', '50%'],
    							},
    							angleAxis: {
    								max: 100,
    								show: false,
    							},
    							radiusAxis: {
    								type: 'category',
    								show: true,
    								axisLabel: {
    									show: false,
    								},
    								axisLine: {
    									show: false,
    
    								},
    								axisTick: {
    									show: false
    								},
    							},
    
    							series: [{
    									name: "内部进度条",
    									type: "gauge",
    									center: ["50%", "50%"],
    									radius: '85%',
    									splitNumber: 10,
    									axisLine: {
    										lineStyle: {
    											color: [
    												[ e / 100, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
    															offset: 0.1,
    															color: "#2FA0FF"
    														},{
    															offset: 1,
    															color: "#45FFE7"
    														}
    													])],
    													[1, "#253F65"]
    												],
    												width: 6
    											}
    										},
    										axisLabel: {
    											show: false,
    										},
    										axisTick: {
    											show: false,
    
    										},
    										splitLine: {
    											show: false,
    										},
    										itemStyle: {
    											show: false,
    										},
    										detail: {
    											show: false,
    										},
    										label: {
    											show: false
    										},
    										title: { //标题
    											show: false,
    										},
    										data: [{
    											name: "title",
    											value: e,
    										}],
    										pointer: {
    											show: false,
    										},
    									},
    									{
    										type: 'gauge',
    										radius: '65%',
    										clockwise: false,
    										startAngle: '90',
    										endAngle: '-269.9999',
    										backgroundColor: '#051F54',
    										//调整间隔距离
    										splitNumber: 40,
    										detail: {
    											offsetCenter: [0, -40],
    											formatter: ' '
    										},
    										pointer: {
    											show: false
    										},
    										axisLine: {
    											show: true,
    											lineStyle: {
    												color: '#253F65',
    												width: 10,
    												backgroundColor: '#051F54',
    											}
    										},
    										axisTick: {
    											show: false
    										},
    										splitLine: {
    											show: true,
    											length: 12,
    											lineStyle: {
    												color: '#1c304d',
    												backgroundColor: '#051F54',
    												width: 2
    											}
    										},
    										axisLabel: {
    											show: false
    										}
    									},
    
    
    								]
    							}
    
    
    
    methods:{
    getdata()  {
    				for (var i = 0; i < 150; ++i) {
    					this.labelData.push({
    						value: 1,
    						name: i,
    						itemStyle: {
    							normal: {
    								color: 'rgba(0,209,228,0)',
    							}
    						}
    					});
    				}
    				for (var i = 0; i < this.labelData.length; ++i) {
    					if (this.labelData[i].name < 50) {
    						this.labelData[i].itemStyle = {
    							normal: {
    								color: '#5467df'
    							},
    
    						}
    					}
    				}
    				for (var i = 0; i < 150; ++i) {
    					this.labelData1.push({
    						value: 1,
    						name: i,
    						itemStyle: {
    							normal: {
    								color: 'rgba(0,209,228,0)',
    							}
    						}
    					});
    				}
    				for (var i = 0; i < this.labelData1.length; ++i) {
    					if (this.labelData1[i].name < 150) {
    						this.labelData1[i].itemStyle = {
    							normal: {
    								color: '#251f45'
    							},
    
    						}
    					}
    				}
    
    			},
    }
    
    	mounted() {
    			this.getdata()
    
    		},
    
    展开全文
  • let p = Math.round(((faultVal / total) * 100))//计算百分比 函数回调: formatter:function (name){ let data = option.series[0].data; console.log(data); let total =0; let faultVal; for (let i = 0;i ; i+...

    知识点:Math.round()与toFixed()有所不同。虽然都是四舍五入,但是前者只能取整数,返回的是数字,后者可自定义小数位数,返回的是字符串(string)类型。
    在这里插入图片描述

     let p = Math.round(((faultVal / total) * 100))//计算百分比
    

    在这里插入图片描述
    函数回调:

     formatter:function (name){
                    let data = option.series[0].data;
                    console.log(data);
                    let total =0;
                    let faultVal;
                    for (let i = 0;i < data.length; i++){
                        total += data[i].value;//总数
                        if(data[i].name == name){
                            faultVal = data[i].value;
                        }
                        let v = faultVal;
                        //let p = Math.round(((faultVal / total) * 100))//计算百分比
                        let p = Math.round(((faultVal / total) * 100)).toFixed(2);
                        console.log(faultVal)
                        return `${name} ${v} ${p}%`
                    }
                }
    

    完整代码:

    legend: {
                top:'12%',
                right: '3.5%',
                orient : 'vertical',
                icon: "rect",
                itemHeight: 12,
                itemGap:1,
                textStyle: { //图例⽂字的样式
                    color: '#BACEE3',
                    fontSize: 14
                },
                formatter:function (name){
                    let data = option.series[0].data;
                    console.log(data);
                    let total =0;
                    let faultVal;
                    for (let i = 0;i < data.length; i++){
                        total += data[i].value;
                        if(data[i].name == name){
                            faultVal = data[i].value;
                        }
                        let v = faultVal;
                        let p = Math.round(((faultVal / total) * 100))
                        console.log(faultVal)
                        return `${name}  ${p}%`
                    }
                }
    
    展开全文
  • Echarts图表自定义图例
  • echarts环形图百分比

    千次阅读 2020-07-21 17:34:58
    整理一些echarts中比较有个性的 效果: 实现代码: option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['...
  • <div id="chartmainbarCircle"></div> data(){ return{ // 环形图数据 data8:[ {value: 335, name: '优秀'}, {value: 310, name: '良好'}, {value: 234, name: '合格'}, .
  • 请问这种用哪种type好画一点,只有一组数据,要有圆角和渐变色
  • Echarts 环形图 自定义配置

    千次阅读 2021-08-30 17:51:17
    1、从echarts官网上复制一个最基本的饼图 2、在series中设置饼图的半径 和 饼图的中心(圆心)坐标 形成圆环 3、设置圆环渐变色 color 、径向渐变 4、图例说明与图表呈横向排列,设置:legend 细节点: (1)图例的...
  • Echarts 环形图 颜色渐变

    千次阅读 2021-01-11 15:09:02
    Echarts 环形图 颜色渐变
  • 环形图绘制并让其中间显示数值总数
  • echarts创建一个环形百分比图

    千次阅读 2021-08-11 10:57:21
    echarts创建一个环形百分比图 效果如: 实现这样一个环形百分比,基本type是使用的饼状。 源码如下: const pieConf = { title: { text: '40%', left: 'center', top: 61.5, textStyle:{ color:'#1890fe'...
  • vueecharts环形百分比且渐变色。
  • 可以查看官方文档:https://www.echartsjs.com/option.html#series-pie 在series中添加代码: label: { show:false, formatter:'{b}\n{c}', position: 'center', ...
  • 在使用echarts图表工具时,有一些小细节往往不容易实现,例如,使用环形图时,图形是默认居中的 ,左侧就会冗余一大片空白,比如这样: 这个时候,如果想要去掉这片空白,只需要添加一行代码即可: name:'访问来源',...
  • echarts-环形图中心显示文字(二)

    万次阅读 2019-03-29 15:21:07
    {d}:百分比,可以自定义显示内容, rich:{ a:{ color:'#03a9f4', padding:[0,10], fontSize:40 }, b:{ color:'red', padding:[0,10], fontSize:20 }, } } }, labelLine: { normal: { show: false } }, data:[{ ...
  • echarts中环形扇形图的写法__legend图例格式化显示__legend显示所占百分比__环形图内部显示文字并自定义样式
  • echarts占比环形图

    2022-03-03 08:57:48
    radius: ['13%', '15%'], center:['30%','50%'], avoidLabelOverlap: false, color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#83fbfc' }, { offset: 0.5, color: '#6bdafe' },{ ...
  • 当文字太过于长时,会直接将后方的百分比和相关数值给遮挡。这时就需要在legend:{}里面进行相关的操作 legend: { // 图例显示数据 formatter: function(params) { if (!v.name) return ''; if (v.name.length &...
  • 2. 环形图代码如下 vue引入echarts:https://blog.csdn.net/qq_34790644/article/details/119932743 1. 中间字设置是 title ,数据内部显示文字是series中的label,图例是legend var sxechart=this.$echart....
  • echarts环形图的牵引线及文字位置

    千次阅读 2019-06-20 13:42:11
    1.去掉边框和百分比 2.文字上移至牵引线的上方 ...app.title = '环形图'; option = { tooltip: { trigger: 'item', formatter: " {b}:{c} " // ({d}%) 代表该模块所占圆环比例 // for...
  • //圆形echarts占比 makeUpEcharts(el, makeUp_val) { let color = ['#EAF1FF', '#73A0FA'];//圆环两色 let echartData = [{ value: 100 - makeUp_val }, { value: makeUp_val } ]; let formatNumber =...
  • 效果: 实现关键: radius: [‘30%’, ‘45%’], // 饼图的半径,外半径为可视区尺寸(容器高宽中较...30%为内圈大小,45%为外圈,中间15%就是环形图大小 该配置项是写在series:[{radius: [‘30%’, ‘45%’]}]里 ...
  • vue echarts饼图环形 (随着legend动态显示数据总数)
  • Echarts 实现环形进度

    千次阅读 2021-11-04 16:48:35
    实现效果 <div id="mainBottomLeft" style="flex: 2;... const myChart = echarts.init(document.getElementById('mainBottomLeft')); // 指定图表的配置项和数据 let data = 80; let option = { title: {
  • 基础饼图 饼图主要用于表现不同类目的数据在总和中的占比。...饼状图显示信息,内容,值,百分比显示的代码 series: [{ name: '产品成本', type: 'pie', radius: '55%', center: ['50%', '50%'], dat...
  • Echarts 实现圆角环形图

    万次阅读 多人点赞 2019-12-12 09:17:01
    Echarts实现圆角环形图,注意Echarts版本要≥4.5.0
  • 本篇文章给大家带来的内容是关于echarts环形图点击旋转并高亮的实现方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。通过计算某个扇形区域的值占整个圆的百分比来得到这个扇形的角度,...
  • 1、柱状 <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div ref="myEcharts" id="main" style="width: 600px;height:400px;"></div> mounted(){ this.myEacharts() }, methods:{ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 618
精华内容 247
热门标签
关键字:

echarts环形图显示百分比