前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >echarts-自定义图表的颜色

echarts-自定义图表的颜色

作者头像
用户4344670
发布2019-08-28 11:09:35
2.7K0
发布2019-08-28 11:09:35
举报
文章被收录于专栏:vue的实战vue的实战
有的时候默认的颜色不能达到我们的效果,所以必须要自定义

默认的图表颜色.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]
                }
              ]
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.04.30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 有的时候默认的颜色不能达到我们的效果,所以必须要自定义
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档