Echarts学习笔记_柱状图配置详解（进度条式、斜口、图表标注、重叠、显示优先级、组件）

Cxyue.

已于 2023-11-09 17:08:44 修改

阅读量1.2k

点赞数 1

分类专栏：学习笔记文章标签： echarts 学习笔记 vue 前端

于 2023-11-09 17:07:19 首次发布

本文链接：https://blog.csdn.net/qq_44883469/article/details/134313264

版权

学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Echarts学习笔记_柱状图（进度条式、斜边、图表标注、堆叠）

实现效果

在这里插入图片描述

特殊配置说明

1.实现进度条状

xAxis与yAxis配置内容置换即可，yAxis中必须包含data值，否则反转无效。

 // 横坐标
 xAxis: {
     max: 100, //x轴最大范围
     axisLine:false, //是否显示x轴
     splitLine:false //是否显示分割线
 },
 // 纵坐标
 yAxis: {
     axisLine:false, //是否显示y轴
     data: ['sum']
 },

2.实现斜边收口

看网上案例很多都是用 添加一个矢量平行四边形并调整其位置 或 直接利用画布绘制实现，若是对斜边的斜切程度没有严格的要求，可利用 barBorderRadius 配置项实现。
这里有个坑！官网上用的是 borderRadius 配置项，且在官网页尝试有效，但搬到本地就无效了。经尝试后发现将其改为 barBorderRadius 就可以了。

barBorderRadius: 5, // 设置四个角的圆角大小
barBorderRadius: [0, 10, 2, 0] //（顺时针左上，右上，右下，左下）

3.实现图标标注

利用 markPoint 配置项实现。

markPoint: {
     symbol: "triangle", //设置图形形状
     symbolSize: "10", //设置图形大小
     symbolOffset: [0,-15], //设置位置偏移量
     symbolRotate: 180, //设置图形旋转角度
     //是否显示标注的值
     label: {
         show: true,
         position: "right",
         distance: 5,
         fontSize: 14,
         formatter:'{c}%'
     },
     data: [
         { type :"average", name: "平均值"}
     ]
 },

4.实现两组数据重叠

设置 barGap 配置项。
barGap为同系列的柱间距离，用百分比设置其值（如 30%，表示柱子宽度的 30%）。
如果想要两个系列的柱子重叠，可以设置 barGap 为 -100%。

barGap: "-100%", //实现两组数据重叠

5.实现显示优先级根据数据大小自动调整

柱子重叠必然会产生大数据盖住小数据的问题，这里就要根据传值动态设置不同series柱子的 zlevel 值，zlevel 大的在上，zlevel 小在下。
案例中由于设置了背景的颜色，在调整优先级的同时也要关注 showBackground 值的调整。

//动态设置显示优先级 -- 数值大的在底层
 if(this.bar1data[0].value > this.bar1data[1].value){
     this.option.series[0].zlevel = "0";
     this.option.series[1].zlevel = "1";
     this.option.series[1].showBackground = false
 }else{
    this.option.series[0].zlevel = "1";
     this.option.series[0].showBackground = false
     this.option.series[1].zlevel = "0"
 }

完整代码

<template>
  <div class="box">
    <div class="noData" v-if="showNo">
      <img :src="require('../../../assets/error.png')" class="img"> 暂无数据
    </div>
    <div class="map" ref="JJKZ" v-if="!showNo"></div>
  </div>
</template>

<script>

import echarts from 'echarts'

