zoukankan      html  css  js  c++  java
  • echarts象形柱状图分别设置不同颜色(字体以及柱状)

    var maxData = 5000;
    
    option = {
        xAxis: {
            max: maxData,
            splitLine: {show: false},
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {
                show:false
            },
        },
        yAxis: {
            data: ['货车', '牵引车', '挂车'],
            inverse: true,
            axisTick: {show: false},
             axisLine: {show: false},
            axisLabel: {
                margin: 10,
                color: '#000',
                fontSize: 16
            },
        },
        grid: {
           top: 'center',
            height: 200,
            left: '10%',
            right: "20%"
        },
        series: [{
            type: 'pictorialBar',
            // symbol: spirit,
            symbolRepeat: 'fixed',
            symbolMargin: '50%',
            symbolClip: true,
            symbolSize: 30,
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList = ['#E0852F','#E20F5F', '#42D4CB'];
                        return colorList[params.dataIndex]
                    }
                }
            },
            data: [891,1500, 4000]
     }, {
            type: 'pictorialBar',
            itemStyle: {
                normal: {opacity: 0.2},
            },
            label: {
                    show: true,
                     formatter: function (params) {
                        return params.value + '';
                     },
                    position: 'right',
                    offset: [10, 0],
                    color: '#999',
                      fontSize: 18
                },
            animationDuration: 0,
            symbolRepeat: 'fixed',
             symbolMargin: '50%',
                    // symbol: spirit,
            symbolSize: 30,
            symbolBoundingData: maxData,
            data: [{
                value: 891,
                label: {
                        show: true,
                     formatter: function (params) {
                        return params.value + '';
                     },
                    position: 'right',
                    offset: [10, 0],
                   color: '#E0852F',
                    fontSize: 18
                },
            }, {
                value: 1500,
                label: {
                show: true,
       
    
             formatter: function (params) {
                    
    
    return params.value + '';
             },
            position: 'right',
            offset: [10, 0],
         
    
       color: '#E20F5F',
          
    
          fontSize: 18
            },
            },  {
                value: 4000,
                label: {
                show: true,
       
    
             formatter: function (params) {
                    
    
    return params.value + '';
             },
            position: 'right',
            offset: [10, 0],
         
    
       color: '#42D4CB',
          
    
          fontSize: 18
            },
            }],
            
       
    
     }]
    };
    View Code
  • 相关阅读:
    Ranorex发布2.3版本支持Flex4
    TestComplete基础教程
    2009年缺陷跟踪和测试管理工具使用情况调查报告
    软件自动化测试资源列表
    TestComplete资源列表
    分治算法
    画表格蓝桥杯
    分红酒蓝桥杯
    “硬币方案”蓝桥杯
    微生物增值蓝桥杯
  • 原文地址:https://www.cnblogs.com/huchong-bk/p/13640604.html
Copyright © 2011-2022 走看看