• ECharts设置柱状图颜色的方式


    通过ECharts的itemStyle设定一个数组设定颜色的循环,详见begin到end的代码

    option= {
    backgroundColor: '#003',
    title: {
    text: '耗时',
    textStyle: {
    color: '#eee'
    }
    },
    tooltip: {
    trigger: 'axis',
    axisPointer: {
    type: 'shadow'
    }
    },
    grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
    },
    xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    axisLine: {
    lineStyle: {
    color: '#eee'
    }
    }
    },
    yAxis: {
    type: 'category',
    data: serviceKey,
    axisLine: {
    lineStyle: {
    color: '#eee'
    }
    }
    },
    series: [
    {
    name: '耗时',
    type: 'bar',
    data: avgTime,
    //begin
    itemStyle: { 
    normal:{ 
    color: function (params){
    var colorList = ['rgb(205,85,85)','rgb(210,105,30)','rgb(0,139,0)','rgb(178,58,238)','rgb(54,100,139)'];
    return colorList[params.dataIndex];
    }
    },
    //鼠标悬停时:
    emphasis: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
    },
    //end
    
    }
    ]
    
    }
    myChart.setOption(option);
  • 相关阅读:
    221. 最大正方形
    9. 回文数
    2. 两数相加
    1. 两数之和
    HDU 1864 最大报销额
    47 java包打成本地maven
    46 数组中的元素进行位置交换
    5 docker安装kibana
    45 vue图片放大预览
    4 docker中安装es
  • 原文地址:https://www.cnblogs.com/corolcorona/p/7225356.html
Copyright © 2020-2023  润新知