echarts实践总结(常用一):柱状图(特点:渐变色、点击缩放、左右滑动、悬浮展示样式)

目录

第一章 echarts基本使用

第二章 echarts实践——柱状图


  • 效果展示

第一章 echarts基本使用

Echarts常用配置项(详细入门)_echarts配置项手册-CSDN博客

第二章 echarts实践——柱状图

最近接到这么一个需求,需要画页面,然后有这么几个echarts的图需要画,平常我们通过教程都是绘画一些简单的柱状图,导致我们对ecahrts的一些api不适特别深入,小编也是,这里就给出一个小编实战中的例子,涵盖面相对广一点,实现的效果有:鼠标悬浮有另一个柱状图覆盖、可以缩放从而添加可视区域柱子的条数、左右滑动展示柱状图、渐变颜色以及一些基本的柱状图配置。

  • html部分
<div class="bar" style="width: 1000px;height: 500px;"><!-- 柱状图 --><div id="handlerView" style="width: 100%;height: 100%;"></div>
</div>
  • js部分——详细说明在代码中
<script src="./base_js/echarts.min.js"></script>
<script>const handlerViewDom = document.getElementById('handlerView')let handlerChart = echarts.init(handlerViewDom)// x轴数据let xData = ['苏州', '无锡', '南通', '常州', '徐州', '扬州', '南京', '宿迁', '连云港', '盐城', '淮安', '镇江', '泰州']// y轴数据let yData = [28, 32, 12, 36, 35, 37, 29, 33, 21, 23, 34, 20, 27]// 最大值,用于设置背景柱体高度let maxData = []let temp = yData.sort((a, b) => {return a - b})yData.forEach(item => {maxData.push(temp[temp.length - 1])})let handlerOption = {xAxis: {type: 'category', // 类型data: xData, // x轴数据axisLine: { // x坐标轴轴样式展示show: true, // 是否显示坐标轴x轴线。onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上symbol: 'none', // 轴线两边的箭头。可以是字符串,表示两端使用同样的箭头;或者长度为 2 的字符串数组,分别表示两端的箭头。默认不显示箭头,即 'none'。两端都显示箭头可以设置为 'arrow',只在末端显示箭头可以设置为 ['none', 'arrow']lineStyle: { // x轴的样式,一个对象,属性有:{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }color: '#B6BABD'}},axisTick: { // 是否显示坐标轴刻度show: false}},yAxis: {name: '单位(时)', // 坐标轴名称axisLabel: { // 坐标轴刻度标签的相关设置color: '#999999', // 颜色fontSize: 14, // 字体},splitLine: { // 坐标轴在 grid 区域中的分隔线show: true, // 是否显示分隔线。lineStyle: { // 分隔线的样式——属性有:{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }color: '#D9DFE2', // 颜色type: 'dashed', // 类别 'solid' 、 'dashed' 、 'dotted'},},},//图表与容器的位置关系grid: {left: '5%',   // 与容器左侧的距离right: '3%', // 与容器右侧的距离top: '19%',   // 与容器顶部的距离bottom: '15%', // 与容器底部的距离},tooltip: { // 提示框组件/*item: 数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。axis: 坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。none: 什么都不触发*/trigger: 'axis', // 触发类型showDelay: 0, // 延时展示时间axisPointer: { // 坐标轴指示器配置项 —— 具体可以自行尝试/*line:直线指示器shadow:阴影指示器none:无指示器cross:十字准星指示器*/type: 'line', // 指示器类型lineStyle: { // 设置指示器样式color: { // 设置渐变色type: 'line',x: 0,y: 0,x2: 1,y2: 1,colorStops: [{ // 0-1的渐变,可以自行尝试offset: 0, color: 'rgba(82, 141, 251, 0.2)'}, {offset: 1, color: 'rgba(82, 141, 251, 0)'}],},type: 'solid', // 设置实现width: 40 // 线的宽度},}},dataZoom: [{  // 缩放show: false, // 是否展示type: 'slider', // 滑动条型数据区域缩放组件提供了数据缩略图显示startValue: 0, // 开始索引endValue: 6 // 结束索引}, {/*平移:在坐标系中滑动拖拽进行数据区域平移。缩放:PC端:鼠标在坐标系范围内滚轮滚动(MAC触控板类同)移动端:在移动端触屏上,支持两指滑动缩放。*/type: 'inside'}],series: [{name: '平均统计时间', // 系列名称type: 'bar', // 类别barWidth: 16, // 柱条的宽度,不设时自适应label: {  // 图形上的文本标签,可用于说明图形的一些数据信息show: true, // 是否显示标签。position: 'top', // 显示位置color: '#666666', // 颜色zlevel: 4 // 用于分层使用},itemStyle: { // 图形样式normal: { // 自定义渐变颜色color: (params) => ({type: 'linear',x: 0,y: 1,x2: 0,y2: 0,colorStops: [{offset: 0,color: '#5A93FC',},{offset: 1,color: '#97C5FF',},]})}},data: yData, // data数据}]};// 该函数为绑定了个点击事件const zoomSize = 7;handlerChart.on('click', function (params) {// 通过计算获取周围的值handlerChart.dispatchAction({type: 'dataZoom',startValue: xData[Math.max(params.dataIndex - zoomSize / 2, 0)],endValue:xData[Math.min(params.dataIndex + zoomSize / 2, yData.length - 1)]});});// 渲染echarts图标handlerOption && handlerChart.setOption(handlerOption)// 监听窗口发生变化,重新渲染页面handlerChart.resize()window.addEventListener('resize', () => {handlerChart.resize()})
</script>

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

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

