设计图中需要在环形图中加个外环中浅浅的圈圈,想了许多办法之后发现,只要在series中再加一组数据,内环的外半径等于外环的内半径,data的value设置成一样就好啦

series: [{name: "观看次数",type: "pie",startAngle: 0,radius: [42, 64],label: {show: false,},data: [{value: 55,name: "3次",itemStyle: {color: "#407aff",},},{value: 25,name: "2次",itemStyle: {color: "#8068e3",},},{value: 15,name: "1次",itemStyle: {color: "#feb202",},},{value: 5,name: "0次",itemStyle: {color: "#f16548",},},],},{name: "观看次数",type: "pie",startAngle: 0,radius: [36, 42],label: {show: false,},data: [{value: 55,name: "3次",itemStyle: {color: "#78a1ff",},},{value: 25,name: "2次",itemStyle: {color: "#a594ea",},},{value: 15,name: "1次",itemStyle: {color: "#feca51",},},{value: 5,name: "0次",itemStyle: {color: "#f5937f",},},],},],

echarts 环形图内部加个圈相关推荐

  1. echarts环形图内部圆,外部圆形以及阴影设置

    环形图 修改图例自定义icon 完整代码图 Chart1() { // 折算价值户新增构成let chartDom = document.getElementById('main');let myCh ...

  2. 修改echarts环形图的牵引线及文字位置

    修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...

  3. Echarts环形图使用和设置(内外大小、颜色、指示线、圆圈中心字展示)

    Echarts环形图使用 1.官网找图 Echarts官网链接 2.使用 首先要进行下载,打开cmd,输入 npm install echarts --save 如果显示报错,那么使用管理员身份运行c ...

  4. echarts 环形图占比_环形图_仪表盘

    Echarts 常用各类图表模板配置 注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...

  5. echarts折线图实线加虚线

    请将如下代码粘贴至echarts官网测试环境测试:http://echarts.baidu.com/examples/editor.html?c=line-simple option = {title ...

  6. echarts 环形图 默认高亮展示某个数据

    环形图默认高亮显示数据 代码: data(){return {chart:null,} }, methods: {initChart() {this.chart = this.$echarts.ini ...

  7. echarts 环形图中间添加html,echarts配置一个中间显示文字的环形图

    先贴一张效果图 1.导包 我没有用什么框架,直接引入echarts.min.js文件,代码如下: 注意这样引入不要放在header标签里,会阻塞html渲染,导致报错. 2.给echarts一个盒子 ...

  8. echarts环形图内实现自定义添加文字数字和缩放自适应

    文章目录 需求场景 实现思路 全部代码示例 需求场景 在echarts的环形图里加上文字和数字并自适应.如下图: 实现思路 在series加上一层,只放文字和数字. 重点代码如下: // 就是这里! ...

  9. Echarts环形图--自定义图例文本和中心文字

    一.设置环形图中心文字 可用 titel.text 和 title.subtext 来定义中心处的文本 title:{text:subtext: } 用 graphic 原生图形元素组件 每个图形元素 ...

最新文章

  1. 【JAVASCRIPT】jquery实现新闻滚动效果
  2. php 定义数字int,php中的int参数
  3. java 实现 常见排序算法(一) 冒泡排序
  4. IDEA如何添加本地项目到git上
  5. 前端传入JSON数组转换对象存入数据库
  6. 重学数据结构:三对角矩阵公式推导过程
  7. 认识电路板上的电子元件
  8. 河南第八届ACM省赛(真题训练)
  9. dx12的resource barrier
  10. keil写文字怎么会乱码_刚刚!2020福建高考作文题揭晓!你会怎么写?
  11. 【博学谷学习记录】超强总结,用心分享 | 产品经理之B端相关概念及业务流程设计
  12. 微软office服务器连接很慢,解决 RPC 请求处理速度慢的问题
  13. 电脑小写字母怎么切换_macOS amp; Windows 通吃,一套键鼠就能控制多台电脑
  14. Sass文件的导入import和Partials
  15. 一种简洁的流式推送文件分享法
  16. 学习 Golang 开发,需要掌握这几个开源框架
  17. 保持应用后台,熄屏状态下继续运行
  18. Window server 2008 搭建FTP服务器
  19. 绝顶高手必经之路【资源共享】
  20. 熟能生巧 汽车停车入位技巧解析-倒车入库--侧边停车

热门文章

  1. 08- 抽象类和接口
  2. 【手游开发优化篇】cocos2d-x内存管理优化(内存是游戏的硬伤)
  3. 蓝牙耳机哪个品牌好一点?音质好的蓝牙耳机推荐!
  4. 做ppt,字体图标音效动画,资源地址收藏
  5. 微擎安装 服务器系统,云服务器微擎安装教程
  6. Alfred 初学者指南:如何在 Mac 之间同步 Alfred 设置?
  7. 软件测试知识学习路线
  8. Python每日一练(机器学习)——第43天:鸢尾花分类
  9. Lua热更新学习 lua与C#的互相调用
  10. vue3和vite安装