zoukankan      html  css  js  c++  java
  • 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);
  • 相关阅读:
    头插法建立单链表
    顺序表
    栈的顺序存储实现
    折半查找
    myeclipe 快捷键盘
    ztree redio单选按钮
    webuploader上传进度条 上传删除
    svn乱码解决办法
    异构SOA系统架构之Asp.net实现(兼容dubbo)
    RPC框架
  • 原文地址:https://www.cnblogs.com/corolcorona/p/7225356.html
Copyright © 2011-2022 走看看