本文实例为大家分享了Vue+echarts实现条纹柱状横向图的具体代码,供大家参考,具体内容如下 实现效果: <template> <div id="Busi
本文实例为大家分享了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>
--结束END--
本文标题: vue+echarts实现条纹柱状横向图
本文链接: https://www.lsjlt.com/news/144851.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
一口价域名售卖能注册吗?域名是网站的标识,简短且易于记忆,为在线用户提供了访问我们网站的简单路径。一口价是在域名交易中一种常见的模式,而这种通常是针对已经被注册的域名转售给其他人的一种方式。
一口价域名买卖的过程通常包括以下几个步骤:
1.寻找:买家需要在域名售卖平台上找到心仪的一口价域名。平台通常会为每个可售的域名提供详细的描述,包括价格、年龄、流
443px" 443px) https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294.jpg https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294-768x413.jpg 域名售卖 域名一口价售卖 游戏音频 赋值/切片 框架优势 评估指南 项目规模
0