zoukankan      html  css  js  c++  java
  • 百度Echarts柱状图实现渐变色并且每条柱子不同色

    // 前面的就不说了,直接从 series 开始
               series: [
                                {
                                    name: seriesName,
                                    type: 'bar',
                                    data: yAxis,
                                    label: {
                                        
                                        show: true,
                                        clickable: true,
                                        position: 'top',
                                        color: '#999999',
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: function (params){
                                                let colorList = [
                                                    ['#FF516D', '#FFD1D9'],
                                                    ['#DF67F5', '#F4C7FC'],
                                                    ['#7245FF', '#D6C9FF'],
                                                    ['#4964FF', '#C4CDFF'],
                                                    ['#56BDED', '#CBE5F1'],
                                                    ['#4EE0B6', '#B7EBDC'],
                                                    ['#6AE34C', '#CAF3C0'],
                                                    ['#FFD140', '#FFEEBA'],
                                                    ['#FA8941', '#FED1B4'],
                                                    ['#FF2B2B', '#FFC4C4']
                                                ]
                                                let index = params.dataIndex;
                               // 这儿判断,如果图表中元素的个数大于预设色值数量时,让整个色值再循环使用 if(params.dataIndex >= colorList.length) { index = params.dataIndex % colorList.length; } return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: colorList[index][0] },
                                 /*
                                 其实中间还可以有中间值的,例如
                                  {
                                    offset: 0.5,
                                    color: red
                                  }
                                 */ { offset: 1, color: colorList[index][1] } ])           }, } } } ]

      

    愿世间所有的美好都会降临到每个人的身边
  • 相关阅读:
    Eclipse常用快捷键
    java中构造方法及其作用
    jsp的验证码实现
    request.getParameter()与request.setAttribute()的区别 (转载)
    HTML表单操作的记录
    Java Collection(转载)
    Java中StringBuffer类append方法的使用
    java中string.trim()函数的使用
    doGet与doPost的区别
    celery
  • 原文地址:https://www.cnblogs.com/boystao/p/14292021.html
Copyright © 2011-2022 走看看