如图所见需要实现以上图形效果，根据已完成未完成按钮展示数据图形。
需求：已完成未完成的柱状图形需要进行重叠并且数量多的图像在前数
量少的图形在后，鼠标悬停展示对于图形信息。
以下代码形式进行解析：
<template> <div class="numericalBox"> <p class="title">随访完成情况分析</p> <div class="optionBox"> <el-checkbox-group v-model="checkList" @change="checkbox"> <el-checkbox label="已完成"></el-checkbox> <el-checkbox label="未完成"></el-checkbox> </el-checkbox-group> </div> <div id="echarts_main" style="width:100%;height:320px;"></div> </div></template><script>export default { data () { return { //默认已完成 checkList: ['已完成'] } }, mounted () { //初始化 this.checkbox() }, created () { }, methods: { //首次进入 checkbox () { //模拟数据 let arr = [300, 800, 500, 1000,] let arrList = [700, 400, 900, 600,] let List = [] //对于选项进行判断展示 if (this.checkList.length > 0) { this.checkList.forEach(element => { if (element.indexOf('已完成') === -1 && this.checkList.length <= 1) { this.followStatistics(List, arrList) } else if (element.indexOf('未完成') === -1 && this.checkList.length <= 1) { this.followStatistics(arr, List) } else if (this.checkList.length === 2) { this.followStatistics(arr, arrList) } }); } else { this.followStatistics(List, List) } }, sortList (arr) { return arr.sort((a, b) => { return b.value - a.value }) }, //实现图形变化 followStatistics (completed, incomplete) { // 数据处理 const aList = completed const bList = incomplete const aBar = [] const bBar = [] //对已完成，未完成的数组进行处理 for (let i = 0; i < (aList.length || bList.length); i++) { const tempArr = [ { value: aList[i], //已完成图形颜色 color: '#0aa7dc' }, { value: bList[i], //未完成图形颜色 color: '#fff' }, ] const sortedArr = this.sortList(tempArr) //对已完成未完成数组进行处理给到新数组 aBar.push({ value: sortedArr[0].value, type: 'blue', itemStyle: { color: sortedArr[0].color } }) bBar.push({ value: sortedArr[1].value, type: 'green', itemStyle: { color: sortedArr[1].color } }) } //获取元素id，进行视图渲染 let myChart = this.$echarts.init(document.getElementById('echarts_main')); let option = { tooltip: { trigger: 'axis', // 坐标轴指示器，坐标轴触发有效 axisPointer: { // 默认为直线，可选为：'line' | 'shadow' type: 'shadow' } }, //图形距离 grid: { top: "30px", left: "10px", right: "10px", bottom: "0px", containLabel: true }, //设置全局的字体颜色 textStyle: { color: '#cdcbcc' }, //X轴的操作 xAxis: [ //未完成，X轴底部显示的name { type: 'category', data: ['1季度', '2季度', '4季度', '4季度',], axisTick: { show: false }, axisLine: { show: false }, }, //已完成，悬停时显示的name { type: 'category', data: ['1季度', '2季度', '3季度', '4季度',], //是否显示x坐标轴轴线 axisLine: { show: false }, //是否显示坐标轴刻度 axisTick: { show: false }, //x坐标轴刻度标签是否显示 axisLabel: { show: false }, //是否显示坐标轴在 grid 区域中的分隔区域 splitArea: { show: false }, //是否显示坐标轴在 grid 区域中的分隔线设置 splitLine: { show: false }, }, ], //Y轴的操作 yAxis: [ { type: 'value', axisTick: { show: false }, axisLine: { show: false }, //Y轴显示的最大数跟最小数 min: 0, max: 1200, //坐标轴在 grid 区域中的分隔线 splitLine: { show: true, lineStyle: { type: 'dashed', color: '#0d0e3d' } }, }, ], //鼠标悬停时显示的数据 series: [ { //指定系列的名称，用于tooltip中的显示和legend图例筛选 name: '已完成', //指定图表的类型 type: 'bar', xAxisIndex: 1, //设置柱形的宽度 barWidth: '40%', // 设置柱形之间空隙 barGap: '50%', //图形数值显示 label: { normal: { show: true,//开启显示 position: 'top',//柱形上方 textStyle: { //数值样式 color: '#fff' } } }, //图形形状 itemStyle: { normal: { show: true, barBorderRadius: [25, 25, 25, 25,], color: '#cbcbcc' } }, z: 10,//柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。 //已完成数据 data: aBar }, { name: '未完成', type: 'bar', barWidth: '40%', barGap: '50%', label: { normal: { show: true,//开启显示 position: 'top',//柱形上方 textStyle: { //数值样式 color: '#fff' } } }, itemStyle: { normal: { show: true, barBorderRadius: [25, 25, 25, 25,], color: '#0aa7dc' } }, z: 11,//柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。 //未完成数据 data: bBar } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); //图形宽度随屏幕宽度改变而改变 window.addEventListener("resize", () => { myChart.resize(); }); } },}</script><style lang="scss" scoped>.title { margin: 10px 10px; width: 30%; text-align: center; background-color: #23305c; border-radius: 0 30px 30px 0;}.optionBox { /deep/ .el-checkbox-group { float: right; }}</style>
