Echarts 取消柱状图坐标轴线、设置不同颜色、

谁借莪１个温暖的怀抱￠ 2022-09-05 00:21 244阅读 0赞

取消柱状图坐标轴线 splitLine

xAxis: { 
      type: 'value',
      boundaryGap: [0, 0.01],
      // 取消坐标线
      splitLine: { 
        show: false
      },
      axisLabel: { 
        show: true,
        textStyle: { 
          // color: '#c3dbff', //更改坐标轴文字颜色
          // fontSize : 12 //更改坐标轴文字大小
        }
      }
    },
    
    yAxis: { 
      type: 'category',
      data: ['黄色预警', '红色预警'],
      // 取消坐标线
      // show: false,
      splitLine: { 
        show: false,
      },
      axisLabel: { 
        show: true,
        textStyle: { 
          // color: '#c3dbff', //更改坐标轴文字颜色
          // fontSize : 12 //更改坐标轴文字大小
        }
      }
    },

设置不同颜色

series: [
      { 
        type: 'bar',
        data: [18203,52563],
        itemStyle: { 
          normal: { 
            color: function(params) { 
              //首先定义一个数组，设置颜色
              let colorList = ['#D8E500','#AD4D36']; // 颜色
              return colorList[params.dataIndex]
            },
            // 柱状图上显示数量
            label: { 
              show: true, // 是否显示
              // position: 'right' // 位置
              formatter: '{@value}', // 内容
              color: '#fff' // 文字颜色
            }
          }
        },
      },
    ],

发表评论取消回复

表情：

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

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

相关阅读

相关 echarts 柱状图正负数颜色

![b2fcda83ba9b4a178b0bbdc0bf5c24f8.png][] series: [ { name: 'Evap

忘是亡心i/ 2023年09月23日 16:07/ 0 赞/ 87 阅读

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

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

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

相关 echarts 柱状图

官网： https://echarts.apache.org/zh/tutorial.html 显示柱状图：[https://echarts.apache.org/

深碍√TFBOYSˉ_/ 2022年12月11日 04:28/ 0 赞/ 216 阅读

相关 echarts 柱状图改变颜色

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

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

相关学习echarts设置series.itemStyle.color属性修改柱状图柱体不同颜色

学习echarts设置series.itemStyle.color属性修改柱状图柱体不同颜色原始效果图修改后效果图条形图设置

短命女/ 2022年10月05日 09:56/ 0 赞/ 737 阅读

相关 Echarts 取消柱状图坐标轴线、设置不同颜色、

取消柱状图坐标轴线 splitLine xAxis: { type: 'value', boundaryGap: [0, 0.01],

谁借莪１个温暖的怀抱￠/ 2022年09月05日 00:21/ 0 赞/ 245 阅读

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

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

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

相关 echarts柱状图

引入echarts的js包echarts.min.js 事例地址：echarts.baidu.com/examples.html\chart-type-bar [htt

梦里梦外;/ 2022年06月07日 20:49/ 0 赞/ 251 阅读

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

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

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

相关 echarts 柱状图颜色渐变代码

设置echarts 颜色渐变方法。实例样式： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

心已赠人/ 2022年02月04日 11:55/ 1 赞/ 688 阅读