echart多个扇形图圈

let dataPie2 = [{
name: ‘其他井’,
value: 100
},
{
name: ‘占用’,
value:20
},
{
name: ‘占用’,
value:15
},
{
name: ‘占用’,
value:1
},

];
let dataColor2 = [

 {os1: '#ffffff',os2: '#ffffff',
},{os1: '#fcb713',os2: '#fcb713',
},{os1: '#00eeff',os2: '#00eeff',
},{os1: '#ffff3b',os2: '#ffff3b',
},

];
let legendData = [],
seriesData = [],
radiusValue = 80,total = 0;

dataPie2.forEach(function(val, idx, arr) {
total += val.value;
})
for (var i = 0; i < dataPie2.length; i++) {
legendData.push(dataPie2[i].name);
seriesData.push({
type: ‘pie’,
clockWise: false, //饼图的扇区是否是顺时针排布
radius: [radiusValue - 8 * i + ‘%’, radiusValue - 8 * i + 1 + ‘%’],
center: [‘50%’, ‘50%’],
label: {
normal: {
show: false //隐藏引导线标识
}
},
hoverAnimation: false, //关闭 hover 在扇区上的放大动画效果
startAngle: 100*i, //起始角度
data: [ { //透明伞形
value: total - dataPie2[i].value,
itemStyle: { //设置透明伞形
normal: {
borderWidth: 10,
borderColor:’#041e36’,
},

            }},{value: dataPie2[i].value,name: dataPie2[i].name,itemStyle: {normal: {borderWidth: 20,borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: dataColor2[i].os1,}, {offset: 1,color: dataColor2[i].os2,}]),color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: dataColor2[i].os1}, {offset: 1,color: dataColor2[i].os2}])}}},]
});

}
option = {
backgroundColor: ‘#021228’,

tooltip: {trigger: 'item',show: true,formatter: "{b} : <br/>{d}%",backgroundColor: 'rgba(0,0,0,0.7)', // 背景padding: [8, 10], //内边距extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
},series: seriesData

};

echart多个扇形图圈相关推荐

echart 扇形图，玫瑰图配置说明
echart 扇形图,玫瑰图配置说明先看效果配置说明官方配置说明: https://echarts.apache.org/zh/option.html#series-pie option :{l ...
前端之扇形图实现案例
1.利用echarts实现直接上源码 <!DOCTYPE html> <html lang="en"> <head><meta char ...
hdc mfc 画扇形图_使用echarts绘制条形图和扇形图
使用echarts绘制条形图和扇形图简单举例说明下echarts如何绘制条形图和扇形图代码示例 echarts绘制条形图和扇形图 var mychart1=echarts.init(documen ...
android 每个块半径不同的扇形图，自定义view
1.首先看效果图 2.自定义PieChartView,继承自View,下边为PieChartView代码 package com.yingjinbao.im.peach.customview; imp ...
hdc mfc 画扇形图_科学网—画扇形图（idl程序） - 张国印的博文
IDL画扇形图还是有些麻烦的,今天中午没午休,以红移和RA为例写了程序,希望以后能用上 pro sector set_plot,'ps' device,file='F:Aprilmap.ps' REA ...
html chart标签,用 Chart.js 画扇形图并显示标签
chart.js 扇形图 var ctx = document.getElementById("myChart").getContext('2d'); var myChart = ...
小小数据统计（柱状图、折线图、扇形图）
代码地址如下: http://www.demodashi.com/demo/12012.html 大数据(big data),指无法在一定时间范围内用常规软件工具进行捕捉.管理和处理的数据集合,是需要 ...
graphics | 基础绘图系统（四）——柱状图、直方图、扇形图、箱形图和函数图象...
前面介绍的主函数plot()主要用于绘制散点图和折线图,绘制其他常见的图形如柱状图.直方图.扇形图和箱形图等可以调用专门的函数. 1 柱状图绘制基础柱状图的函数是barplot(),其语法结构如下: ...
c#制作图表（从数据库读取数据，制作柱状图，扇形图）
代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; u ...

echart多个扇形图圈

echart多个扇形图圈相关推荐

最新文章

热门文章