相关文章

GET 和 POST 有什么区别?

1.从缓存的角度&#xff0c;GET 请求会被浏览器主动缓存下来&#xff0c;留下历史记录&#xff0c;而 POST 默认不会。 2.从编码的角度&#xff0c;GET 只能进行 URL 编码&#xff0c;只能接收 ASCII 字符&#xff0c;而 POST 没有限制。 3.从参数的角度&#xff0c;GET 一般放…

【网络安全】0xhacked CTF 大赛题解出炉啦!

此次 0xhacked CTF 比赛&#xff0c;ChainSecLabs 取得了第四名的成绩。让我们来看看比赛题目的题解吧。&#xff08;题目代码仓库在文末哦~&#xff09; BabyOtter 这是应该说是一个算法题&#xff0c;很明显需要溢出&#xff0c;因为精度问题&#xff0c;uint256(-1)/0x1…

【Python】继承会遇到的问题

单继承和多继承在python中的区别和应用场景 单继承指的是一个子类只继承自一个父类。这简化了继承关系&#xff0c;使得代码易于理解和维护。大多数情况下&#xff0c;单继承足以处理常见的场景&#xff0c;如扩展基类的功能或者覆盖某些方法。多重继承允许在一个类同时继承多个…

m4v是什么文件格式?m4v视频用什么软件打开?

m4v文件格式的诞生可追溯到苹果公司。作为数字媒体领域的先锋&#xff0c;苹果在iTunes商店中为视频内容引入了m4v格式。其初衷是为了在保证视频质量的同时&#xff0c;通过管理系统&#xff0c;实现对数字内容的保护。这使得m4v成为iOS和macOS平台上广泛使用的视频格式。 M4V的…

工具精灵--超级好用的在线工具网站

工具精灵是一个超级好用的在线工具网站&#xff0c;它有这些功能&#xff1a;json格式化、xml格式化、markdown在线编辑、sql格式化、json转Java、xml转Java等。 虽然有很多这种类似的网站了&#xff0c;但它们并不好用&#xff0c;很粗糙。工具精灵超级好用&#xff0c;细节方…

为什么要为 App 应用加固 ?如何为 App 应用加固 ?

一&#xff1a;为什么要为 App 应用加固 来看下 腾讯开放平台 官方的解释说明 若应用不做任何安全防护&#xff0c;极易被病毒植入、广告替换、支付渠道篡改、钓鱼、信息劫持等&#xff0c;严重侵害开发者的利益。 App 加固后&#xff0c;可以对应用进行安全防护&#xff0c;防…

代码随想录三刷day30

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣122. 买卖股票的最佳时机 II二、力扣55. 跳跃游戏三、力扣45. 跳跃游戏 II四、力扣1005.K次取反后最大化的数组和 前言 大家会发现本周的代码其实都简单…

回归测试?

1. 什么是回归测试&#xff08;Regression Testing&#xff09; 回归测试是一个系统的质量控制过程&#xff0c;用于验证最近对软件的更改或更新是否无意中引入了新错误或对以前的功能方面产生了负面影响&#xff08;比如你在家中安装了新的空调系统&#xff0c;发现虽然新的空…

GEE高阶案例——利用eemont进行ee.Number对象类的运算(加减成熟运算公式)

本教程的主要目的是利用eemont包对数字对象进行分析 代码 !pip install eemont !pip install geemapimport ee, eemont, geemap import geemap.colormaps as cm 进行EE验证 验证并初始化地球引擎和地球地图。 Map geemap.Map() 让我们定义一些 ee.Number 对象作为近红外…

