Echarts饼图实现颜色渐变

linear 实现伪弧形渐变 https://gallery.echartsjs.com/editor.html?c=xB1oW7WWbQ

Echarts饼图实现颜色渐变 https://blog.csdn.net/qq_36538012/article/details/103234699

const { random, PI, cos, sin } = Math;// 随机生成占比数据
const val = random() * 100;// 圆心角的一半
const angle = PI * val / 50 / 2;
// 渐变起点
const pointStart = [0.5 - 0.5 * cos(angle) * sin(angle),0.5 + 0.5 * cos(angle) * cos(angle)
];
// 渐变终点
const pointEnd = [0.5 - 0.5 * sin(angle),0.5 + 0.5 * cos(angle)
];option = {title: {text: 'linear 实现伪弧形渐变',left: 'center',bottom: 20,textStyle: {align: 'center',fontSize: 14,color: '#333',fontWeight: 'normal'}},series: [{name: '占比',type: 'pie',startAngle: 270, // 环图起始位置：正下发radius: ['50%', '60%'],avoidLabelOverlap: false,label: {normal: {show: true,position: 'center',formatter: ({ data }) => `${data.value.toFixed(2)}%`},emphasis: {show: true}},labelLine: {normal: {show: false}},data: [{name: '满足率',value: val,label: {normal: {fontSize: 18,color: '#585F6E',fontWeight: 'bolder'}},itemStyle: {normal: {color: {type: 'linear',x: pointStart[0],y: pointStart[1],x2: pointEnd[0],y2: pointEnd[1],colorStops: [// !! 在此添加渐变过程色 !!{ offset: 0, color: '#24BCF9' },{ offset: 1, color: '#1ADAE9' }]},shadowColor: 'rgba(34,192,245,0.8)',shadowBlur: 10}}}, {name: '未满足率',value: 100 - val,label: {normal: {show: false,fontSize: 0}},itemStyle: {normal: {color: '#f0f0f0'},emphasis: {color: '#f0f0f0'}},hoverAnimation: false}]}]
}

Echarts饼图实现颜色渐变相关推荐

vue中使用echarts实现地图颜色渐变及自定义浮窗内容
在这篇文章里vue中使用echarts自定义浮窗内容及样式_芝士焗红薯的博客-CSDN博客,总结了echarts的一些简单用法.这篇文章,一个是在原来的自定义浮窗内容上实现了地图的颜色渐变,一个是简化 ...
echarts 饼图每块颜色_读者提问，如何让 tooltip 提示框内显示饼图
效果截图前些天有读者问,ECharts 的提示框(tooltip)内,能不能添加一个饼图? 我之前倒是看到过用饼图作为散点图数据点的例子,感觉应该有办法--但是提示框和那个不太一样,估计需要研究一下 ...
Echarts饼图字体颜色
官网代码: option = {title : {text: '某站点用户访问来源',subtext: '纯属虚构',x:'center'},tooltip : {trigger: 'item',fo ...
echarts饼图的颜色修改
第一种 // 可以直接在series写在里,可以根据饼图的数量添加,不用担心多出,多出的是不会显示的series:[{color:['#46a4f7','#36cbcb','#11D074','#fa ...
echarts自定义图表颜色，柱状图/饼图自定义渐变色
echarts自定义图表颜色,自定义渐变色柱状图: 单色: 原先图表的颜色配置代码: series: {type: "bar",barWidth: "60" ...
echarts 饼图的一种---南丁格尔玫瑰图按照百分比大小进行排序以及颜色设置的两种方式（普通设置颜色和渐变色设置）
本篇博文是记录一下我在开发过程中遇到的一个问题,那就是对于南丁格尔玫瑰图(或者饼图)如何根据百分比大小进行排列,可以很直观的看出数据高低. 首先给大家展示一下官方的样式,具体代码可以去官网上查看:ht ...
echarts实现饼图阴影，改变饼图的颜色，改变引导线的颜色
一.实现效果如下: 二.需求分析: > 1.饼图阴影,就是在series中再加图层 > 2.引导线labelLine->normal->lineStyle > 3.改变饼 ...
eCharts——柱状图中的柱体颜色渐变
柱状图中的柱体颜色渐变详细说明先来看一下柱体颜色渐变的效果以下是实现渐变效果的代码: series: [{data: [18, 16, 8, 10, 5, 24],type: 'bar',show ...
ECharts（三）：柱状图柱体颜色渐变（每个柱体不同渐变色）
前提: 会简单的绘制柱状图主要内容: 渐变的主要使用在https://efe.baidu.com/blog/echarts-3.2.0/中有介绍到: itemStyle: { normal: ...

Echarts饼图实现颜色渐变

Echarts饼图实现颜色渐变相关推荐

最新文章

热门文章