echarts实现带光圈的环形图

实现效果：

实现原理：图层的叠加

（1）多个环形图的叠加

（2）环形图和油表图的嵌套

代码：

        let _that = thismyChart = _that.$echarts.init(document.getElementById(this.pieId))let data = [{value: 10, name: '香蕉'}, {value: 20, name: '西红柿'}, {value: 30, name: '牛奶'}]let subData = [{value: 30, name: '果汁'}, {value: 50, name: '奶昔'}, {value: 80, name: '沙冰'}]let legendData = datamyChart.setOption({color: ['#ed0a46', '#ff8800', '#ffe05a'],title: {text: '',subtext: '',textStyle: {color: '#f2f2f2',fontSize: 12,align: 'center'},subtextStyle: {fontSize: 14,color: ['#fff'],align: 'center'},x: '76%',y: 'center',textAlign: 'center'},grid: {top: 10,bottom: 10,left: 100,right: '10%'},legend: {orient: 'vertical',top: 'middle',x: 'left',right: '10%',selectedMode: false,icon: 'roundRect',data: legendData,backgroundColor: 'rgba(0,182,255,0.10)',borderWidth: 1,borderRadius: 2,borderColor: '#00567D',formatter: function (name) { // 用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}var arr = []var index = 0var total = 0for (var i = 0; i < legendData.length; i++) {total += legendData[i].valueif (legendData[i].name == name) {index = i}}arr.push('{name|' + name + '}','{precent|' + (((legendData[index].value == 0 ? 100 : legendData[index].value) / (total == 0 ? 100 : total)) * 100).toFixed(1) + '%}','{value|' + legendData[index].value + '}')return arr.join('')},textStyle: {color: '#FFFFFF',fontSize: 14,rich: {name: {align: 'left',color: '#fff',width: 160},precent: {align: 'left',color: '#fff',width: 55,padding: [0, 5, 0, 10]},value: {align: 'left',color: '#fff',width: 60}}}},series: [// 主要展示层的{radius: ['40%', '60%'],center: ['77%', '50%'],type: 'pie',label: {normal: {show: false,formatter: '{c}%',textStyle: {fontSize: 30},position: 'center'},emphasis: {show: false}},markPoint: {label: {show: false}},labelLine: {normal: {show: false,length: 30,length2: 55},emphasis: {show: false}},name: '',data: data},{name: '',type: 'gauge',center: ['77%', '50%'],radius: '95%',startAngle: 0,endAngle: 359.9,splitNumber: 60,hoverAnimation: true,axisTick: {show: false},splitLine: {length: 20,lineStyle: {width: 7,color: '#001a30'}},title: {show: false},axisLabel: {show: false},pointer: {show: false},axisLine: {lineStyle: {opacity: 0}},detail: {show: false},data: data},{name: '',type: 'pie',radius: ['76%', '95%'],center: ['77%', '50%'],silent: true,z: 0,zlevel: 0,showVal: true,label: {normal: {show: false,position: 'center'}},itemStyle: {normal: {// 定制显示（按顺序）color: function (params) {var colorList = ['#4d77ff', '#00a477', '#6ef2ff', '#6ef2ff', '#0093ff', '#544bfd', '#00cbd5','#00c2ff', '#17d180', '#34e7a7', '#0067f9', '#9d4afd', '#4d77ff']return colorList[params.dataIndex]}}},data: subData}]})$(window).resize(function () {myChart.resize()})

echarts实现带光圈的环形图相关推荐

vue 使用echarts实现3D饼图和环形图
记录一下echarts实现3d饼图和环形图功能## 标题实现效果首先第一步安装echarts和echarts-gl npm install echarts echarts-gl安装最新版本可能会有 ...
Echarts之带箭头的折线图
需求: 鼠标移入: 1.容器: <div id="line" style="width: 700px; height: 380px; background: rgb ...
echarts 环形图中间添加html,echarts配置一个中间显示文字的环形图
先贴一张效果图 1.导包我没有用什么框架,直接引入echarts.min.js文件,代码如下: 注意这样引入不要放在header标签里,会阻塞html渲染,导致报错. 2.给echarts一个盒子 ...
echarts3d饼图，环形图（包含透明效果）
效果图: 饼图: 环形图: 带透明度的环形图: 安装echarts "echarts":"^5.1.2" "echarts-gl":&quo ...
【ECharts】环形图、饼状图
目录 color设置的颜色环形渐变色圆环中间显示文字悬浮显示中间文字悬浮显示中间文字,默认显示第一个循环高亮饼图块 label文字过长重叠 label和饼图一致 label展示位置内容为0 ...
Echarts环形图设置空数据样式
需求背景由于最近的需求涉及到图表的展示,所以引入Echarts来渲染图表,但是问题也随之而来了,仔细阅读过文档后发现,Echarts对于环形图并没有能够设置默认样式的地方,对于空数据,界面直接就是空 ...
修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
ECharts 之环形图
上一篇文章写了堆叠柱状图的用法,本文写的是环形图的方法,环形图是饼图的一种,具体的饼图可以自己更改radius属性的大小 radius : ['50%', '70%'], //饼图的半径,第一项是内半 ...
echarts 环形图默认高亮展示某个数据
环形图默认高亮显示数据代码: data(){return {chart:null,} }, methods: {initChart() {this.chart = this.$echarts.ini ...

echarts实现带光圈的环形图

echarts实现带光圈的环形图相关推荐

最新文章

热门文章