echarts蓝绿渐变色柱状图

养猪厂在逃厂长

于 2020-12-10 10:13:53 发布

阅读量496

点赞数

分类专栏： echarts 文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/weixin_42284211/article/details/110947232

版权

echarts 专栏收录该内容

4 篇文章

订阅专栏

本文展示了如何使用Echarts库创建具有蓝绿渐变效果的柱状图，提供了预览图和详细的代码实现过程，适用于前端开发者进行数据可视化设计。

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

预览图：
在这里插入图片描述
代码部分：

var typeTitle=['1212','22','33','1212','22','33']
var typeValue=['122','22','33','122','22','33']
option = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                z: 1,
                type: "shadow",
                shadowStyle:{
                    shadowColor: '#EBF5FF'
                }
            }
        },
        legend: {},
        grid: {
            left: '5%',
            right: '7%',
            top: '10%',
            bottom: '8%',
            containLabel: true
        },
        xAxis: {
            name:'(类别)',
            data: typeTitle,
            splitLine: {
                show: false
            },
            axisTick: {show: false},
            axisLine:{
                show: true,
                lineStyle: {
                    type: "solid",
                    color: "#D9D9D9"
                }
            },
            axisLabel:{
                interval:0,
                textStyle:{color:"#303032"}
            }
        },
        yAxis: {
            name:'(数量)',
            splitLine:{
                show: true,
                lineStyle: {
                    type: "dashed",
                    color: '#D9D9D9'
                }
            },
            axisLine:{
                show: true,
                lineStyle: {
                    type: "solid",
                    color: "#D9D9D9"
                }
            },
            axisLabel:{
                interval:0,
                textStyle:{
                    color:"#94989C"
                }
            }
        },
        series: [
            {
            // name: '类别',
            type: 'bar',
            barMaxWidth: 26,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#7EC45E'
                        },
                        {
                            offset: 1,
                            color: '#4BC3A9'
                        }
                    ], false)
                }
            },
            data: typeValue
        }]
    };