ECHARTS-饼图渐变

最新推荐文章于 2024-04-08 14:53:34 发布

梦里窥天

最新推荐文章于 2024-04-08 14:53:34 发布

阅读量8.6k

点赞数 8

CC 4.0 BY-SA版权

文章标签： echarts

本文链接：https://blog.youkuaiyun.com/qq_44718666/article/details/117435273

博客主要提及了饼图渐变相关内容，在信息技术领域，这可能涉及到可视化方面的操作，如使用echarts等工具实现饼图的渐变效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

饼图渐变

drawLine4() {
      let myChart4 = this.$echarts.init(document.getElementById("myChart4"));
      let option = {
          tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    
series: [
          {
            name: "完成率",
            type: "pie",
            radius: ["60%", "30%"],
            avoidLabelOverlap: false,
            itemStyle :{
                normal : {
                    label : {
                        show : true,
                       position : 'center',
                        formatter : 20 + "%",
                        textStyle : {
                            color : '#3D414B',
                            fontSize : '30',
                            fontFamily : '微软雅黑',
                            fontWeight : 'bold'
                        }
                    },
                    labelLine : {
                        show : false
                    }
                }
            },
            data: [
              
              {
                value: 60,
                name: "完成",
                itemStyle: {
                    normal: {//颜色渐变
                        color: new echarts.graphic.LinearGradient(

                            1, 1, 1, 0,  //(上-下 渐变)
                            // 1, 1, 0, 0,  //(左上-右下 渐变)
                            // 1, 0, 0, 0,  //(左-右 渐变)
                            // 0, 1, 1, 0,  //(右上-左下 渐变)
                            // 0, 1, 1, 1,  //(左-右 渐变)
                            // 1, 0, 1, 1,  //(上-下 渐变)
                            // 0, 0, 1, 0,  //(左-右 渐变)
                            // 0, 0, 0, 1,  //(上-下 渐变)

                            [
                                {offset: 0, color: '#FF4343'}, 
                                {offset: 0.5, color: '#8EED6E'},
                                {offset: 1, color: '#009FF4'},
                            ]
                        )
                    }
                }
              },
              {
                value: 40,
                name: "未完成"
              }
            ]
            
          }
        ],
      };
      myChart4.setOption(option);
    },
  },
};

在这里插入图片描述