Vue Echarts实现柱形图从右向左滚动效果
作者:amoureux555 时间:2023-07-02 16:59:19
效果图
实现代码
vue2 代码如下
<!-- 横向柱状图测试结果 -->
<template>
<div>
<h3>横向柱状图测试</h3>
<div style="width: 500px; height: 500px; background-color: antiquewhite">
<div id="heng" style="width: 100%; height: 100%"></div>
</div>
</div>
</template>
<script>
// import * as echarts from 'echarts';
export default {
name: "hengzhu",
data() {
return {
// data: [1000, 800, 600, 500, 540, 1100, 528, 55, 66, 588, 980, 563, 578, 154, 55, 66, 55, 66, 452, 652]
// data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000]
data: [
2000, 1900, 1800, 1700, 1600, 1500, 1400, 1300, 1200, 1100, 1000, 900,
900, 800, 700, 600, 500, 400, 300, 200,
],
start: 0,
end: 5,
};
},
created() {
this.dingshi();
},
mounted() {
this.heng();
// this.dingshi();
},
methods: {
heng() {
// let that = this;
// alert("执行");
let chartDom = document.getElementById("heng");
let myChart = this.$echarts.init(chartDom);
let option = {
title: {
text: "World Population",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
// xAxis: {
yAxis: {
type: "value",
// boundaryGap: [0, 0.01] // 柱图距离边界的距离
},
// yAxis: {
xAxis: {
type: "category",
inverse: false, // ture: 从上到下显示, 默认:从下到上显示,下面的数值会跟着变动
data: [
"aa",
"bb",
"cc",
"dd",
"ee",
"ff",
"gg",
"hh",
"ii",
"jj",
"kk",
"ll",
"mm",
"nn",
"oo",
"pp",
"qq",
"rr",
"ss",
"tt",
],
},
dataZoom: {
type: "inside", // inside: 表示用内测滑块
startValue: this.start, // 开始显示的数
endValue: this.end, // 结束显示的数
xAxisIndex: [0], // 代表是作用在y轴上的
// yAxisIndex: [0], // 代表是作用在y轴上的
// start: '10',
// end: '1'
// zoomLock: true,
zoomOnMouseWheel: false, // 关闭滚轮缩放
moveOnMouseWheel: true, // 开启滚轮平移
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
},
series: [
{
type: "bar",
// realtimeSort: true, // 这个可以与 yAxis-inverse 配合,让数据正序显示还是逆序显示
data: this.data,
},
],
};
myChart.setOption(option);
// setInterval(function () {
// this.data = [1000, 800, 600, 500, 540, 1100, 528, 55, 66, 588, 980, 563, 578, 154, 55, 66, 55, 66, 452, 1200]
// }, 2000)
},
/** 定时跳动 */
dingshi() {
let that = this;
setInterval(function () {
if (that.end == that.data.length) {
that.start = 0;
that.end = 5;
} else {
that.start = that.start + 1;
that.end = that.end + 1;
}
that.heng();
}, 3000);
},
},
};
</script>
<style scoped></style>
来源:https://blog.csdn.net/qq_46123200/article/details/130754514
标签:Echarts,柱形图
0
投稿
猜你喜欢
使用go实现简易比特币区块链公链功能
2024-04-28 09:18:20
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2024-05-22 10:41:34
在Python中使用defaultdict初始化字典以及应用方法
2021-01-05 02:03:02
运用Python快速的对MySQL数据库进行重命名
2024-01-17 22:36:25
数字格式化转换
2010-08-03 12:22:00
网站鼠标变变变!
2010-10-20 20:09:00
Python实现一维插值方法的示例代码
2022-04-14 02:49:10
python 自动批量打开网页的示例
2021-04-16 00:35:51
深入浅析Python科学计算库Scipy及安装步骤
2022-06-29 12:11:30
Python文件读写w+和r+区别解析
2022-01-12 04:23:04
JavaScript框架比较:选择器
2010-04-20 14:48:00
mysql 常用命令集锦(Linux/Windows)
2024-01-17 07:26:20
python实现文件批量重命名
2022-06-28 15:29:28
详解javascript常用工具类的封装
2024-05-11 09:36:38
python实现二叉树的遍历
2023-06-29 17:45:42
python使用Pandas库提升项目的运行速度过程详解
2021-07-21 12:42:29
Python tempfile模块学习笔记(临时文件)
2022-05-27 02:32:08
Python基础之函数基本用法与进阶详解
2023-07-13 07:57:46
JS中getElementsByClassName与classList兼容性问题解决方案分析
2023-08-25 05:39:06
感知器基础原理及python实现过程详解
2023-11-07 16:24:35