精华内容
下载资源
问答
  • Echarts饼图实现颜色渐变

    千次阅读 2020-07-10 14:19:23
    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, // 环图起始位置:正下发
            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
            }]
        }]
    }

     

    展开全文
  • '#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饼图使用拓展

    2020-03-23 12:16:51
    Echarts 使用小拓展饼图pieecharts使用小记录 echarts官网链接: https://www.echartsjs.com/zh/option.html#series-pie.type. ...1.单独设饼图颜色,设置渐变 2.label样式 this.chart = echarts.init(t...

    Echarts 使用小拓展饼图pie


    echarts官网链接: https://www.echartsjs.com/zh/option.html#series-pie.type.

    echarts使用小记录

    效果图1
    代码片段:(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',
                radius: ['20%', '30%'],//设置为空心的
                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: {
                      padding: [2, 4]
                    }
                  }
                },
                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',
                radius: ['16%', '26%'],
                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 =...
  • echarts饼图变黑解决办法

    千次阅读 2020-04-11 10:42:14
    变黑的同志们肯定都设置了一个叫做visualMap的属性,然后里面有max、min值,这两个值对应的是饼图颜色的渐变; 同时data中的value值又太小,导致渐变出来的颜色都是黑色(实际上只是很接近于黑色的颜色) 变黑的同志...
  • 最近捣鼓了一下echarts,所以将相关的点记录一下; 图标选项 legend 图例 legend: { data: [], // 图标数据 left: 'center', //定位 top: '1%', itemWidth: 11,//图例的宽度 ...
  • ECharts饼图颜色区分不明显

    千次阅读 2019-01-23 15:30:21
    // 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...
  • Echarts.js 环形图饼图颜色渐变效果

    千次阅读 2019-05-30 08:16:27
    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' }, }, }, ...

空空如也

空空如也

1 2 3
收藏数 52
精华内容 20
关键字:

echarts饼图渐变