echarts环形图
let datas = [{name: "提高卫生标注",value: 100,},{name: "加强安全教育",value: 40,},{name: "规范仪容仪表",value: 50,},{name: "提升言谈举止",value: 30,},{name: "增强服务意识",value: 30,},];var option = {grid: {x: '30%',y: '3',x2: '5%',y2: '5%',borderWidth: 1,borderColor: '#f0f0f0',},title: [{show: true,text: '{a|设备状态}{b|数量}{c|占比}',// text: '{b|数量}{c|占比}',top: '40%',left: '80%',textStyle: {rich: {a: {align: 'center',fontSize: 14,width: 20,color: 'black',fontWeight:'bolder',padding: [0, 0, 0, 20],},b: {align: 'center',fontSize: 14,color: 'black',fontWeight:'bolder',width: 5,padding: [0, 0, 0, 60],},c: {align: 'center',fontSize: 14,width: 5,fontWeight:'bolder',color: 'black',padding: [0, 0, 0, 45],},},},},],// color: ["#F56463", "#00C6FF", "#F09615", "#0079E6"],legend: {// itemHeight: 14,// itemWidth: 14,// icon: "rect",orient: "vertical",top: "center",right: "5%",textStyle: {align: "left",color: "#",verticalAlign: "middle",rich: {name: {width:150, fontSize: 16,},value: { width:20, align:"right",fontFamily: "Medium",fontSize: 16,},rate: {width:10,align:"right",fontSize: 16,},},},data: datas,// formatter: (name) => {// if (datas.length) {// const item = datas.filter((item) => item.name === name)[0];// console.log(datas)// return `{name|${name}}{value| ${item.value} {rate| }`;// // return `{name|${name}:}{value| ${item.value}} {rate| ${item.value}%}`;// }// },formatter:function(name){var oa = option.series[0].data;var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value;for(var i = 0; i < option.series[0].data.length; i++){if(name==oa[i].name){return name + ' ' + oa[i].value + '个 ' + (oa[i].value/num * 100).toFixed(2) + '%';}}}},// tooltip: {// trigger: "item",// // formatter: "{d}%",// },tooltip: {trigger: 'item',formatter: function(parms) {var str =// parms.name + "</br>" +parms.marker + "" + parms.data.name + "</br>" +"数量:" + parms.data.value + "个"+"</br>" +"占比:" + parms.percent + "%";return str;}},series: [{name: "",type: "pie",radius: ["50%", "70%"],center: ["35%", "50%"],// roseType: "radius",label: {normal: {show: false,},formatter: "{d}%",},data: datas,},],};
echarts环形图相关推荐
- 修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
- Echarts环形图使用和设置(内外大小、颜色、指示线、圆圈中心字展示)
Echarts环形图使用 1.官网找图 Echarts官网链接 2.使用 首先要进行下载,打开cmd,输入 npm install echarts --save 如果显示报错,那么使用管理员身份运行c ...
- echarts 环形图占比_环形图_仪表盘
Echarts 常用各类图表模板配置 注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
- echarts 环形图 默认高亮展示某个数据
环形图默认高亮显示数据 代码: data(){return {chart:null,} }, methods: {initChart() {this.chart = this.$echarts.ini ...
- echarts 环形图中间添加html,echarts配置一个中间显示文字的环形图
先贴一张效果图 1.导包 我没有用什么框架,直接引入echarts.min.js文件,代码如下: 注意这样引入不要放在header标签里,会阻塞html渲染,导致报错. 2.给echarts一个盒子 ...
- echarts环形图内实现自定义添加文字数字和缩放自适应
文章目录 需求场景 实现思路 全部代码示例 需求场景 在echarts的环形图里加上文字和数字并自适应.如下图: 实现思路 在series加上一层,只放文字和数字. 重点代码如下: // 就是这里! ...
- echarts环形图内部圆,外部圆形以及阴影设置
环形图 修改图例自定义icon 完整代码图 Chart1() { // 折算价值户新增构成let chartDom = document.getElementById('main');let myCh ...
- Echarts环形图--自定义图例文本和中心文字
一.设置环形图中心文字 可用 titel.text 和 title.subtext 来定义中心处的文本 title:{text:subtext: } 用 graphic 原生图形元素组件 每个图形元素 ...
- echarts 环形图
Echarts 常用各类图表模板配置 注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
- Echarts环形图自定义图例
项目场景: 在展示图表的时候 有的时候需要图例也展示出一些内容来,例如这样子: 描述 普通的图例一般只是这样 但我们希望展示更多的信息,于是需要使用一个东西:字符串模板:formatter 解决方案: ...
最新文章
- ROS学习(六):CMakeLists.txt 文件
- Linux 静态库 动态库
- 组合破解windows域账号
- 微软推出 “Edge 漏洞研究计划”,类似于谷歌的 Project Zero 项目
- Android Activity概述
- 解决Mysql数据库提示innodb表不存在的问题
- C++命名空间和头文件的关系 例如已经使用了#includestring,为什么还要 using std::string?...
- python爬虫:带你游览微博博主的前世今生
- Win10 PowerToys官方免费效率小工具集
- kux格式怎么转换成mp3_怎么把kux格式转换mp4、mp3?视频转换技巧介绍
- 【贪玩巴斯】无线传感器网络(三)「Mac协议讲解」——2021-10-08
- WML语言基础(WAP建站)三
- php第三方微信app支付接口开发,PHP开发APP微信支付接口
- 论文重复率一般要求是多少?
- vtd和vt的区别_英语中v,vi,vt有什么区别
- java 调用弗雷_JAVA 学习笔记
- 【尚医通】手机登录功能
- 苹果手机尺寸详细表及iPhoneX、iPhoneXS、iPhoneXR、iPhoneXSMax、iPhone 11、iPhone 11 Pro、iPhone 11 Pro Max、屏幕适配
- windows10罪过_七大罪过与如何避免
- 我的mybatis plus——全公司同事开始模仿了!