export default {
    props: ['bar1data'],
    data() {
        return {
            myChart: null,
            showNo: false,
            option: {
                title: {
                    text: '四季度交易额',
                    left: -6,
                    top: 0,
                    textStyle: {
                        fontSize: 14,
                        fontHeight: '22px',
                        fontFamily: "Microsoft YaHei-Regular"
                    }
                },
                //直角坐标系区域
                grid: { 
                    left: '0',
                    top: '76px',
                    width:'87%',
                },
                color: ['#68b43c','#3f6aed'],
                // 特殊元素
                graphic: [
                {
                    type: "text",
                    right: "0",
                    top: "42px",
                    style: {
                        text: '100亿',
                        textAlign: "center",
                        // fill: "#FFF",
                        fontSize: 16,
                        fontWeight: "bold",
                        lineHeight: 24
                    }
                }],
                // 横坐标
                xAxis: {
                    max: 100, //x轴最大范围
                    axisLine:false,
                    splitLine:false
                },
                yAxis: {
                    axisLine:false,
                    data: ['sum']
                },
                series: [
                {
                    name: 'bar1',
                    type: "bar",
                    showBackground: true,
                    backgroundStyle: {
                        color: '#f1f1f1',
                        barBorderRadius: [0,10,2,0]
                    },
                    barWidth: 8, //柱条宽度
                    itemStyle: {
                        barBorderRadius: [0,10,2,0]
                    },
                    data:[],
                    markPoint: {
                        symbol: "triangle",
                        symbolSize: "10",
                        symbolOffset: [0,-15], //位置偏移量
                        symbolRotate: 180, //图形旋转角度
                        //是否显示标注的值
                        label: {
                            show: true,
                            position: "right",
                            distance: 5,
                            fontSize: 14,
                            formatter:'{c}%'
                        },
                        data: [
                            { type :"average", name: "平均值"}
                        ]
                    },
                },{
                    type: "bar",
                    showBackground: true,
                    backgroundStyle: {
                        color: '#f1f1f1',
                        barBorderRadius: [0,10,2,0]
                    },
                    barGap: "-100%", //实现两组数据重叠
                    barWidth: 8, //柱条宽度
                    itemStyle: {
                        barBorderRadius: [0,10,2,0]
                    },
                    data:[],
                    markPoint: {
                        symbol: "triangle",
                        symbolSize: "10",
                        symbolOffset: [0,16], //位置偏移量
                        // symbolRotate: 180, //图形旋转角度
                        //是否显示标注的值
                        label: {
                            show: true,
                            position: "right",
                            offset:[0,2],
                            distance: 5,
                            fontSize: 14,
                            lineHeight: 22,
                            // formatter:'{c}%',
                            formatter: function(params) {
                                return params.value + "%\t" + params.value + "亿";
                            },
                        },
                        data: [
                            { type :"average", name: "平均值"}
                        ]
                    },
                }]
            }
        }
    },
    watch: {
        bar1data: {
            deep: true,
            handler(val) {
                this.$nextTick(() => {
                this.init();
                });
            }
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.showNo = false;
            this.drawline(this.option);
        },
        drawline(val) {
            if (
                this.myChart != null &&
                this.myChart != "" &&
                this.myChart != undefined
            ) {
                this.myChart.dispose();
            }

            if (this.bar1data.length == 0) {
                this.showNo = true;
                return false;
            }
            // nextTick() 在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法
            this.$nextTick(() => {
                this.option.series[0].data.push(this.bar1data[0]);
                this.option.series[1].data.push(this.bar1data[1]);
                
				//设置显示优先级 -- 数值大的在底层
                if(this.bar1data[0].value > this.bar1data[1].value){
                    this.option.series[0].zlevel = "0";
                    this.option.series[1].zlevel = "1";
                    this.option.series[1].showBackground = false
                }else{
                   this.option.series[0].zlevel = "1";
                    this.option.series[0].showBackground = false
                    this.option.series[1].zlevel = "0"
                }

                const container = this.$refs.JJKZ;
                this.myChart = echarts.init(container);

                //绘制图表
                this.myChart.setOption(val);

                //根据页面变动自动刷新图形
                const _this = this;
                window.addEventListener("resize", function() {
                _this.myChart.resize();
                });
            });
        }
    }
  
}
</script>

<style lang="scss" scoped>

.box {
  height:100%
}
.map {
  width: 99%;
  height: 100%;
}
.noData {
  color: #333;
}
</style>