echarts社区水球图、echart水球图动态水球图

var value = 0.45;
var value1 = 0.76;
var data = [value, value1];
var option = {backgroundColor: '#0F224C',title: [{text: '本年收缴率',x: '22%',y: '70%',textStyle: {fontSize: 14,fontWeight: '100',color: '#5dc3ea',lineHeight: 16,textAlign: 'center',},},{text: '本月收缴率',x: '73%',y: '70%',textStyle: {fontSize: 14,fontWeight: '100',color: '#5dc3ea',lineHeight: 16,textAlign: 'center',},},],series: [{type: 'liquidFill',radius: '47%',center: ['25%', '45%'],color: [{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#446bf5',},{offset: 1,color: '#2ca3e2',},],globalCoord: false,},],data: [value, value], // data个数代表波浪数backgroundStyle: {borderWidth: 1,color: 'RGBA(51, 66, 127, 0.7)',},label: {normal: {textStyle: {fontSize: 50,color: '#fff',},},},outline: {// show: falseborderDistance: 0,itemStyle: {borderWidth: 2,borderColor: '#112165',},},},{ //第二个球的填充type: 'liquidFill',radius: '47%',center: ['75%', '45%'],color: [{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#2aa1e3',},{offset: 1,color: '#08bbc9',},],globalCoord: false,},],data: [value1, value1], // data个数代表波浪数backgroundStyle: {borderWidth: 1,color: 'RGBA(51, 66, 127, 0.7)',},label: {normal: {textStyle: {fontSize: 28,color: '#fff',},},},outline: {// show: falseborderDistance: 0,itemStyle: {borderWidth: 2,borderColor: '#112165',},},},
],
}；

3/4环形图

let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF'];
let chartData = [{name: "本科及以上",value: 13211,unit: '元'},{name: "高中",value: 42111,unit: '元'},{name: "初中及以下",value: 81711,unit: '元'},{name: "其他",value: 121711,unit: '元'}
];
let arrName = [];
let arrValue = [];
let sum = 0;
let pieSeries = [],lineYAxis = [];// 数据处理
chartData.forEach((v, i) => {arrName.push(v.name);arrValue.push(v.value);sum = sum + v.value;
})// 图表option整理
chartData.forEach((v, i) => {pieSeries.push({name: '学历',type: 'pie',clockWise: false,hoverAnimation: false,radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],center: ["30%", "50%"],label: {show: false},data: [{value: v.value,name: v.name}, {value: sum - v.value,name: '',itemStyle: {color: "rgba(0,0,0,0)"}}]});pieSeries.push({name: '',type: 'pie',silent: true,z: 1,clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大radius: [65 - i * 15 + '%',57 - i * 15 + '%'],center: ["30%", "50%"],label: {show: false},data: [{value: 7.5,itemStyle: {color: "#E3F0FF"}}, {value: 2.5,name: '',itemStyle: {color: "rgba(0,0,0,0)"}}]});v.percent = (v.value / sum * 100).toFixed(1) + "%";lineYAxis.push({value: i,textStyle: {rich: {circle: {color: color[i],padding: [0, 5]}}}});
})option = {backgroundColor: '#fff',color: color,grid: {top: '15%',bottom: '54%',left: "30%",containLabel: false},yAxis: [{type: 'category',inverse: true,axisLine: {show: false},axisTick: {show: false},axisLabel: {formatter: function(params) {let item = chartData[params];console.log(item)return '{line|}{circle|●}{name|'+ item.name +'}{bd||}{percent|'+item.percent+'}{value|'+ item.value+'}{unit|元}'},interval: 0,inside: true,textStyle: {color: "#333",fontSize: 14,rich: {line: {width: 170,height: 10},name: {color: '#666',fontSize: 14,},bd: {color: '#ccc',padding: [0, 5],fontSize: 14,},percent:{color: '#333',fontSize: 14,},value: {color: '#333',fontSize: 16,fontWeight: 500,padding: [0, 0, 0, 20]},unit: {fontSize: 14}}},show: true},data: lineYAxis}],xAxis: [{show: false}],series: pieSeries
};

4层波浪水球图

var value = 0.65;
var data = [value, value, value, ];function Pie() {let dataArr = [];for (var i = 0; i < 150; i++) {if (i % 2 === 0) {dataArr.push({name: (i + 1).toString(),value: 25,itemStyle: {normal: {color: "#fff",borderWidth: 0,borderColor: "rgba(0,0,0,0)"}}})} else {dataArr.push({name: (i + 1).toString(),value: 10,itemStyle: {normal: {color: "rgba(0,0,0,0)",borderWidth: 0,borderColor: "rgba(0,0,0,0)"}}})}}return dataArr
}
var option = {backgroundColor: '#462f9b',title: [{text: 'MARGINAL COST✍',x: '50%',y: 30,textAlign: 'center',textStyle: {fontSize: '30',fontWeight: '100',color: '#fff',textAlign: 'center',},},{text: (value * 100).toFixed(0) + '%',left: '50%',top: '30%',textAlign: 'center',textStyle: {fontSize: '40',fontWeight: '400',color: '#fff',textAlign: 'center',textBorderColor: 'rgba(0, 0, 0, 0)',textShadowColor: '#000',textShadowBlur: '0',textShadowOffsetX: 0,textShadowOffsetY: 1,},},],series: [{type: 'liquidFill',radius: '70%',z: 6,center: ['50%', '50%'],amplitude: 20,color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 1,color: 'rgba(2, 159, 200, 1)'}, {offset: 0.5,color: 'rgba(0, 186, 211, .5)'}, {offset: 0,color: 'rgba(0, 230, 220, 1)'}],globalCoord: false},data: [0.6,{value: 0.5,direction: 'left',},0.4, 0.3,],backgroundStyle: {borderWidth: 1,color: 'transparent',},label: {normal: {formatter: '',}},outline: {show: true,itemStyle: {borderWidth: 0,},borderDistance: 0,}},{name: '4',type: 'pie',z: 1,radius: '70.5%',center: ["50%", "50%"],hoverAnimation: false,itemStyle: {normal: {label: {show: false,},}},data: [{value: 100,itemStyle: {normal: {color: '#ac9ed1',}}}]},{name: '5',type: 'pie',z: 1,radius: '70%',center: ["50%", "50%"],hoverAnimation: false,itemStyle: {normal: {label: {show: false,},}},data: [{value: 100,itemStyle: {normal: {color: '#462f9b',}}}]},{type: 'pie',zlevel: 0,silent: true,radius: ['60%', '61%'],z: 10,itemStyle: {normal: {areaColor: 'rgba(137, 137, 137, .3)',borderColor: '#888',},emphasis: {label: {show: false},areaColor: 'rgba(255, 255, 255, .1)',}},label: {normal: {show: false},},labelLine: {normal: {show: false}},data: Pie()},]
}