抛弃Superhuman?这些替代方案让你眼前一亮!

Superhuman是一个极好的人工智能工具在电子邮件助理领域。根据SimilarWeb的最新统计&#xff0c;它在全球网站排名中排名第21980位&#xff0c;月访问量为1751798。然而市场上还有许多其他优秀的选择。为了帮助您找到最适合您需求的解决方案&#xff0c;我们为您精心挑选了10种…

项目性能优化—使用JMeter压测SpringBoot项目

我们的压力测试架构图如下&#xff1a; 配置JMeter 在JMeter的bin目录&#xff0c;双击jmeter.bat 新建一个测试计划&#xff0c;并右键添加线程组&#xff1a; 进行配置 一共会发生4万次请求。 ctrl s保存&#xff1b; 添加http请求&#xff1a; 配置http请求&#xff1a;…

免费开源、支持自建服务的团队协作、个人学习文档管理系统

大家好&#xff0c;我是小麦。今天来给大家分享的是几款个人使用过的免费、开源、适合团队协作的文档管理工具&#xff0c;并且是完全支持自己搭建服务的文档管理系统。 相信大家在学习、办公等场景下对文档管理工具使用的场景是比较多的&#xff0c;例如技术开发手册、个人学…

SpringBoot(数据库操作 + druid监控功能)

文章目录 1.JDBC HikariDataSource&#xff08;SpringBoot2默认数据源&#xff09;1.数据库表设计2.引入依赖 pom.xml3.配置数据源参数 application.yml4.编写一个bean&#xff0c;映射表5.编写测试类来完成测试1.引入依赖 pom.xml2.使用JdbcTemplate进行测试3.成功&#xff0…

【C语言】打印闰年

输⼊⼀个年份year&#xff0c;判断year是否是闰年 闰年判断的规则&#xff1a; 1&#xff0c; 能被4整除并且不能被100整除是闰年 2&#xff0c;能被400整除是闰年 结合起来如下&#xff1a; if ((year % 4 0 && year % 100 ! 0) || (year % 400 0)) 代码如下&…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的交通信号灯识别系统(深度学习+UI界面+训练数据集+Python代码)

摘要&#xff1a;本研究详细介绍了一种采用深度学习技术的交通信号灯识别系统&#xff0c;该系统集成了最新的YOLOv8算法&#xff0c;并与YOLOv7、YOLOv6、YOLOv5等早期算法进行了性能评估对比。该系统能够在各种媒介——包括图像、视频文件、实时视频流及批量文件中——准确地…

Python从COCO数据集中抽取某类别的数据

1、问题描述 今天需要训练一个人工智能检测模型&#xff0c;用于检测图片或视频中的人。自行收集训练数据费时费力&#xff0c;因而选择从公开数据集COCO中进行抽取。 2、数据准备 2.1 下载 COCO2017 数据集 train:http://images.cocodataset.org/zips/train2017.zip valid…

2023年蓝桥杯省赛——幸运数字

目录 题目链接&#xff1a;0幸运数字 - 蓝桥云课 (lanqiao.cn) 解法 思路 高级思路 总结 题目链接&#xff1a;0幸运数字 - 蓝桥云课 (lanqiao.cn) 解法 首先是我写了差不多一个小时的解法&#xff0c;裂开了&#xff0c;为什么我如此废物 思路 寻找第2023个在二进制、八…

http协议的历史与基本概念

文章目录 历史和发展起源&#xff1a;HTTP/0.9&#xff08;1991年&#xff09;&#xff1a;HTTP/1.0&#xff08;1996年&#xff0c;RFC 1945&#xff09;&#xff1a;HTTP/1.1&#xff08;1997年&#xff0c;RFC 2068&#xff1b;1999年更新为RFC 2616&#xff09;&#xff1a…

「连载」边缘计算(三十三)03-15:边缘部分源码(源码分析篇)

&#xff08;接上篇&#xff09; 初始化porxy&#xff0c;具体如下所示。 KubeEdge/edgemesh/pkg/proxy/proxy.go // Init: init the proxy. create virtual device and assign ips, etc.. func Init() { go func() { unused make([]string, 0) addrByService &addrTab…

【MIT 6.S081】2020, 实验记录(9),Lab: file system

目录 Task 1&#xff1a;Large filesTask 2&#xff1a;Symbolic links2.1 增加一个系统调用 symlink2.2 新增文件类型2.3 新增 NOFOLLOW 标志位2.4 实现 sys_symlink 系统调用2.5 修改 sys_open 函数2.6 测试 Task 1&#xff1a;Large files 现在的 xv6 系统中&#xff0c;一…