Echarts.js 环形图饼图颜色渐变效果

var saleAmountTotal = 88;
var saleAmountTotal2  = 99;

const cos = Math.cos;
const sin = Math.sin;
const PI = Math.PI;

// 计算占比
const d_val_p = saleAmountTotal/ (saleAmountTotal+saleAmountTotal2)  * 100;
const i_val_p = saleAmountTotal2/ (saleAmountTotal+saleAmountTotal2)* 100;
// 计算圆心角
const d_angle = PI * d_val_p / 50 / 2;
const i_angle = PI * i_val_p / 50 / 2;
// 计算渐变起点和终点
const d_pointStart = [
    0.5 - 0.5 * cos(d_angle) * sin(d_angle),
    0.5 + 0.5 * cos(d_angle) * cos(d_angle)
];
const d_pointEnd = [
    0.5 - 0.5 * sin(d_angle),
    0.5 + 0.5 * cos(d_angle)
];
const i_pointStart = [
    0.5 - 0.5 * cos(i_angle) * sin(i_angle),
    0.5 + 0.5 * cos(i_angle) * cos(i_angle)
];
const i_pointEnd = [
    0.5 - 0.5 * sin(i_angle),
    0.5 + 0.5 * cos(i_angle)
];
// 定义数据
var data_10000001 = [ {
	value : saleAmountTotal,
	name : '境内',
	itemStyle: {
	             normal: {
	                 color: {
	                     type: 'linear',
	                     x: d_pointStart[0],
	                     y: d_pointStart[1],
	                     x2: d_pointEnd[0],
	                     y2: d_pointEnd[1],
	                     colorStops: [
	                         // !! 在此添加渐变过程色 !!
	                         { offset: 0, color: '#2A8EFB' },
	                         { offset: 1, color: '#30C3FF' }
	                     ]
	                 }
	             }
	         }
}, {
	value : saleAmountTotal2,
	name : '境外',
	itemStyle: {
	             normal: {
	                 color: {
	                     type: 'linear',
	                     x: i_pointStart[0],
	                     y: i_pointStart[1],
	                     x2: i_pointEnd[0],
	                     y2: i_pointEnd[1],
	                     colorStops: [
	                         // !! 在此添加渐变过程色 !!
	                         { offset: 0, color: '#FFB61F' },
	                         { offset: 1, color: '#FF8928' }
	                     ]
	                 }
	             }
	         }
} ];

option = {
					/*
					 * tooltip: { trigger: 'item', formatter: "{b}:{c}人次" },
					 */
					legend : {
						orient : 'vertical',
						bottom : 'left',
						data : [ '境内', '境外' ],
						icon : 'circle',
						formatter : function(name) {
							var target;
							for (let i = 0; i < data_10000002.length; i++) {
								if (data_10000002[i].name === name) {
									target = data_10000002[i].value
								}
							}
							var arr = [ "{b|" + name + "}" + "{a|" + target
									+ "}" + "人次" ];
							return arr.join("\n");
						},
						textStyle : {
							color : "rgba(51, 51, 51, 1)",
							rich : {
								a : {
									fontSize : 18,
									color : "rgba(51, 51, 51, 1)",
									padding : 5
								},
								b : {
									fontSize : 14,
									color : "rgba(138, 138, 138, 1)"
								}
							}
						}
					},
                    tooltip: {
                        trigger: 'item',
                        position:['10%', '-8%'],
                        formatter: "{b}: {c}人次({d}%)"
                    },
					graphic : [ {
						type : 'text',
						left : 'center',
						top : '28%',
						style : {
							text : parseInt(type2.saleVolumnTotal),
							fill : '#333333',
							width : 30,
							height : 30,
							fontSize : 18,
							textAlign : 'center',
							fontFamily : "SourceHanSansSC"
						}
					}, {
						type : 'text',
						left : 'center',
						top : '39%',
						style : {
							text : '总人次',
							fill : '#8A8A8A',
							width : 30,
							height : 30,
							fontSize : 14,
							fontFamily : "SourceHanSansSC"
						}
					} ],
					color : [ 'rgba(48, 195, 255, 1)', 'rgba(255, 182, 31, 1)' ],
					series : [ {
						name : '总人次',
						type : 'pie',
						radius : [ '45%', '70%' ],
						center : [ '50%', '35%' ],
						data : data_10000002,
                        hoverAnimation:false,
                        startAngle:270,                      //定义颜色渐变起始角度
                        avoidLabelOverlap: false,
						label : {
							show : false
						},
						labelLine : {
							normal : {
								show : false
							}
						}
					} ]
				};

在这里插入图片描述

定义颜色渐变起始角度startAngle:270

参考自:https://gallery.echartsjs.com/editor.html?c=xB1oW7WWbQ

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值