• Echarts饼图实现颜色渐变 https://blog.csdn.net/qq_36538012/article/details/103234699
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, // 环图起始位置：正下发
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 }] }] }  展开全文 • '#D8E07E' }, ] return new echarts.graphic.LinearGradient(1, 0, 0, 0, [// //自定义颜色有渐变效果 { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 ...  seriesData: [ { type: ‘pie’, // radius: [60, 90], center: [‘50%’, ‘50%’], label: { normal: { show: true, position:‘inner’ }, emphasis: { show: true } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: ‘rgba(0, 0, 0, 0.5)’ },  normal:{ // 设置扇形的阴影 shadowBlur: 30, shadowColor: 'rgba(255,227,42,0.3)', shadowOffsetX: -5, shadowOffsetY: 5, color: function(params) { var colorList = [ { c1: ' #6F59FF', // c2: '#A582FF' }, { c1: ' #F2054D', // c2: '#B94D6F' }, { c1: '#24DE15',// c2: '#508B4B' }, { c1: '#05749D',// c2: '#46646F' }, { c1: '#DBF00F',// c2: '#D8E07E' }, ] return new echarts.graphic.LinearGradient(1, 0, 0, 0, [// //自定义颜色有渐变效果 { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 offset: 0, color: colorList[params.dataIndex].c1 }, { offset: 1, color: colorList[params.dataIndex].c2 }, ]) /* return colorList[params.dataIndex]*/ } // color:function(params) { // //自定义颜色无渐变效果 // var colorList = [ // 'green', '#005eea', '#00bb96','#FEB64D','#00bb96', // ]; // return colorList[params.dataIndex] // } } }, lableLine: { normal: { show: true }, emphasis: { show: true } }, data: [ { value: 20, name: '供电公司' }, { value: 30, name: '上海通号' }, { value: 20, name: '机电公司' }, { value: 12, name: '冠华瑞和' }, { value: 18, name: '亚太安迅' }, ] } ]   展开全文 • Echarts 使用小拓展饼图pieecharts使用小记录 echarts官网链接: https://www.echartsjs.com/zh/option.html#series-pie.type. ...1.单独设饼图颜色,设置渐变 2.label样式 this.chart = echarts.init(t... Echarts 使用小拓展饼图pieecharts使用小记录 echarts官网链接: https://www.echartsjs.com/zh/option.html#series-pie.type. echarts使用小记录 代码片段:(vue中使用,其他使用中,道理一样的) 1.单独设饼图颜色,设置渐变 2.label样式  this.chart = echarts.init(this.$refs.lineEcharts);
this.chart.setOption({
tooltip: {
trigger: 'item',
formatter: '{b}: {d}%'
},
//饼图中渐变,单独设置饼图颜色
color: ['#2a95ff', {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#fea764'// 0% 处的颜色
}, {
offset: 1, color: '#eb489f' // 100% 处的颜色
}]
}],
legend: {
show: false
},
series: [
{
name: '访问来源',
type: 'pie',
selectedOffset: 2, // 选中的饼块后偏离位置.即显示的缝隙的大小
width: 238,
height: 238,
labelLine: {
normal: {
length: 20, // 改变标示线的长度
length2: 10, // 第二段标示线的长度
lineStyle: {
color: '#fff' // 改变标示线的颜色
}
}
},
label: {
formatter: '{per|}{b|{b}}{per|}\n{hr|}\n{per|}{d|{d}%}{per|}', //设置label的样式
rich: {
b: {
color: '#fff',
lineHeight: 20
},
d: {
color: '#fff',
lineHeight: 20
},
hr: {
borderColor: '#fff',
width: '100%',
borderWidth: 0.5,
height: 0
},
per: {
}
}
},
data: [
{ value: 60, name: '离线', selected: true },//设置selected,可出现缝隙
{ value: 40, name: '在线' }
]
}
]
})
}
}
}


1.只要一个数据
this.chart = echarts.init(this.$refs.test) const num = 80 // 占人数 this.chart.setOption({ title: { show: true, text: num + '%', x: 'center', y: 'center', textStyle: { fontSize: 14, color: '#00dded', fontWeight: 'bold' } }, tooltip: { show: false }, color: [{ type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [{ offset: 0, color: '#eceb0f' // 0% 处的颜色 }, { offset: 1, color: '#2dfba7' // 100% 处的颜色 }] }, 'rgba(255, 255, 255, 0.5)'],// legend: { show: false }, series: [ { name: '访问来源', type: 'pie', height: 90, width: 90, hoverAnimation: false, // 鼠标放在的放大动画效果关闭 legendHoverLink: false, // 高亮关闭 clockwise: false, // 饼图渲染走向顺时针 // left: 100, radius: ['45%', '65%'],//饼图取圆的范围 labelLine: { show: false }, label: { show: false }, data: [ { value: num, name: '流出人数' }, { value: 100 - num, name: '' } ] } ] })   this.chart = echarts.init(this.$refs.authEcharts)

