echarts条形图属性设置

 源码

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        left: 'center',
        data: ['较差', '一般', '满意', '非常满意'],
        textStyle:{
            color:'#333',
            fontSize:10,
          },
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
         splitLine: {
            //网格线
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
               color: "#333", //更改坐标轴文字颜色
            //   fontSize: 18, //更改坐标轴文字大小
            },
          },
    },
    yAxis: {
        type: 'category',
        data: ['上海', '广州', '浙江', '中原', '江苏', '西北'],
         axisLabel: {
            show: true,
            textStyle: {
               color: "#333", //更改坐标轴文字颜色
            //   fontSize: 18, //更改坐标轴文字大小
            },
          },
    },
    series: [
        {
            name: '较差',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
            name: '一般',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '满意',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '非常满意',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [1320,820, 832, 901, 934, 1290, 1330]
        }
    ]
};

 代码

function zero_format(){
    return function (params) {
        if (params.value > 0) {
          return params.value;
        } else {
          return "";
        }
      };
}

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    series: [
        {
            name: '直接访问',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight',
                normal: {
                show: true,//关闭图上数据
                position: "insideRight",
                formatter: zero_format(), //不展示为0的
              },
            },
            data: [320, 302, 301, 0, 390, 330, 320]
        },
        {
            name: '邮件营销',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight',
                normal: {
                show: false,//关闭图上数据
                position: "insideRight",
                // formatter: this.zero_format(), //不展示为0的
              },
                
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight',
                normal: {
                show: false,//关闭图上数据
                position: "insideRight",
                // formatter: this.zero_format(), //不展示为0的
              },
            },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight',
                normal: {
                show: false,//关闭图上数据
                position: "insideRight",
                // formatter: this.zero_format(), //不展示为0的
              },
            },
            data: [150, 212, 201, 154, 190, 330, 410]
        },
        {
            name: '搜索引擎',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight',
                normal: {
                show: false,//关闭图上数据
                position: "insideRight",
                // formatter: this.zero_format(), //不展示为0的
              },
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320]
        }
    ]
};

option = {
    tooltip: {
        trigger: 'axis',
        textStyle: {
            // fontSize: arr.initHeight,
            // color: "black", //字体颜色
          },
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (params) {
                return params[0].name + ': ' + params[0].value+"%";
             },
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['上海', '浙江', '广州', '江苏', '中原', '西北'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisTick: {
            //x轴刻度线
            show: true,
          },
          splitLine: {
            //网格线
            show: false,
          },
          axisLine: {
            //坐标轴线
            show: true,
          },
          axisLabel: {
            show: true,
            textStyle: {
              // color: "#c3dbff", //更改坐标轴文字颜色
              fontSize: 18, //更改坐标轴文字大小
            },
          },
        }
        
    ],
    series: [
        {
            name: '完成率',
            type: 'bar',
            barWidth: '40%',
            data: [10, 52, 80, 60, 99, 100],
            //标签
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}%", //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
              },
            },
            itemStyle: {
              barBorderRadius: [50, 0, 0, 50], // 统一设置四个角的圆角大小
              normal: {
                //这里是重点
                color: function (params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = [
                    "#136BFB",
                    "#2BFD9C",
                    "#FFDB5D",
                    "#FD9CFD",
                    "#FC0D1B",
                    "#2DFFFE",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
        },
        
    ]
};

测试 

option = {
    tooltip: {
        trigger: 'axis',
        textStyle: {
            // fontSize: arr.initHeight,
            // color: "black", //字体颜色
          },
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (params) {
                return params[0].name + ': ' + params[0].value+"%";
             },
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['12-17', '12-18', '12-19', '12-20', '12-21', '12-22','12-23','12-24','12-25','12-26'],
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
            show: true,
            textStyle: {
               color: "#fff", //更改坐标轴文字颜色
              fontSize: 14, //更改坐标轴文字大小
            },
          },
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: "kw/h",
            axisTick: {
            //x轴刻度线
            show: true,
          },
          nameTextStyle: {
              color: "#abb8ce",
            },
           
          splitLine: {
            //网格线
            show: true,
          },
          axisLine: {
            //坐标轴线
            show: true,
          },
          axisLabel: {
            show: true,
            color: "#abb8ce",
            textStyle: {
               color: "#fff", //更改坐标轴文字颜色
              fontSize: 18, //更改坐标轴文字大小
            },
          },
        }
        
    ],
    series: [
        {
            name: '完成率',
            type: 'bar',
            barWidth: '40%',
            data: [10, 52, 80, 60, 99, 100,52, 80, 60, 99],
            //标签
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}%", //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
              },
            },
            itemStyle: {
              barBorderRadius: [50, 0, 0, 50], // 统一设置四个角的圆角大小
              normal: {
                //这里是重点
                color: function (params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = [
                    // "#136BFB",
                    // "#2BFD9C",
                    // "#FFDB5D",
                    // "#FD9CFD",
                    // "#FC0D1B",
                    // "#2DFFFE",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
        },
        
    ],
    color:['#898CF6']
};