echarts 中如何添加左右滚动条 数据如何进行堆叠如何配置那些数据使用那个数据轴

左右滚动条的效果

此项的具体配置可参考 https://echarts.apache.org/zh/option.html#dataZoom-inside.moveOnMouseWheel

dataZoom: [{id: 'dataZoomX',type: 'inside',// start: 0,// end: this.xAxis.length > 5 ? 10 : 100,startValue: this.xAxis.length > 5 ? 5 : 0,//数据窗口范围的起始数值(绝对数值)。如果设置了dataZoom-inside.start 则startValue失效。具体可以参考echarte中的配置项endValue: this.xAxis.length > 5 ? 9 : 100,zoomOnMouseWheel: false,//表示不按任何功能键,鼠标滚轮能触发缩放moveOnMouseMove: true,//表示不按任何功能键,鼠标移动能触发数据窗口平移moveOnMouseWheel: true//表示不按任何功能键,鼠标移动能触发数据窗口平移。}],

数据堆叠效果

{name: '累计收入',type: 'bar',// 数据堆叠stack: 'total', // 柱形图宽度barMaxWidth:8,// barGap:"50%",itemStyle:{color: '#FF7F50'},data:this.dataItem.accumulatedIncome},

svg生成lengend图标

legend: {top: 14,// right:3,itemHeight:10,itemWidth:12,textStyle:{fontSize:14,color:"#000"},data: [{name:"累计收入",icon:"path://m 0 -1 h 10 v 10 h -10z"},{name:"预计收入",icon:"path://m 0 -1 h 10 v 10 h -10z"},{name:"累计实际收入",icon:"path://m 0 -1 h 10 v 2 h -12z"},{name:"累计预计收入",icon:"path://m 0 -1 h 10 v 2 h -12z"}]},

demo代码

<!-- eslint-disable eqeqeq -->
<!-- eslint-disable no-undef -->
<template><div><div ref='demo5' style="width:800px;height: 600px;"></div></div>
</template>
<script>
import * as echarts from "echarts";
export default {data() {return {xAxis:['周一','周二','周三','周四','周五','周六','周日'],//横坐标dataItem:{accumulatedEstimate:[74, 19, 152, 101, 77, 99, 38],//累计预计收入accumulatedActual:[95, 110, 82, 181, 86, 98, 139],//累计实际收入expectedRevenue:[177, 68, 134, 202, 24, 184, 194],// 预计收入accumulatedIncome:[218, 39, 159, 49, 186, 80, 204],// 累计收入}}},async mounted() {this.initChart()},methods: {initChart() {let myChart = echarts.init(this.$refs.demo5);let option = {title:{show:false},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},// 格式化弹窗中的内容formatter:(params)=>{let dateTime = params[0].axisValue// 生成let element = params.map(item => {let width = '10px'let height = '2px'if (['累计收入','预计收入'].includes(item.seriesName)) {width = '10px'height = '10px'}return `<div style="padding-top: 12px;display: flex;justify-content: space-between;"><div><span style="display: inline-block;width: ${width};height: ${height};background-color: ${item.color};margin-right: 8px;"></span><span>${item.seriesName}</span></div><div>${item.value}</div></div>`}).join("");// 渲染return `<div style="width: 180px;height: 175px;font-size: 14px;color: #000;padding:0 10px 10px"><header style="margin-bottom: 4px;">${dateTime}</header><main>${element}</main></div>`},confine: true},legend: {top: 14,// right:3,itemHeight:10,itemWidth:12,textStyle:{fontSize:14,color:"#000"},data: [{name:"累计收入",icon:"path://m 0 -1 h 10 v 10 h -10z"},{name:"预计收入",icon:"path://m 0 -1 h 10 v 10 h -10z"},{name:"累计实际收入",icon:"path://m 0 -1 h 10 v 2 h -12z"},{name:"累计预计收入",icon:"path://m 0 -1 h 10 v 2 h -12z"}]},grid: {left: '3%',right: '3%',bottom: '2%',containLabel: true},// dataZoom: [{//   id: 'dataZoomX',//   type: 'inside',//   // start: 0,//   // end: this.xAxis.length > 5 ? 10 : 100,//   startValue: this.xAxis.length > 5 ? 5 : 0,//数据窗口范围的起始数值(绝对数值)。如果设置了dataZoom-inside.start 则startValue失效。//   endValue: this.xAxis.length > 5 ? 9 : 100,//   zoomOnMouseWheel: false,//   moveOnMouseMove: true,//   moveOnMouseWheel: true// }],xAxis: [{type: 'category',splitLine:{show:false,},axisTick:{show:false,},axisLine:{show:false,},axisPointer: {type: 'shadow'},nameTextStyle:{color: 'rgba(0,0,0,0.6)',fontWeight: 400,fontSize: 12 },axisLabel:{color: 'rgba(0,0,0,0.6)',fontWeight: 400,fontSize: 12 },data:this.xAxis}],yAxis: [{name: "单位(万元)",type: 'value',min: 0,// max: 200000,// interval: 40000,axisPointer:{show:false,},// y轴名字的配置项nameTextStyle:{align:'left',padding: [0,0,0,-25],color: 'rgba(0,0,0,0.6)',fontWeight: 400,fontSize: 12 },nameGap: 15,splitLine :{lineStyle:{type:'solid',//虚线color: 'rgba(0,0,0,0.15)',width: 1,},show: true //隐藏}},{type: 'value',name: "累计(万元)",min: 0,// max: 100,// interval: 20,axisLabel: {formatter: '{value}'},splitLine:{show:false,},axisPointer:{show:false,},// y轴名字的配置项nameTextStyle:{align:'right',padding: [0,-25,0,0],color: 'rgba(0,0,0,0.6)',fontWeight: 400,fontSize: 12 },nameGap: 15,}],series: (()=>{let series = [{name: '累计收入',type: 'bar',// 数据堆叠stack: 'total', // 柱形图宽度barMaxWidth:20,// barGap:"50%",itemStyle:{color: '#FF7F50'},data:this.dataItem.accumulatedIncome},{name: '预计收入',type: 'bar',// 数据堆叠stack: 'total',// 柱形图宽度barMaxWidth:20,// barGap:"50%",itemStyle:{color: '#FFE4B5'},data:this.dataItem.expectedRevenue},{name: '累计实际收入',type: 'line',smooth: true, // 平滑曲线// stack: 'total',// barMaxWidth:8,// barGap:"50%",itemStyle:{color: '#800080',width: 2},// 使用双y轴的时候那些数据使用那个轴yAxisIndex: 1,data:this.dataItem.accumulatedActual},{name: '累计预计收入',type: 'line',smooth: true, // 平滑曲线// stack: 'total',// barMaxWidth:8,// barGap:"50%",itemStyle:{color:'#A0522D',width: 2},yAxisIndex: 1,data:this.dataItem.accumulatedEstimate},]return series})()}myChart.setOption(option, true);},},}
</script><style lang="scss" scoped></style>

效果如下

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/200071.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RoCE、IB和TCP等网络的基本知识及差异对比

目前有三种RDMA网络&#xff0c;分别是Infiniband、RoCE(RDMA over Converged Ethernet)、iWARP。 其中&#xff0c;Infiniband是一种专为RDMA设计的网络&#xff0c;从硬件级别保证可靠传输 &#xff0c;技术先进&#xff0c;但是成本高昂。 而RoCE 和 iWARP都是基于以太网的…

004 OpenCV akaze特征点检测匹配

目录 一、环境 二、akaze特征点算法 2.1、基本原理 2.2、实现过程 2.3、实际应用 2.4、优点与不足 三、代码 3.1、数据准备 3.2、完整代码 一、环境 本文使用环境为&#xff1a; Windows10Python 3.9.17opencv-python 4.8.0.74 二、akaze特征点算法 特征点检测算法…

使用pytorch利用神经网络原理进行图片的训练(持续学习中....)

1.做这件事的目的 语言只是工具,使用python训练图片数据,最终会得到.pth的训练文件,java有使用这个文件进行图片识别的工具,顺便整合,我觉得Neo4J正确率太低了,草莓都能识别成为苹果,而且速度慢,不能持续识别视频帧 2.什么是神经网络?(其实就是数学的排列组合最终得到统计结果…

ElementUI及ElementUI Plus Axure RP高保真交互元件库及模板库

基于ElementUI2.0及ElementUI Plus3.0二次创作的ElementUI 元件库。2个版本的原型图内容会有所不同&#xff0c;ElementUI Plus3.0的交互更加丰富和高级。你可以同时使用这两个版本。 不仅包含Element UI 2.0版&#xff0c;还包含Element Plus 3版本。Element 2版支持Axure 8&…

接口自动化项目落地之HTTPBin网站

原文&#xff1a;https://www.cnblogs.com/df888/p/16011061.html 接口自动化项目落地系列 找个开源网站或开源项目&#xff0c;用tep实现整套pytest接口自动化项目落地&#xff0c;归档到电子书&#xff0c;作为tep完整教程的项目篇一部分。自从tep完整教程发布以后&#…

基于单片机的公共场所马桶设计(论文+源码)

1.系统设计 本课题为公共场所的马桶设计&#xff0c;其整个系统架构如图2.1所示&#xff0c;其采用STC89C52单片机为核心控制器&#xff0c;结合HC-SR04人体检测模块&#xff0c;压力传感器&#xff0c;LCD1602液晶&#xff0c;蜂鸣器&#xff0c;L298驱动电路等构成整个系统&…

RedisInsight——redis的桌面UI工具使用实践

下载 官网下载安装。下载地址在这里 填个邮箱地址就可以下载了。 安装使用。 安装成功后开始使用。 1. 你可以add一个地址。或者登录redis cloud 去auto-discover 2 . 新增你的redis库地址。注意index的取值 3。现在可以登录到redis了。看看结果 这是现在 在服务器上执行…

C#核心笔记——(二)C#语言基础

一、C#程序 1.1 基础程序 using System; //引入命名空间namespace CsharpTest //将以下类定义在CsharpTest命名空间中 {internal class TestProgram //定义TestProgram类{public void Test() { }//定义Test方法} }方法是C#中的诸多种类的函数之一。另一种函数*&#xff0c;还…

BLIP-2:冻结现有视觉模型和大语言模型的预训练模型

Li J, Li D, Savarese S, et al. Blip-2: Bootstrapping language-image pre-training with frozen image encoders and large language models[J]. arXiv preprint arXiv:2301.12597, 2023. BLIP-2&#xff0c;是 BLIP 系列的第二篇&#xff0c;同样出自 Salesforce 公司&…

数据仓库高级面试题

数仓高内聚低耦合是怎么做的 定义 高内聚&#xff1a;强调模块内部的相对独立性&#xff0c;要求模块内部的元素尽可能的完成一个功能&#xff0c;不混杂其他功能&#xff0c;从而使模块保持简洁&#xff0c;易于理解和管理。 低耦合&#xff1a;模块之间的耦合度要尽可能的…

python实现炫酷的屏幕保护程序

shigen日更文章的博客写手&#xff0c;擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长&#xff0c;分享认知&#xff0c;留住感动。 上次的文章如何实现一个下班倒计时程序的阅读量很高&#xff0c;觉得也很实用酷炫&#xff0c;下边是昨天的体验…

基于STC12C5A60S2系列1T 8051单片机的液晶显示器LCD1602显示两行常规字符应用

基于基于STC12C5A60S2系列1T 8051单片机的液晶显示器LCD1602显示两行常规字符应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍液晶显示器LCD1602简单介绍通过液晶显…

Java实现象棋算法

象棋算法包括搜索算法、评估函数和剪枝算法。以下是一个简单的实现&#xff1a; 搜索算法&#xff1a;使用极大极小值算法&#xff0c;即每个玩家都会做出最好的选择&#xff0c;考虑到对方也会做出最好的选择&#xff0c;所以需要搜索多层。 public int search(int depth, i…

(二)pytest自动化测试框架之添加测试用例步骤(@allure.step())

前言 在编写自动化测试用例的时候经常会遇到需要编写流程性测试用例的场景&#xff0c;一般流程性的测试用例的测试步骤比较多&#xff0c;我们在测试用例中添加详细的步骤会提高测试用例的可阅读性。 allure提供的装饰器allure.step()是allure测试报告框架非常有用的功能&am…

Linux下安装两个版本python

1 python下载&#xff1a; 官网地址&#xff1a;Download Python | Python.org 第一&#xff1a;点击下载如下图&#xff1a; 第二&#xff1a;找到对应的python版本源码包&#xff1a; 点击右键复制下载地址&#xff0c;如下图 例如我的是&#xff1a;https://www.python.org/…

Java(四)(多态,final,常量,抽象类,接口)

目录 多态 基本概念: 使用多态的好处 类型转换 遇到的问题 解决方法 强制类型转换的一个注意事项 final 常量 抽象类 啥是个抽象类? 抽象类的注意事项,特点 抽象类的场景和好处 抽象类的常见应用场景: 模板方法设计模式 接口 基本概念 接口的好处 JDK8开始,接…

太累了,是时候让AI数字人来帮我干活了(走,上教程)

阿酷TONY&#xff0c;原创文章&#xff0c;长沙&#xff0c;2023.11.21 关 键 词&#xff1a;AI数字人&#xff0c;生成式AI&#xff0c;智能数字分身适用场景&#xff1a;培训数字人&#xff0c;演讲授课数字人&#xff0c;直播带货数字人特别说明&#xff1a;教程用的是国内…

学习Rust适合写什么练手项目?【云驻共创】

Rust是一门备受关注的系统级编程语言&#xff0c;因其出色的内存安全性、高性能和并发性能而备受赞誉。对于那些希望学习和掌握Rust编程语言的人来说&#xff0c;练手项目是一个不可或缺的环节。通过实际动手完成项目&#xff0c;你可以加深对Rust语言特性和最佳实践的理解&…

如何修改百科内容?百度百科内容怎么修改?

百科词条创建上去是相当不易的&#xff0c;同时修改也是如此&#xff0c;一般情况下&#xff0c;百科词条是不需要修改的&#xff0c;但是很多时候企业或是人物在近期收获了更多成就或是有更多的变动&#xff0c;这个时候就需要补充维护词条了&#xff0c;如何修改百科内容&…

猫12分类:使用yolov5训练检测模型

前言&#xff1a; 在使用yolov5之前&#xff0c;尝试过到百度飞桨平台&#xff08;小白不建议&#xff09;、AutoDL平台&#xff08;这个比较友好&#xff0c;经济实惠&#xff09;训练模型。但还是没有本地训练模型来的舒服。因此远程了一台学校电脑来搭建自己的检测模型。配置…