echarts-自定义图表的颜色

2019-08-28 11:09:35 浏览数 (1)

有的时候默认的颜色不能达到我们的效果,所以必须要自定义

默认的图表颜色.png



自定义图表的颜色.png

代码语言:javascript复制
 series : [
                {
                  name:'直接访问',
                  type:'bar',
                  // 自定义颜色的实现
                  itemStyle: {
                    normal: {
                      //定义一个list,通过list获取颜色,
                      color: function(params) {                      
                        var colorList = [
                          '#003366','#CCFFFF','#FCCE10','#E87C25','#27727B',
                          '#FE8463','#9BCA63'
                        ];
                        return colorList[params.dataIndex]
                      },
                      //以下为是否显示,显示位置和显示格式
                      label: {
                        show: true,
                        position: 'top',
//                             formatter: '{c}'
                        formatter: '{b}n{c}'
                      }
                    }
                  },
                  //设置柱的宽度
                  barWidth: '60%',
                  data:[10, 52, 200, 334, 390, 330, 220]
                }
              ]

0 人点赞