echarts柱形图渐变

最新推荐文章于 2024-07-23 11:06:08 发布

@才华有限公司

最新推荐文章于 2024-07-23 11:06:08 发布

阅读量786

点赞数 2

分类专栏： Echarts 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/gentleman_hua/article/details/124668488

版权

Echarts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用Echarts库创建带有渐变色效果的柱状图。代码示例详细解释了配置项，包括X轴、Y轴的设置，以及柱状图的渐变色实现，通过`LinearGradient`实现从上到下的颜色渐变。此外，还提到了`this.$echarts`在Vue应用中的用法。

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

比较简单直接看代码

![在这里插入图片描述](https://img-blog.csdnimg.cn/056db2a02b5a4c6bbbfc5502617081fb.png

       let option = {
                    xAxis: {
                        type: "category",
                        data: ["客车", "货车", "危化品车", "未知车型"],
                        // X轴坐标颜色
                        axisLine: {
                            lineStyle: {
                                color: "#6483E5",
                            },
                        },
                    },
                    yAxis: {
                        type: "value",
                        // 分割线
                        splitLine: {
                            show: true,
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ["#1B2546"],
                            },
                        },
                        // Y轴坐标颜色
                        axisLine: {
                            lineStyle: {
                                color: "#6483E5",
                            },
                        },
                    },
                    tooltip: {},
                    // 标题
                    legend: {
                        bottom: 0,
                        textStyle: {
                            color: "#f1f1f1",
                            fontWeight: "bold",
                            fontSize: 14,
                        },
                    },
                    color: ["#25B5FF", "#FF5003"],
                    series: [{
                            name: `${this.firstRegion}`,
                            type: "bar",
                            data: firstRegionData,
                            barWidth: 20, // 柱状 宽度
                            itemStyle: {
                                barBorderRadius: 10, // 柱状倒角
                                color: new this.$echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [{
                                            offset: 0,
                                            color: '#6483E5'
                                        },
                                        {
                                            offset: 1,
                                            color: '#25B5FF'
                                        }
                                    ]
                                )
                            },
                        },
                        {
                            name: `${this.secondRegion}`,
                            type: "bar",
                            data: secondRegionData,
                            barWidth: 20, // 柱状 宽度
                            itemStyle: {
                                barBorderRadius: 10, // 柱状倒角
                                color: new this.$echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [{
                                            offset: 0,
                                            color: '#F69517'
                                        },
                                        {
                                            offset: 1,
                                            color: '#E87526'
                                        }
                                    ]
                                )
                            },
                        },
                    ],
                };

主要代码

  						 itemStyle: {
                                barBorderRadius: 10, // 柱状倒角
                                color: new this.$echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [{
                                            offset: 0,
                                            color: '#F69517'
                                        },
                                        {
                                            offset: 1,
                                            color: '#E87526'
                                        }
                                    ]
                                )
                            },