vue使用柱状图每个柱状图颜色不同并渐变

最新推荐文章于 2023-11-28 09:45:48 发布

tan0206

最新推荐文章于 2023-11-28 09:45:48 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/tan0206/article/details/111227199

版权

本文介绍如何在Vue项目中使用Echarts，让每个柱状图的颜色不同并实现渐变效果。提供了两种实现方法，包括网上常见的解决方案和自定义效果，帮助开发者定制个性化的柱状图样式。

摘要由CSDN通过智能技术生成

我们在使用柱状图时官网上的样式和我们的需要时的样式有些不符合

官网样式
这是官网上的样式

我们需的样式在这里插入图片描述

方法1：
（借鉴网上方法）

 series: [{
   
           barWidth:"40%",
           itemStyle:{
   
                normal:{
   
                    //右，下，左，上（0，0，0，1）表示从正右开始向左渐变
                    color: function(params){
   
                        var colorList = [
                                ['#FF0048','#091151'],
                                ['#28B1FF','#091151'],
                                ['#00FCFF','#091151'],
                                ['#8F2BFF','#091151'],
                                ['#FF0048','#091151'],
                                ['#00FCFF','#091151'],
                            ];
                        var colorItem = colorList[params.dataIndex];
                        console.log(colorItem)
                        return new echarts.graphic.LinearGradient(0