echarts占比环形图

option = {backgroundColor: 'green',tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} ({d}%)"},graphic: {elements: [{type: 'text',left: 80,top: 420,style: {fill: '#afccf2',text: ['体育意识'],font: '14px Arial Normal'}},{type: 'text',left: 80,top: 400,style: {fill: '#00ffff',text: ['36.84分'],font: '20px Arial Normal'}},{type: 'text',left: 305,top: 420,style: {fill: '#afccf2',text: ['体育知识'],font: '14px Arial Normal'}},{type: 'text',left: 305,top: 400,style: {fill: '#00ffff',text: ['36.84分'],font: '20px Arial Normal'}},{type: 'text',left: 535,top: 420,style: {fill: '#afccf2',text: ['体育行为'],font: '14px Arial Normal'}},{type: 'text',left: 535,top: 400,style: {fill: '#00ffff',text: ['36.84分'],font: '20px Arial Normal'}},{type: 'text',left: 760,top: 420,style: {fill: '#afccf2',text: ['体育技能'],font: '14px Arial Normal'}},{type: 'text',left: 760,top: 400,style: {fill: '#00ffff',text: ['36.84分'],font: '20px Arial Normal'}},{type: 'text',left: 1000,top: 420,style: {fill: '#afccf2',text: ['体育健康'],font: '14px Arial Normal'}},{type: 'text',left: 1000,top: 400,style: {fill: '#00ffff',text: ['36.84分'],font: '20px Arial Normal'}}]},series: [{name: '体育意识',type: 'pie',radius: ['13%', '15%'],center:['10%','50%'],avoidLabelOverlap: false,color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#cefd73'}, {offset: 0.5,color: '#79ec86'},{offset: 1,color: '#24da98'}]), 'rgba(235,235,235,0.2)'],label: {normal: {show: false,position: 'center'},emphasis: {show: false,}},labelLine: {normal: {show: false}},data: [{value: 70, name: '体育意识',label: {normal: {show: false,},position: 'center'}},{value: 120, name: '总分1'}]},{name: '体育知识',type: 'pie',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'},{offset: 1,color: '#52b9ff'}]), 'rgba(235,235,235,0.2)'],label: {normal: {show: false,position: 'right'},emphasis: {show: false,}},labelLine: {normal: {show: false}},data: [{value: 170, name: '体育知识',label: {normal: {show: false,}}},{value: 310, name: '总分2'}]},{name: '体育行为',type: 'pie',radius: ['13%', '15%'],center:['50%','50%'],avoidLabelOverlap: false,color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#fff283'}, {offset: 1,color: '#ff6e17'}]), 'rgba(235,235,235,0.2)'],label: {normal: {show: false,position: 'right'},emphasis: {show: false,}},labelLine: {normal: {show: false}},data: [{value: 130, name: '体育行为',label: {normal: {show: false,}}},{value: 310, name: '总分3'}]},{name: '体育技能',type: 'pie',radius: ['13%', '15%'],center:['70%','50%'],avoidLabelOverlap: false,color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#abdeff'}, {offset: 1,color: '#5a52ff'}]), 'rgba(235,235,235,0.2)'],label: {normal: {show: false,position: 'right'},emphasis: {show: false,}},labelLine: {normal: {show: false}},data: [{value: 180, name: '体育技能',label: {normal: {show: false,}}},{value: 310, name: '总分4'}]},{name: '体育健康',type: 'pie',radius: ['13%', '15%'],center:['90%','50%'],avoidLabelOverlap: false,color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#ffc9bd'},{offset: 1,color: '#ff6f6f'}]), 'rgba(235,235,235,0.2)'],label: {normal: {show: false,position: 'right'},emphasis: {show: false,}},labelLine: {normal: {show: false}},data: [{value: 150, name: '体育健康',label: {normal: {show: false,}}},{value: 310, name: '总分5'}]}]};

echarts占比环形图相关推荐

【echarts】三环环形图，在环形图的每个扇形之间加空隙
代码还有很多的优化空间,主要也就是环形图的几个配置比较重要,毕竟官方文档太长了(难找),还是记录一下. 配置 1. 实现环形图不同区域之间的空隙itemStyle: { normal: { borde ...
echarts绘制嵌套环形图(南丁格尔玫瑰图)
根据专业总人数和学院总人数绘制嵌套环形图首先,echarts的基本步骤引入js,准备容器,初始化实例, <script src="lib/echarts.min.js"& ...
echarts+科技风环形图
前言: echart环形图效果图: 实现代码: let value = 55.33; let title = '超期率'; let int = value.toFixed(2).split('.') ...
echarts饼图、环形图
一.饼图 const option = {tooltip: {trigger: 'item'},legend: {bottom: 10,itemWidth: 12,itemHeight: 12,ite ...
php echarts 嵌套饼图,echarts绘制嵌套环形图/ 双饼图
设备类型在里设备品牌在外后台返回数据如下格式: device_brand_distribution = [{'equipment_type': '智能手机', 'equipment_brand': ...
echarts 环形图占比_环形图_仪表盘
Echarts 常用各类图表模板配置注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
Echarts实现环形图的渐变颜色效果
已经封装好的环形图组件直接在要用的vue文件中引用: <circleChart:id="chart4.id":width="chart4.width": ...
手把手教你用ECharts画饼图和环形图
导读:饼图也是一种常用的基本图表,主要用来展示各项的比重. 作者:王大伟来源:大数据DT(ID:hzdashuju) 下面制作一幅基础的饼图,将Echarts中series的type参数值设置为pi ...
echarts环形图内部圆，外部圆形以及阴影设置
环形图修改图例自定义icon 完整代码图 Chart1() { // 折算价值户新增构成let chartDom = document.getElementById('main');let myCh ...

echarts占比环形图

echarts占比环形图相关推荐

最新文章

热门文章