v-charts环形图中间设置文字

本是古典何须时尚 2022-12-11 05:25 369阅读 0赞

![在这里插入图片描述][20200928173527803.png_pic_center]  
主要是在`chartExtend`中设置`graphic`，代码如下：

<ve-ring :data="chartData" :settings="chartSettings" :extend="chartExtend">
    </ve-ring>

chartSettings: { 
      label: {  show: false }
    },
    chartExtend: { 
      legend: {  show: false },
      graphic: [{ 
        type: 'text',
        left: 'center',
        top: '45%',
        style: { 
          text: 7,
          textAlign: 'center',
          fill: '#000',
          fontSize: 28,
        }
      }, { 
        type: 'text',
        left: 'center',
        top: '55%',
        style: { 
          text: '请求',
          textAlign: 'center',
          fill: '#999999',
          fontSize: 16,
        }
      }],
      color: ['#67C23A', '#F56C6C']
    },
    chartData: { 
      columns: ['type', 'count'],
      rows: [
        {  type: '成功', count: 5 },
        {  type: '失败', count: 2 }
      ]
    }

[20200928173527803.png_pic_center]: /images/20221123/9e63428ce6544f509ba1fc4ca84cb9a1.png

发表评论取消回复

表情：

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

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

相关阅读

相关 echarts圆饼图设置默认选中项并在中间显示文字

效果：![911071-20190919145009095-1066376304.png][] 代码： var myChart = echarts.init(doc

Bertha 。/ 2023年08月17日 15:38/ 0 赞/ 119 阅读

相关 u-charts环形图

<view class="qiun-charts"> <canvas canvas-id="canvasRing" id="

r囧r小猫/ 2022年12月29日 01:47/ 0 赞/ 185 阅读

相关在vue项目中，完成饼图，并且饼图内外都展示文字

效果展示： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

淩亂°似流年/ 2022年12月20日 08:52/ 0 赞/ 159 阅读

相关 v-charts环形图中间设置文字

![在这里插入图片描述][20200928173527803.png_pic_center] 主要是在`chartExtend`中设置`graphic`，代码如下：

本是古典何须时尚/ 2022年12月11日 05:25/ 0 赞/ 370 阅读

相关 echart 环形饼图设置中心固定信息

UI图 ![2020102815183236.png][] 中间的1/3是固定值不会因为交互而改变使用title 属性来显示中间的信息如将title 的to

矫情吗；*/ 2022年11月20日 09:53/ 0 赞/ 161 阅读

相关文字

╰☆ゞ皮卡皮卡significant otherゞ☆╮ 这一生里，爱我和我爱的，无论给我的是快乐还是痛苦，都是来度我的，使我明白世间悲欢离合。明知道没有结果，却还是禁不住回首

妖狐艹你老母/ 2022年08月09日 06:57/ 0 赞/ 154 阅读

相关 echarts-环形图

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

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

相关（图文）win10 中设置环境变量详细流程

（图文）win10 中设置环境变量详细流程在一些情况下，为了方便执行命令，需要添加或者编辑环境变量。在win10系统中，设置环境变量的方式，与win7类似。因为我

Love The Way You Lie/ 2022年05月24日 03:16/ 0 赞/ 136 阅读

相关绘制文字

绘制文字的步骤 1、继承JPanel 2、重写Paint(Graphics p) 3、 g.setFont(new Font("楷体",Font.BOL

Bertha 。/ 2022年05月09日 15:40/ 0 赞/ 294 阅读

相关 echart双环形图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIw

àì夳堔傛蜴生んèń/ 2021年07月26日 23:24/ 0 赞/ 1194 阅读