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。

相关文章

中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
pdfmake生成pdf的使用

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据，将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma
阅读更多...
零基础学习Redis(10) -- zset类型命令使用

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合，内部除了存储元素外，还会存储一个score，存储在zset中的元素会按照score的大小升序排列，不同元素的score可以重复，score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]
阅读更多...
git使用的说明总结

git使用的说明总结

Git使用说明 下载安装(下载地址) macOS: Git - Downloading macOS Windows: Git - Downloading Windows Linux/Unix: Git (git-scm.com) 创建新仓库 本地创建新仓库：创建新文件夹，进入文件夹目录，执行指令 git init ，用以创建新的git 克隆仓库 执行指令用以创建一个本地仓库的
阅读更多...
【北交大信息所AI-Max2】使用方法

【北交大信息所AI-Max2】使用方法

BJTU信息所集群AI_MAX2使用方法 使用的前提是预约到相应的算力卡，拥有登录权限的账号密码，一般为导师组共用一个。 有浏览器、ssh工具就可以。 1.新建集群Terminal 浏览器登陆10.126.62.75 （如果是1集群把75改成66） 交互式开发 执行器选Terminal 密码随便设一个（需记住） 工作空间：私有数据、全部文件 加速器选GeForce_RTX_2080_Ti
阅读更多...
【Linux 从基础到进阶】Ansible自动化运维工具使用

【Linux 从基础到进阶】Ansible自动化运维工具使用

Ansible自动化运维工具使用 Ansible 是一款开源的自动化运维工具，采用无代理架构（agentless），基于 SSH 连接进行管理，具有简单易用、灵活强大、可扩展性高等特点。它广泛用于服务器管理、应用部署、配置管理等任务。本文将介绍 Ansible 的安装、基本使用方法及一些实际运维场景中的应用，旨在帮助运维人员快速上手并熟练运用 Ansible。 1. Ansible的核心概念
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2