本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