this.chart.setOption({
tooltip: {
trigger: 'item',
formatter: '{b}: {d}%'
},
// color: ['#2a9dff', '#572fda', '#f57981'],
color: ['#2a9aff', {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#6718cf'// 0% 处的颜色
}, {
offset: 1, color: '#3065f5' // 100% 处的颜色
}]
}, {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#fea764'// 0% 处的颜色
}, {
offset: 1, color: '#eb489f' // 100% 处的颜色
}]
}],
legend: {
orient: 'vertical',
x: 0, // 图例位置
y: 120,
icon: 'circle', // 修改icon形状
data: ['哈哈认证', '其他方式', '哈认证'],
itemWidth: 6, // 图例图标的大小
itemHeight: 6,
itemGap: 8, // 图例的间距
textStyle: {
color: '#fff',
fontSize: 8
// height: 40
}
},
series: [
{
name: '访问来源',
type: 'pie',
width: 250,
height: 230,
selectedOffset: 2,
labelLine: {
normal: {
length: 10, // 改变标示线的长度
length2: 10, // 第二段标示线的长度
lineStyle: {
color: '#fff' // 改变标示线的颜色
}
}
},
label: {
formatter: '{d|{d}%}',
rich: {
d: {
color: '#fff',
lineHeight: 24,
fontSize: 12
}
}
},
data: [
{ value: 5, name: '哈哈认证' },
{ value: 40, name: '哈方式' },
{ value: 30, name:' 哈哈证', selected: true }
]
}
]
})




展开全文
• return new echarts.graphic.LinearGradient(1, 0, 0, 0, [ { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 offset: 0, color: colorList[params.dataIndex].c1, }, { offset: 1, color: ...
上代码
itemStyle: {
normal: {
color: function (params) {
var colorList = [
{
c1: "#63E587", //低
c2: "#84E363",
},
{
c1: "#5FBAFD", //高
c2: "#48A3E3",
},
{
c1: "#5FBAFD", //正常
c2: "#4C82FF",
},
{
c1: "#F2F7F9", //危险
c2: "#F6A851",
},
];
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

offset: 0,
color: colorList[params.dataIndex].c1,
},
{
offset: 1,
color: colorList[params.dataIndex].c2,
},
]);
/*  return colorList[params.dataIndex]*/

插入到series里，颜色自己定，Ok

`
展开全文
• 前言玩转ECharts系列，主要为大家讲解我们基于...导读阅读完此文，你会了解基于ECharts：1、如何实现线性渐变2、如何用线性渐变模拟环形渐变3、如何动态计算环形渐变的方向知识点以series-pie.data.itemStyle. ...
• 饼图 seriesData: [ { type: ‘pie’, // radius: [60, 90], center: [‘50%’, ‘50%’], label: { normal: { show: true, position:‘inner’, formatter: function § { var data = p.data; let str = ‘’ str =...
• 变黑的同志们肯定都设置了一个叫做visualMap的属性，然后里面有max、min值，这两个值对应的是饼图颜色的渐变； 同时data中的value值又太小，导致渐变出来的颜色都是黑色（实际上只是很接近于黑色的颜色） 变黑的同志...
• 最近捣鼓了一下echarts，所以将相关的点记录一下； 图标选项 legend 图例 legend: { data: [], // 图标数据 left: 'center', //定位 top: '1%', itemWidth: 11,//图例的宽度 ...
• // max、min值，这两个值对应的是饼图颜色的渐变； // data中的value值太小，会导致渐变出来的颜色都是黑色(实际上只是很接近于黑色的颜色) //只要把visualMap中max值设置为data中的最大的那个值，min设置为data中...
• //线性渐变，前四个参数分别是 x, y, x2, y2, 范围从 0 - 1，相当于百分比，如果 globalCoord 为'true'，则该四个值是绝对的像素位置， color: { type: 'linear', x: 0, y: 0, ...
• 本篇博文是记录一下我在开发过程中遇到的一个问题，那就是对于南丁格尔玫瑰图（或者饼图）如何根据百分比大小进行排列，可以很直观的看出数据高低。 首先给大家展示一下官方的样式，具体代码可以去官网上查看：...
• Echarts 图表 渐变 嵌套 标签 颜色
• 总结一下最近在Echarts中遇到的问题并找出的解决方法...一、Echarts渐变的写法 import echarts from 'echarts' color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FF5502' }, { ...
• ## echarts自定义饼图

千次阅读 2018-10-11 12:29:14
前端经常会用到图标，本人用到的不多，但是积累下来也能慢慢了解它的规律，看懂它的API，今天就积累了一类饼图，用到的知识点当然还是...今天的饼图实现渐变色和数据背景色的添加及饼图对应的名称 实现步骤 var op...
• 2018-07-2415:36:43起 -饼图单项不同颜色的设置效果图：实现：...饼图每个单项的渐变效果效果图：实现：说明：data数据可以是一个数组，数组每一项是一个对象，对象里边可以再次设置私有属性以覆盖全局属性，比如...
• Echarts关于饼图的运用 环形进度图 如图就是一个环形的进度条这里的颜色我用了一个渐变的色调。 this.circleOption = { title: { text: "", // 这里的text值指的是我们的环形图主标题就是我们这里的‘交付率...
• 前言玩转ECharts系列，主要为大家讲解...分享计划《如何实现顶端装饰》《如何实现动态的label颜色》《如何实现自定义的icon》《如何实现环形渐变》《如何实现1/2圆的玫瑰图》导读阅读完此文，你会了解基于ECharts：1...
• var saleAmountTotal = 88; var saleAmountTotal2 = 99; const cos = Math.cos; const sin = Math.sin; const PI = Math.PI;...const d_val_p = ...https://gallery.echartsjs.com/editor.html?c=xB1oW7WWbQ
• echarts自定义图表颜色，自定义渐变色 柱状图： 单色： 原先图表的颜色 配置代码： series: { type: "bar", barWidth: "60", data: [6, 12, 8, 9, 10], itemStyle: { normal: { color:'red' }, }, }, ...