本文实例为大家分享了vue+echarts实现条纹柱状横向图的具体代码，供大家参考，具体内容如下
实现效果：
<template>
<div id="BusinessTop5Chart" style="flex: 1; height: 300px; width: 614px; margin-left: 10px"></div>
</template>
<script>
import { getNoteMatters } from '@/api/government';
const colors = [
'rgba(248, 75, 110, 1)',
'rgba(239, 142, 47, 1)',
'rgba(234, 202, 4, 1)',
'rgba(79, 224, 255, 1)',
'rgba(106, 196, 255, 1)',
];
export default {
data() {
return {
list: [],
list1: [],
list2: [],
Top5ListName: [],
Top5ListValue:[]
};
},
mounted() {
this.getNoteMatters();
},
methods: {
initMap() {
var myChart = this.$echarts.init(document.getElementById('BusinessTop5Chart'));
const option = {
grid: {
top: 20,
bottom: 30,
left: 10,
right: 150,
containLabel: true,
},
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
xAxis: {
type: 'value',
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
position: 'top',
},
yAxis: {
type: 'category',
data: this.Top5ListName,
inverse: true, //倒叙
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.85)',
fontSize: 14,
fontFamily: 'TencentSans',
},
padding: [0, 0, 20, 0],
inside: true,
verticalAlign: 'bottom',
},
},
series: [
{
type: 'bar',
barGap: '-90%',
barMaxWidth: 14,
z: 0,
label: {
normal: {
show: false,
position: 'right',
fontSize: 14,
offset: [16, 0],
},
},
data: this.list,
},
{
type: 'bar',
barGap: '-90%',
barMaxWidth: 14,
itemStyle: {
color: 'rgba(26, 49, 99, 0.5)',
},
tooltip: {
show: false,
},
data: this.list1,
},
{
type: 'pictorialBar',
symbolRepeat: 'fixed',
symbolMargin: 4,
symbol: 'rect',
symbolClip: true,
symbolSize: [1, 14],
symbolPosition: 'start',
itemStyle: {
color: 'rgba(0,0,0,1)',
},
data: this.list2,
},
],
};
myChart.setOption(option);
},
getNoteMatters() {
getNoteMatters().then((res) => {
const { status, data } = res;
const { businessTpo5 } = JSON.parse(data);
if (status === 200) {
// this.Top5ListName=[
// {0: "三亚市税务局",
// 1: "三亚市市场监督管理局",
// 2: "三亚市公安局",
// 3: "三亚市邮政管理局",
// 4: "三亚市社会保险服务中心窗口"}]
this.Top5ListName = businessTpo5.map((item) => {
return item.agencies;
});
// this.Top5ListValue=[{0: 189354, 1: 56933, 2: 13267, 3: 10979, 4: 9054}]
this.Top5ListValue = businessTpo5.map((item) => {
return Number(item.num);
});
const max = Math.max.apply(null, this.Top5ListValue);
// this.list=[{itemStyle:
// color: "rgba(248, 75, 110, 1)"
// name: "三亚市税务局"
// num: "189354"
// rate: "57.03%"
// value: 189354}]
this.list = businessTpo5.map((item, index) => {
let obj = {
name: item.agencies,
value: Number(item.num),
num: item.num,
rate: item.rate,
itemStyle: {
color: colors[index],
},
};
return obj;
});
// this.list1=[
// label:{
// normal:{
// color: colors[index],
// fontSize: 14
// position: "right"
// show: true
// offset:[16,0]
// name: "三亚市税务局"
// formatter(){return(item.num+'单位'+''+item.rate)}
// rate: "57.03%"
// value: 189354}}
this.list1 = businessTpo5.map((item, index) => {
let obj = {
name: item.agencies,
value: max,
label: item.num,
rate: item.rate,
label: {
normal: {
show: true,
position: 'right',
fontSize: 14,
color: colors[index],
offset: [16, 0],
formatter() {
return (
item.num + '件' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + item.rate
);
},
},
},
};
return obj;
});
// this.list2=[{label: "189354"
// name: "三亚市税务局"
// rate: "57.03%"
// value: 189354}]
this.list2 = businessTpo5.map((item) => {
let obj = {
name: item.agencies,
value: Number(item.num),
label: item.num,
rate: item.rate,
};
return obj;
});
}
this.initMap();
});
},
},
};
</script>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持阿兔在线工具。