demo来源Makepie社区

echarts社区水球图、echart水球图动态水球图相关推荐

html5画布画出折线图,canvas 画出动态折线图
canvas 是 html5 支持的一个标签,用于图形的绘制.canvas 标签仅仅提供了图形的容器,必须通过 js 脚本来绘制. 比如,绘制一个简单的矩形: 矩形.png var c=documen ...
unity3d 动态合批设置_【CocosCreator】突破动态合图
1. 动态合图的默认规则引擎中对动态合图的描述如下: 它能在项目运行时动态的将贴图合并到一张大贴图中.当渲染一张贴图的时候,动态合图系统会自动检测这张贴图是否已经被合并到了图集(图片集合)中,如果没 ...
pyecharts绘制省级地图（Map地图、Geo动态涟漪散点图、Geo动态轨迹图）
Ⅰ.原始数据第七次全国人口普查(广东人口数据) 数据来源:广东统计年鉴城市人口广州市 18676605 深圳市 17560061 珠海市 2439585 汕头市 5502031 佛山市 949 ...
炫酷动态静图40例——多图杀猫
看到标题大家会想,什么是动态静图呀?!动态静图(Cinemagraphs)指的是一些静止的图片,可是里面含有一些动态的元素,让人可以反复的回味一些短暂的瞬间.动态静图是一项将视频与图片结合起来的技术手 ...
Cocos Creator - 动态合图(dynamicAtlasManager)
步骤 Cocos Creator - 动态合图(dynamicAtlasManager) 前言启用.禁用动态合图贴图限制支持定制的渲染组件调试总结 Cocos Creator - 动态合图( ...
python画动图-Python绘制动态水球图过程详解
先来看看绘制的动态水球图: 没有安装PyEcharts的,先安装PyEcharts: # 安装pyecharts模块,直接安装就是最新的版本pip install pyecharts 安装好PyEch ...
可视化 | Python精美动态水球图
文章目录 1. 准备工作 1.1 pyechars安装 1.2 导入模块 2. 绘制水球图 2.1 基本水球图 2.2 增加边框,改变形状 2.3 多波浪 2.4 增加标注,改变字体大小,改变填充颜色 ...
【如何实现一个简单的canvas动态水球图】
** 如何实现一个简单的canvas动态水球图. ** 由于在项目中遇到有个制作一个水球图需求,在网上查找相关资料比较少,样式又不符合预期,在这样的情况下封装了一个自己可更改.定制化的水球图动效组件. ...
[VUE2/VUE3]基于echarts的动态折线图组件
[VUE2/VUE3]基于echarts的动态折线图组件时间格式化代码 export default function formatSecond(value: number) {let millis ...
echarts动态折线图拉扯变形问题
echarts动态折线图拉扯变形问题在使用echarts折线图做动态数据展示时,发现一个bug 当折线图的一个数值较高点紧挨着一个数值为零的点,guyong时图形会被拉扯,应该是echart的bu ...

echarts社区水球图、echart水球图动态水球图

目录

普通水球图

3/4环形图

4层波浪水球图

echarts社区水球图、echart水球图动态水球图相关推荐

最新文章

热门文章

echarts社区水球图、echart水球图 动态水球图

目录

普通水球图

3/4环形图

4层波浪水球图

echarts社区水球图、echart水球图 动态水球图相关推荐

最新文章

热门文章

echarts社区水球图、echart水球图动态水球图

echarts社区水球图、echart水球图动态水球图相关推荐