精华内容
下载资源
问答
  • echarts环形图百分比
    2022-07-15 16:31:12

    vue echarts环形百分比且渐变色

    在这里插入图片描述

    组件界面circleStatistic2.vue

    <template>
      <div style="height:100%;width:100%;">
        <div id="myCharted" :style="{ width: '100%', height: '100%' }"></div>
      </div>
    </template>
    <script>
    import * as echarts from 'echarts'
    export default {
      props: {
        // 从引用页面传入的数据
        item: {
          typeof: Object,
          default: function () {
            return []
          }
        }
      },
      data () {
        return {
        }
      },
      mounted () {
        this.drawLine()
      },
      methods: {
        drawLine () {
          console.log(this.item)
          // 数据处理
          const changeHealthData = this.item
          const decimal = changeHealthData.processed / (changeHealthData.untreated + changeHealthData.processed)
          const percentage = Math.round(100 * decimal)
          // 基于准备好的dom,初始化echarts实例
          const myChart = echarts.init(document.getElementById('myCharted'))
          myChart.setOption({
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)',
              textStyle: {
                fontSize: 36
              }
            },
            title: {
              text: percentage + '%',
              left: 'center',
              top: 81.5,
              textStyle: {
                fontSize: 36,
                color: '#ffffff'
              }
            },
            // 设置不需要的部分的颜色
            color: ['rgba(255, 255, 255, 0.2)'],
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: 'center'
                  }
                },
                labelLine: {
                  show: false
                },
                data: [
                  {
                    value: changeHealthData.processed,
                    name: '直接访问',
                    itemStyle: {
                      normal: {
                        // 渐变色设置
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                          {
                            offset: 0,
                            color: '#ff6fb7'
                          },
                          {
                            offset: decimal,
                            color: '#2555db'
                          }
                        ])
                      }
                    }
                  },
                  {
                    value: changeHealthData.untreated,
                    name: '邮件营销'
                  }
                ]
              }
            ]
          })
          window.onresize = myChart.resize
        }
      }
    }
    </script>
    <style lang="less" scoped>
    </style>
    
    

    引用页面(传入参数)

    <template>
    // 传入参数item
        <div class="total">
        // 引用页面
          <circleStatisticaVue :item="item"></circleStatisticaVue>
        </div>
    </template>
    
    <script>
    import circleStatistic2Vue from '../echartsComponent/circleStatistic2.vue'
    
    export default {
      name: 'totalUser',
      data () {
        return {
          item: {
            processed: 190,
            untreated: 120
          }
        }
      },
      components: {
      // 作为组件
        circleStatistic2Vue
       }
    }
    </script>
    
    <style>
    // 记得设置父元素的长宽
    .total {
        font-family: DIN;
        font-size: 68px;
        font-weight: bolder;
        letter-spacing: 2px;
        padding: 10px 0;
        height: 200px;
        width: 100%;
      }
    </style>
    
    更多相关内容
  • 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()
    
    		},
    
    展开全文
  • 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图表自定义图例

    项目场景:

    在展示图表的时候 有的时候需要图例也展示出一些内容来,例如这样子:
    在这里插入图片描述


    描述

    普通的图例一般只是这样在这里插入图片描述

    但我们希望展示更多的信息,于是需要使用一个东西:字符串模板:formatter


    解决方案:

    直接上代码

    在 data() 中定义一个对象, 可以设置图例的一些样式和位置

     data() {
        return {
          legendData: {
            orient: 'vertical',
            left: '40%',
            top: 'center',
            icon: 'circle', // 图例色块是方还是圆
            itemGap: 20,
            itemWidth: 8,
            padding: 0,
            selectedMode: false,
            triggerEvent: true,
            textStyle: { // 字符串模板
              rich: {
                a: {
                  align: 'left',
                  color: '#19273B',
                  width: 130,
                  padding: [0, 8, 0, 0]
                },
                b: {
                  align: 'left',
                  color: '#8D97A4',
                  width: 55,
                  padding: [0, 8, 0, 0]
                },
                c: {
                  align: 'left',
                  color: '#19273B'
                }
              }
            }
          }
        }
      }
    

    具体图的代码

        //环形图
        initCircularChart() {
          var echarts = require('echarts')  // 初始化
          var circularChart = document.getElementById('circularChart') // 对应地使用ByClassName
          // 处理图例中的数据
          const _that = this
          _that.legendData.formatter = function(name) {
              // _that.reasonInfoList 环形图的数据
              let str = ''
              let rate
              let value
              for (let i = 0; i < _that.reasonInfoList.length; i++) {
                  if (_that.reasonInfoList[i].name === name) {
                      rate = toThousandFilter(_that.reasonInfoList[i].rate * 100) // 这里我处理了一下百分数
                      value = _that.reasonInfoList[i].value
                      str = `{a|${name}} {b|${rate}%} {c|${value}}`
                      return str // 因为只能返回一个值 所以将一行数据拼成一个字符串
                  }
              }
          }
          var myChart = echarts.init(circularCharts, walden)// walden: 主题
              myChart.setOption({
                title: {
                  text: '失败原因', // 图的名字
                  left: 'left',
                  triggerEvent: true
                },
                legend: this.legendData, // 图例直接引用
                series: [{
                  type: 'pie',
                  radius: [45, 65],
                  center: ['20%', '50%'],
                  hoverAnimation: false, // true 鼠标移入会放大
                  label: { // 环形图中间部分显示所有的总数
                    show: true,
                    position: 'center',
                    fontSize: '12',
                    formatter: `{a|${failedOrderNum}}` + '\n' + `{b|${'订单总数'}}`,
                    rich: {
                      a: {
                        color: '#19273B'
                      },
                      b: {
                        color: '#8D97A4'
                      }
                    }
                  },
                  data: this.reasonInfoList, // 所有数据的数组
                  stillShowZeroSum: true // 是否在数据和为0(一般情况下所有数据为0) 的时候仍显示扇区
             }]
          })
        }
    

    上效果图

    在这里插入图片描述

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

    千次阅读 2020-07-21 17:34:58
    整理一些echarts中比较有个性的 效果: 实现代码: option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['...
  • 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' },{ ...
  • Echarts 环形图 颜色渐变

    千次阅读 2021-01-11 15:09:02
    Echarts 环形图 颜色渐变
  • Echarts 环形图 自定义配置

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

    千次阅读 2021-08-11 10:57:21
    echarts创建一个环形百分比图 效果如: 实现这样一个环形百分比,基本type是使用的饼状。 源码如下: const pieConf = { title: { text: '40%', left: 'center', top: 61.5, textStyle:{ color:'#1890fe'...
  • 在使用echarts图表工具时,有一些小细节往往不容易实现,例如,使用环形图时,图形是默认居中的 ,左侧就会冗余一大片空白,比如这样: 这个时候,如果想要去掉这片空白,只需要添加一行代码即可: name:'访问来源',...
  • 首先引入Echarts图,在项目中安装或者直接在线引入 封装代码如下: <template> <div id="main" style="width: 600px; height: 400px"> <span>fdfd</span> </div> </template>...
  • 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环形图点击旋转并高亮的实现方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。通过计算某个扇形区域的值占整个圆的百分比来得到这个扇形的角度,...
  • echarts环形图标签样式formatter设置

    千次阅读 2020-02-22 22:20:58
    先看效果 这是echarts官网上的一个示例,直接看option: option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left...
  • 1、柱状 <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div ref="myEcharts" id="main" style="width: 600px;height:400px;"></div> mounted(){ this.myEacharts() }, methods:{ ...
  • 最近在工作项目中用到echarts进行制作一个环形图表,在网上查询了很多属性最终才制作成功,因此想总结一下,方便以后使用(第一次写博客,是不是这样写的哦)  导入echarts.js啥的就不说了,直接开始配置属性。 ...
  • 当文字太过于长时,会直接将后方的百分比和相关数值给遮挡。这时就需要在legend:{}里面进行相关的操作 legend: { // 图例显示数据 formatter: function(params) { if (!v.name) return ''; if (v.name.length &...
  • 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+...
  • 修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦。有问题可以留言。 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说。 app.title = '嵌套...
  • 环形图绘制并让其中间显示数值总数
  • Ĵ近日做项目需要用到echarts环形图,但官网原生样式无法满足需求,故将样式进行修改,效果图如下: 官网原图: 我需要修改的: 1.去掉边框和百分比 2.文字上移至牵引线的上方 3.自定义样式 代码如下 ...
  • 1、自定义提示的环形图 this.ring_dom = this.$refs.ring const myRing = this.$echarts.init(this.ring_dom) let total this.total < 10 ? (total = ' ' + this.total) : (total = this.total) const ...
  • 点击进去
  • echarts 饼状图(环形图) 笔记

    千次阅读 2018-09-29 17:52:24
    最近项目中用到图表展示,由于项目中之前已经用到echarts,于是就在echarts中找了一个跟UI界面比较像的拿来使用。 直接上代码说项目吧。 1、先引用相关js文件,可以在script脚本中直接引用。 2、然后写相关后台...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 575
精华内容 230
关键字:

echarts环形图百分比

友情链接: 1602.rar