美文网首页
echart柱状图设置宽度颜色网格线

echart柱状图设置宽度颜色网格线

作者: lesdom | 来源:发表于2019-12-05 18:09 被阅读0次

代码

let option = {
  xAxis: {
      type: 'category',
      name: '维度名称',
      nameTextStyle: {
        padding: [25, 0, 0, 0]
      },
      data: picxData
  },
  yAxis: {
    splitLine:{
      show:false     //去掉网格线
    }, 
    name: '资产总数量',
    type: 'value'
  },
  series: [{
    type: 'bar',
    itemStyle : {
      normal : {
        color: function(params) {
            // build a color map as your need.
            let colorList = [
              '#5B9BD5','#ED7D31','#FFC000'                       
            ];
            return colorList[params.dataIndex]
        },
        label: {
          show: true,
          position: 'top',                              
          // padding: [0,0,10,0],                  
        }
      },
    },  
    barWidth : 30,//柱图宽度
    data: picyData,              
  }]
}

网站导航

网站导航

相关文章

  • echart柱状图设置宽度颜色网格线

    代码 网站导航 网站导航

  • 记Echarts的一些用法

    Echarts柱状图每个柱设置不同的颜色 效果如下图 Echarts取消网格线 比如X轴的设置 show属性是设置...

  • Echarts 修改样式

    1,修改色块字体颜色 2,修改标题颜色 3,修改柱状图颜色 4,修改坐标轴颜色、网格线颜色 5,坐标轴文本太长,倾...

  • echart 学习记录

    echart 学习记录 注意:echart的颜色 格式应为 '#xxx',不要设置‘rgb(x,x,x)’,应为r...

  • SwiftUI 设置边框、透明度、阴影

    前言 1、设置边框 1.1 设置边框颜色 默认为1的边框 解释 1.2 设置边框颜色、宽度 设置边框颜色、宽度 2...

  • Echarts地图自定义颜色

    通过visualMap设置,设置visualMap中的min最小值、max最大值、color颜色值,echart会...

  • webpack+echart某折点变色

    webpack+echart某折点变色 一、echart折线图某折点变色 二、现在我们已经成功设置了异常拐点的颜色...

  • Echart例子-笔录

    横向术状图(颜色根据条件) 横向柱状图(指定数据到坐标轴的映射) 多条数据散点图 Echart多饼图例子 1、先看...

  • 一个像素的边框

    在一个像素边框的创建时,要先设置边框颜色再设置边框宽度 如果先设置宽度再设置颜色,则会显示一个点的边框。 titl...

  • vue 三级联动

    vue项目中 tab切换使用echart 会有问题。 设置的宽度不生效,为100px,因为tab不切换的时候是没有...

网友评论

      本文标题:echart柱状图设置宽度颜色网格线

      本文链接:https://www.haomeiwen.com/subject/ltljgctx.html