本文实例为大家分享了Vue+echarts实现进度条式柱状图的具体代码,供大家参考,具体内容如下 效果图如下 代码: <template> <div cl
本文实例为大家分享了Vue+echarts实现进度条式柱状图的具体代码,供大家参考,具体内容如下
效果图如下
代码:
<template>
<div class="content-page">
<div class="tab-content">
<div id="myChart1"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
option: {
color: ["#157ef5"],// 设置柱状图的颜色
textStyle: {
color: "#828282"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "line"
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "value",
// 设置x轴显示几段
min: 0,
max: 100,
interval: 50,
axisTick: { show: false },
axisLine: {
lineStyle: {
color: "transparent"
}
}
},
yAxis: {
type: "cateGory",
data: ["财政收入", "总部经济"],
axisTick: { show: false },
axisLine: {
lineStyle: {
color: "#e0e0e0"
}
},
inside: true,
textStyle: {
color: "#000"
}
},
series: [
{
type: "bar",
itemStyle: {
color: "#f1f1f1",// 定义柱形的背景色
borderRadius:[0, 10, 10, 0] //定义背景柱形的圆角
},
barGap: "-100%", //设置柱形重合的重要步骤
data: [100, 100],
animation: false, // 关闭动画效果
barWidth: "22px",// 设置柱形宽度
},
{
type: "bar",
data: [65, 75],
barWidth: "22px",
barGap: "-100%", //设置柱形重合的重要步骤
itemStyle: {
borderRadius:[0, 10, 10, 0],// 定义柱形的圆角
color: function(params) {
var colorList = ['#3C90EB', '#B573F4', '#F9B341', '#F9B341', '#91c7ae'];
return colorList[params.dataIndex]
}
},
}
]
}
}
},
mounted() {
this.getChartData();
},
methods: {
getChartData() {
let myChart1 = echarts.init(document.querySelector("#myChart1"));
myChart1.setOption(this.option); // 设置图表初始化数据
setTimeout(function() {
window.onresize = function() {
myChart1.resize();// 图表根据窗口大小进行自适应
};
}, 200);
}
}
}
</script>
<style lang="less" scoped>
#myChart1 {
width: 600px;
height: 400px;
}
</style>
--结束END--
本文标题: vue+echarts实现进度条式柱状图
本文链接: https://www.lsjlt.com/news/134659.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