Echarts图表和timeline时间轴的使用

2024-01-23 20:48
文章标签 使用 图表 echarts timeline 时间轴

本文主要是介绍Echarts图表和timeline时间轴的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

option单独放在一个js文件中

export const barOptionMobiSub = {baseOption: {timeline: {axisType: 'category',realtime: true,autoPlay: false,symbolSize: 8,orient: 'vertical',inverse: true,// z: 2,top: 30,right: 'auto',bottom: 10,left: '80%',data: [],label: {interval: 0,color: '#1781bf'},// symbol: 'roundRect',symbol: 'pin',lineStyle: {show: true,color: '#1781bf',width: 1,type: 'dotted'},controlStyle: {showPlayBtn: false,showPrevBtn: false,showNextBtn: false},itemStyle: {color: '#1781bf'},checkpointStyle: {symbol: 'none'},tooltip: {formatter: []},grid: {containLabel: true},series: [{type: 'bar'}]}},options: [{title: {text: '',left: '30%'},legend: {data: ['累积流量', '累积耗电'],orient: 'vertical',left: 0},toolbox: {feature: {dataView: {}}},tooltip: {},xAxis: {position: 'top',axisLabel: {rotate: 45}},yAxis: {data: [],splitLine: {show: false},axisLabel: {interval: 0,rotate: -45},offset: 0,gridIndex: 0,triggerEvent: true},grid: {left: '20%',right: '20%'// bottom: 80},series: [{name: '累积流量',type: 'bar',data: [],animationDelay: function (idx) {return idx * 10}},{name: '累积耗电',type: 'bar',data: [],animationDelay: function (idx) {return idx * 10 + 100}}],animationEasing: 'elasticOut',animationDelayUpdate: function (idx) {return idx * 5}}]
}

在vue文件中导入

import { barOptionMobiSub } from '@/echartOption'

<template><div><div id="myChart" ref="myChart" :class="{hidden: isDisplay}"></div><el-scrollbar class="list"><div id="selectArea":class="{hidden: !isDisplay, active: activeName == item.name}"v-for="item of districts":key="item.id"@click="selectArea(item)"><div class="head-title" v-text="item.name" :title="item.name"></div></div></el-scrollbar><div id="myChart2" ref="myChart2" :class="{hidden: !isDisplay}"></div><divid="back":class="{hidden: !isDisplay}"@click="isDisplay = !isDisplay"style="cursor:pointer">返回上一级</div></div>
</template><script>
import echarts from 'echarts'
import { mapGetters } from 'vuex'
import { getGroupedReport } from '@/api/report'
// import { getProjectDistricts } from '@/api/project'
import { barOption, barOptionMobi, barOptionSub, barOptionMobiSub } from '@/echartOption'
import { isMobileDevice } from '@/utils/common'
export default {data() {return {listQuery: {keyword: undefined,district: undefined},myChart: null,myChart2: null,isDisplay: false,transId: '',districtVariables: {},activeName: ''}},computed: {...mapGetters(['districts']),// 子图表渲染时获取时间轴上乡镇iddistrictIds() {return this.districts.map(item => item.id)}},async mounted() {// 按各乡镇总体情况统计const resp = await getGroupedReport({ groupby: 'district_variables' })this.districtVariables = resp.resultsthis.draw()},methods: {draw() {// 实例化echarts对象var _this = this_this.myChart = echarts.init(this.$refs.myChart)_this.myChart2 = echarts.init(this.$refs.myChart2)var myChart = _this.myChart// var myChart2 = _this.myChart2if (isMobileDevice()) {myChart.setOption(barOptionMobi)} else {myChart.setOption(barOption)}// 按乡镇统计if (isMobileDevice()) {myChart.setOption({yAxis: {data: _this.districtVariables.district},series: [{ data: _this.districtVariables.variable1 },{ data: [2300, 2490] }]})// 父图表下y轴上的点击事件myChart.on('click', function(params) {if (params.componentType === 'yAxis') {for (var i in _this.districts) {if (_this.districts[i].name === params.value) {_this.isDisplay = !_this.isDisplay_this.transId = _this.districts[i].id// 根据乡镇id展示该乡镇下所有项目的图表，并同时渲染时间轴_this.handleChartEvent(_this.transId, _this.districts[i].name, 'isMobi')}}}})// 手机上时间轴上乡镇列表的点击事件// myChart2.on('timelinechanged', function(timeLineIndex) {//   // 获取乡镇id//   const transId = _this.districtIds[timeLineIndex.currentIndex]//   // 点击时间轴上乡镇列表切换项目展示//   this.handleChartEvent(transId, _this.districts[transId - 1].name, 'isMobi')// })} else {myChart.setOption({xAxis: {data: _this.districtVariables.district},series: [{ data: _this.districtVariables.variable1 },{ data: [2300, 2490] }]})// 父图表下x轴上的点击事件myChart.on('click', function(params) {if (params.componentType === 'xAxis') {for (var i in _this.districts) {if (_this.districts[i].name === params.value) {_this.isDisplay = !_this.isDisplay_this.transId = _this.districts[i].id// 根据乡镇id展示该乡镇下所有项目的图表，并同时渲染时间轴_this.handleChartEvent(_this.transId, _this.districts[i].name)}}}})// 时间轴上乡镇列表的点击事件// myChart2.on('timelinechanged', function(timeLineIndex) {//   // 获取乡镇id//   const transId = _this.districtIds[timeLineIndex.currentIndex]//   // 点击时间轴上乡镇列表切换项目展示//   this.handleChartEvent(transId, _this.districts[transId - 1].name)// }}},selectArea(param) {var _this = thisif (isMobileDevice()) {this.handleChartEvent(param.id, this.districts[param.id - 1].name, 'isMobi')} else {this.handleChartEvent(param.id, this.districts[param.id - 1].name)_this.activeName = param.name}},handleChartEvent(transId, transName, isMobi) {var _this = thisvar myChart2 = _this.myChart2getGroupedReport({district_id: transId, groupby: 'project_variables'}).then(res => {// barOptionSub.baseOption.timeline.currentIndex = transId - 1if (isMobi) {// barOptionMobiSub.baseOption.timeline.data = _this.districts.map(item => item.name)// barOptionMobiSub.baseOption.timeline.tooltip.formatter = _this.districts.map(item => item.name)myChart2.setOption(barOptionMobiSub, true)myChart2.resize()myChart2.setOption({options: [{title: {text: transName + '下属站点统计'},yAxis: {data: res.results.project},series: [{data: res.results.variable1}]}]})} else {// barOptionSub.baseOption.timeline.data = _this.districts.map(item => item.name)// barOptionSub.baseOption.timeline.tooltip.formatter = _this.districts.map(item => item.name)myChart2.setOption(barOptionSub, true)myChart2.resize()myChart2.setOption({// options: [// {title: {text: transName + '下属站点统计'},xAxis: {data: res.results.project},series: [{data: res.results.variable1}]// }// ]})}})}}
}
</script><style lang="scss">
#myChart {position: relative;width: 98%;height: calc(100vh - 106px);//margin: 5px auto;margin: 10px;border: 1px solid #ccc;
}
.list {position: relative;float: left;width: 70px;left: 5px;height: calc(100vh - 136px);border: 1px solid #ccc;overflow: hidden;.el-scrollbar__wrap {overflow-x: hidden !important;}#selectArea {float: left;cursor: pointer;.head-title {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 12px;color: #1781bf;font-weight: 400;padding-left: 10px;height: 30px;line-height: 30px;}}/*#selectArea.active {*//*  background-color: #cfddf3;*//*  width: 78px;*//*}*/
}#myChart2 {position: relative;margin-top: 10px;width: calc(100vw - 100px);left: 80px;right: 5px;// height: 450px;height: calc(100vh - 136px);// margin: 5px auto;border: 1px solid #ccc;
}
#back {margin-top: 10px;margin-left: 10px;font-size: 15px;color: #606266;height: 30px;width: fit-content;
}
.hidden {display: none !important;
}
.active {background-color: #cfddf3;width: 78px;
}
</style>

