效果图
代码
<template>
<div id="eTask" style="height: 10rem; border: 1px solid red" ></div>
<template/>
<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
const echartPlanTask = () => {
const chartDom = document.getElementById('eTask');
const myChart = echarts.init(chartDom);
let option;
option = {
dataset: [
{
dimensions: ['tType', 'tValue', 'tBackgroudValue'],
source: [
['稳定性测试', 41, 52],
['性能测试', 52, 52],
['冒烟测试', 20, 52],
],
},
{
transform: {
type: 'sort',
config: { dimension: 'tValue', order: 'asc' },
},
},
],
grid: {
height: '70%',
top: 20,
left: 70,
},
xAxis: {
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
},
yAxis: {
type: 'category',
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: { interval: 0 },
},
series: [
{
type: 'bar',
barWidth: '70%',
barCategoryGap: '10%',
itemStyle: {
borderRadius: 10,
},
label: {
show: true,
position: 'inside',
},
encode: { x: 'tValue', y: 'tType' },
datasetIndex: 1,
},
{
type: 'bar',
barWidth: '70%',
barCategoryGap: '10%',
z: -1,
barGap: '-100%', //背景柱状偏移
itemStyle: {
color: '#fff',
borderRadius: 10,
},
label: {
show: true,
position: 'right',
},
encode: { x: 'tBackgroudValue', y: 'tType', label: 'tValue' }, //背景柱状通过label 显示 tVuale
datasetIndex: 1,
},
],
};
option && myChart.setOption(option);
};
onMounted(() => {
echartPlanTask();
});
</script>