echarts柱状图

基本的配置就不说了，整理了以下几个常见问题

1. 当你想把x轴y轴出头的线去掉

美化前:

美化后：

xAxis: {
    type: "category",
    data: ["日新增会员数", "日新增会员同比", "日新增会员环比"],
    axisTick: {show: false}, // 隐藏刻度
    axisLine: {show: false} // 单独隐藏坐标线
},
yAxis: {
    axisTick: {show: false}, // 隐藏刻度
    axisLine: {show: false} // 单独隐藏坐标线
},

2. 当你设置xAxis x坐标轴名称时，没显示全

状况:

xAxis.axisLabel.interval : 坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。直通车

xAxis: {
    type: "category",
    data: ["日新增会员数", "日新增会员同比", "日新增会员环比"],
    axisLabel: { // 如果显示字符过长 就间隔1 设为0
        interval:0 
    }
},

3. 柱状图每根颜色不同

实现效果: 

series: [{
    type: 'bar',
    barWidth : 36,
    data: [2000, 1800, 3000],
    itemStyle: {
        normal: {
            color: function(params) {
                let colorList = [ // 每根颜色顺序
                    "#7F7F7F",
                    "#FFC000",
                    "#558ED5"
                ];
                return colorList[params.dataIndex];
            }
        }
    }
}]

4. 柱状图+折线图,及双y坐标轴,坐标轴文案,更改legend样式,展示之间没空隙

写入多个 yAxis为一个数组

yAxis: [{
    axisLine: { // 单独隐藏坐标线
        show: false
    },
    splitLine : { // y轴横向条设置 分裂线
        lineStyle: {
            color: '#e7eaec'
        }
    }
}, {
    axisLine: { // 单独隐藏坐标线
        show: false
    },
    axisLabel: {
        formatter: function (value, index) {   // 为坐标轴添加百分比        
            return value.toFixed(2) + '%';      
        }   
    },
    splitLine : { // y轴横向条设置 分裂线
        show: false
    },
}]
series: [{
    name: '所有人数',
    type: 'bar',
    barWidth : 36,
    barGap : 0, // 与下一条柱状没距离
    data: [58762, 92012, 95737]
},{
    name: '重构率',
    type: 'line',
    data: [16.05,23,26],
    yAxisIndex: 1 // 用哪个Y轴
}]

legend样式优化

初始化样式

legend: {
    x: 'center', // 居中,
    bottom: 10, // 距离底部
    itemHeight: 4, // 前边的颜色块
    itemGap: 50, // 每个标题之间距离
    textStyle: {padding: [0,0,0,10]}, // 文字距离颜色快距离
    data [{name: '所有人数'}, {name: '>=2单人数'}, {name: '重构率', icon: 'roundRect'}] // 折线图默认为折线图标 改为柱状图标
}

5. 堆叠柱状图

就不贴代码了， 一个属性 在series中对象下的stack='xxx' 想让那几条数据堆叠就设置相同的stack

6 一条正常柱状图 一条堆叠

 盘它

series: [{
    name: '微信关注量',
    type: 'bar',
    braGap: '-100%', // 与下一条贴合在一块
    data: [2000]
}, {
    name: 'App下载量',
    type: 'bar',
    data: ['', 2000] // 第一个位置占位空
}, {
    name: 'App下载量',
    type: 'bar',
    data: ['', 2000] // 第一个位置占位空
}]

暂时就遇到这些问题 如果有问题可以下方评论呦~