这篇关于Echarts图表和timeline时间轴的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/637475。

相关文章

Java使用Thumbnailator库实现图片处理与压缩功能

Java使用Thumbnailator库实现图片处理与压缩功能

《Java使用Thumbnailator库实现图片处理与压缩功能》Thumbnailator是高性能Java图像处理库,支持缩放、旋转、水印添加、裁剪及格式转换,提供易用API和性能优化,适合Web应... 目录1. 图片处理库Thumbnailator介绍2. 基本和指定大小图片缩放功能2.1 图片缩放的
阅读更多...
Python使用Tenacity一行代码实现自动重试详解

Python使用Tenacity一行代码实现自动重试详解

《Python使用Tenacity一行代码实现自动重试详解》tenacity是一个专为Python设计的通用重试库,它的核心理念就是用简单、清晰的方式,为任何可能失败的操作添加重试能力,下面我们就来看... 目录一切始于一个简单的 API 调用Tenacity 入门：一行代码实现优雅重试精细控制：让重试按我
阅读更多...
MySQL中EXISTS与IN用法使用与对比分析

MySQL中EXISTS与IN用法使用与对比分析

《MySQL中EXISTS与IN用法使用与对比分析》在MySQL中,EXISTS和IN都用于子查询中根据另一个查询的结果来过滤主查询的记录,本文将基于工作原理、效率和应用场景进行全面对比... 目录一、基本用法详解1. IN 运算符2. EXISTS 运算符二、EXISTS 与 IN 的选择策略三、性能对比
阅读更多...
使用Python构建智能BAT文件生成器的完美解决方案

