e-charts水平柱状图改变柱子颜色为渐变色

快来打我* 2022-10-05 01:51 182阅读 0赞

series: [
      {
        type: "bar",
        name: "2020年",
        showBackground: true,
        backgroundStyle: {
          color: "#d7ffff3d",
          barBorderRadius: 10,
        },
        itemStyle: {
          normal: {
            barBorderRadius: 10,
            //主要是这里的LinearGradient的第一个参数我设置了1
            color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0.7, [
              {
                offset: 0,
                color: "#FFC800",
              },
              {
                offset: 1,
                color: "#30456270",
              },
            ]),
          },
        },
        barGap: "10%",
        data: resp.data[Object.keys(resp.data)[2]],
      },
    ],

> 效果图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70]: /images/20221005/a00afd56813e4ae48c0446096c6dfcee.png

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts修改柱状图柱子的宽度

![在这里插入图片描述][198b80c65c724e61a9b1ac41f8ca946e.png_pic_center] 第009个 [点击查看专栏目录][Link 1]

今天药忘吃喽~/ 2024年03月27日 12:01/ 0 赞/ 73 阅读

相关 vue+highCharts----图表添加渐变色（柱状图、面积图）

柱状图和面积图的设置方式一样，唯一不同的是柱状图的设置属性是color，面积图的设置属性是fillColor。具体代码见文章内容。 1、先上效果图： ![在这里插入

Love The Way You Lie/ 2023年01月15日 03:45/ 0 赞/ 227 阅读

相关 Echarts柱状图的每个柱子设置不同颜色

主要就是这个： series: [ { name: '调用次数', typ

不念不忘少年蓝@/ 2023年01月14日 01:41/ 0 赞/ 180 阅读

相关 echarts 柱状图改变颜色

![在这里插入图片描述][20210402094918320.png] [20210402094918320.png]: /images/20221022/4df04086

忘是亡心i/ 2022年11月15日 14:29/ 0 赞/ 215 阅读

相关 e-charts水平柱状图改变柱子颜色为渐变色

series: [ { type: "bar", name: "2020年", showBackground

快来打我*/ 2022年10月05日 01:51/ 0 赞/ 183 阅读

相关【echarts】修改柱状图颜色

创建一个柱状图对象 <div id="barGragh" style="width: 100%;height:400px;margin-bottom: 5px">

迈不过友情╰/ 2022年06月17日 20:09/ 0 赞/ 328 阅读

相关 echarts如何给柱状图设置渐变色

在series 的 itemStyle 里面进行设置color的属性值， itemStyle: \{ normal: \{

待我称王封你为后i/ 2022年04月13日 20:49/ 0 赞/ 1317 阅读

相关 Echarts柱状图的每个柱子显示不同颜色

在使用Echarts制作柱状图的时候，通常在横轴每个标签只有一个柱子的时候，每个柱子的颜色都是一样的， ![20181225092844335.png][] 然而，很多时候

妖狐艹你老母/ 2022年04月10日 04:41/ 0 赞/ 629 阅读

相关 AntV G2 柱状图改变柱子颜色+柱子上方显示文字与图标

AntV G2，对柱状图进行一些自定义： 1.柱子颜色自定义 2.柱子上方显示文本 3.柱子上方显示图标 ![watermark_type_ZmFuZ3poZW5naG

亦凉/ 2021年11月08日 21:24/ 0 赞/ 2476 阅读

相关 ECharts 柱状图改变柱子颜色+柱子上方显示文字与图标

ECharts，对柱状图进行一些自定义： 1.柱子颜色自定义 2.柱子上方显示文本 3.柱子上方显示图标 ![watermark_type_ZmFuZ3poZW5naG

左手的ㄟ右手/ 2021年11月08日 21:10/ 0 赞/ 5812 阅读