使用Python构建智能BAT文件生成器的完美解决方案

《使用Python构建智能BAT文件生成器的完美解决方案》这篇文章主要为大家详细介绍了如何使用wxPython构建一个智能的BAT文件生成器,它不仅能够为Python脚本生成启动脚本,还提供了完整的文... 目录引言运行效果图项目背景与需求分析核心需求技术选型核心功能实现1. 数据库设计2. 界面布局设计3
阅读更多...
使用IDEA部署Docker应用指南分享

使用IDEA部署Docker应用指南分享

《使用IDEA部署Docker应用指南分享》本文介绍了使用IDEA部署Docker应用的四步流程：创建Dockerfile、配置IDEADocker连接、设置运行调试环境、构建运行镜像,并强调需准备本... 目录一、创建 dockerfile 配置文件二、配置 IDEA 的 Docker 连接三、配置 Do
阅读更多...
Android Paging 分页加载库使用实践

Android Paging 分页加载库使用实践

《AndroidPaging分页加载库使用实践》AndroidPaging库是Jetpack组件的一部分,它提供了一套完整的解决方案来处理大型数据集的分页加载,本文将深入探讨Paging库... 目录前言一、Paging 库概述二、Paging 3 核心组件1. PagingSource2. Pager3.
阅读更多...
python使用try函数详解

python使用try函数详解

《python使用try函数详解》Pythontry语句用于异常处理,支持捕获特定/多种异常、else/final子句确保资源释放,结合with语句自动清理,可自定义异常及嵌套结构,灵活应对错误场景... 目录try 函数的基本语法捕获特定异常捕获多个异常使用 else 子句使用 finally 子句捕获所
阅读更多...
C++11右值引用与Lambda表达式的使用

C++11右值引用与Lambda表达式的使用

《C++11右值引用与Lambda表达式的使用》C++11引入右值引用,实现移动语义提升性能,支持资源转移与完美转发；同时引入Lambda表达式,简化匿名函数定义,通过捕获列表和参数列表灵活处理变量... 目录C++11新特性右值引用和移动语义左值 / 右值常见的左值和右值移动语义移动构造函数移动复制运算符
阅读更多...
Python对接支付宝支付之使用AliPay实现的详细操作指南

Python对接支付宝支付之使用AliPay实现的详细操作指南

《Python对接支付宝支付之使用AliPay实现的详细操作指南》支付宝没有提供PythonSDK,但是强大的github就有提供python-alipay-sdk,封装里很多复杂操作,使用这个我们就... 目录一、引言二、准备工作2.1 支付宝开放平台入驻与应用创建2.2 密钥生成与配置2.3 安装ali
阅读更多...
C#中lock关键字的使用小结

C#中lock关键字的使用小结

《C#中lock关键字的使用小结》在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时,其他线程无法访问同一实例的该代码块,下面就来介绍一下lock关键字的使用... 目录使用方式工作原理注意事项示例代码为什么不能lock值类型在C#中，lock关键字用于确保当一个线程位于给定实例的代码块中时
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2