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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

25双体系Java学习之StringBuffer和StringBuilder

StringBuffer和StringBuilder ★小贴士 String str new String("welcome to "); str "here"; 字符串的拼接过程实际上是通过建立一个StringBuffer&#xff0c;然后调用StringBuffer的append方法&#xff0c;最后再将StringBuffer转为字符串&#xff0c…

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

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

代码随想录算法训练营第二十四天|● 理论基础 ● 77. 组合(JS写法)

回溯理论基础 回溯法解决的问题都可以抽象为树形结构&#xff0c;因为回溯法解决的都是在集合中递归查找子集&#xff0c;集合的大小就构成了树的宽度&#xff0c;递归的深度&#xff0c;都构成的树的深度。递归就要有终止条件&#xff0c;所以必然是一棵高度有限的树&#xff…

仰卧起坐计数,YOLOV8POSE

仰卧起坐计数&#xff0c;YOLOV8POSE 通过计算膝盖、腰部、肩部的夹角&#xff0c;计算仰卧起坐的次数

springboot278基于JavaWeb的鲜牛奶订购系统的设计与实现

鲜牛奶订购系统的设计与实现 摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统鲜牛奶订购信息管理难度大&…

Python使用 k 均值对遥感图像进行语义分割

本篇文章介绍K-means语义分割来估计 2000 年至 2023 年咸海水面的变化 让我们先看一下本教程中将使用的数据。这是同一地区的两张 RGB 图像,间隔 23 年,但很明显地表特性和大气条件(云、气溶胶等)不同。这就是为什么我决定训练两个独立的 k-Means 模型,每个图像一个。 首…

水下蓝牙耳机哪个牌子好?推荐四款高人气力作游泳耳机

在这个充满活力的时代&#xff0c;人们对于生活的追求早已不仅仅局限于日常的琐碎&#xff0c;更多的是对健康、对自我挑战的向往。运动&#xff0c;成为了现代人生活中不可或缺的一部分。而游泳&#xff0c;作为一项既能锻炼全身&#xff0c;又能享受水中美妙的运动&#xff0…

广州地铁线路规划

使用python实现后端功能&#xff0c;由于地铁图需要进行展示&#xff0c;svg图需要花费比较多的时间&#xff0c;这里使用了 MetroFlow 库构建的地铁地图编辑器&#xff0c;可以在画布上构建矢量图&#xff0c;实现站点路线的创建。 用法&#xff1a; 打包好后完整目录&#x…

CornerStone之读取txt文件点数据

1. 页面标签 页面中目前只提供一个按钮来进行输入文件 <input click"importZeroOne" type"file" />2. 函数定义 在输入文件之后&#xff0c;执行importZeroOne函数&#xff0c;获得输入的文件&#xff0c;进行以下处理 const importZeroOne((eve…

windows 11访问Debian10上的共享目录

步骤 要在Windows 11上访问Debian 10.0.0的共享目录&#xff0c;可以通过以下步骤来实现&#xff1a; 1. 设置Samba服务&#xff1a;在Debian系统上&#xff0c;需要安装并配置Samba服务&#xff0c;以便能够实现文件夹共享。Samba是一个允许Linux/Unix服务器与Windows操作系…

【数据结构与算法】(15):归并排序的递归和非递归方式

&#x1f921;博客主页&#xff1a;Code_文晓 &#x1f970;本文专栏&#xff1a;数据结构与算法 &#x1f63b;欢迎关注&#xff1a;感谢大家的点赞评论关注&#xff0c;祝您学有所成&#xff01; ✨✨&#x1f49c;&#x1f49b;想要学习更多数据结构与算法点击专栏链接查看&…

二、C#选择排序算法

简介 选择排序算法的基本思想是每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;然后&#xff0c;再从剩余未排序元素中继续寻找最小&#xff08;大&#xff09;元素&#xff0c;然后放到已排序序列…

【ArcGISProSDK】获取扩展模块许可到期时间

结果 以下是获取的3D分析模块的许可到期时间 代码 var licenseExpirationDate ArcGIS.Core.Licensing.LicenseInformation.GetExpirationDate(LicenseCodes.Analyst3D); 扩展模块 MemberDescriptionAnalyst3D3D AnalystAviationAirportsAviation and AirportsBusinessAnal…

绿色再生·安卓4G智能远程操作巡视机器人小车

一、前言 1.1 项目介绍 【1】项目功能介绍 随着物联网技术与移动通信技术的快速发展&#xff0c;远程遥控设备在日常生活及工业应用中的普及度日益提高。无论是家用扫地机器人实现自主导航清扫&#xff0c;还是目前抖音平台上展示的实景互动小车等创新应用&#xff0c;都体现…

ICBatlas数据库-转录组免疫检查点阻断疗法数据

ICBatlas: A Comprehensive Resource for Depicting Immune Checkpoint Blockade Therapy Characteristics from Transcriptome Profiles 介绍&#xff1a;在线ICBatlas (hust.edu.cn) 检查点阻断 &#xff08;ICB&#xff09; 疗法为多种癌症类型提供了显着的临床益处。目前…

6语言交易所/多语言交易所php源码/微盘PHP源码

6语言交易所PHP源码&#xff0c;简单测试了一下&#xff0c;功能基本都是正常的。 由于是在本地测试的运行环境的问题&#xff0c;K线接口有点问题&#xff0c;应该在正式环境下是OK的。 源码下载地址&#xff1a;6语言交易所/多语言交易所php源码/微盘PHP源码.zip 程序截图…

【安装教程】安装cudnn

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 安装cudnn 前言一、下载和自己cuda匹配的cudnn二、安装cudnn 前言 首先我是已经安装了cuda&#xff0c;但是因为没有安装cudnn在跑程序的时候出现了一些问题&#xff0c;因此…

Axure 中继器的Repeater属性的使用

dataCount 中继器当中存在多少条数据&#xff0c;总数。 visibleltemCount 中继器列表中可见项数量&#xff0c;也就是当前页面显示的数量。 pageCount 获取中继器分页的总数量&#xff0c;即能够获取分页后共有多少页。 pageIndex 获取中继器当前显示的页码

【数字孪生】Nginx发布数字孪生三维建模模型服务及调用方法

【数字孪生】Nginx发布数字孪生三维建模模型服务及调用方法 一、需求二、实施步骤2.1 准备模型文件2.1.1 3D tiles模型2.1.2 3D Tiles标准文件格式 2.2 配置nginx server块2.2.1 Nginx能干啥 2.3 访问 三、实现效果 一、需求 利用三维渲染引擎Cesium加载3D tiles模型。 二、实…

上海微电子企业ERP系统介绍及现状

在当今信息化、数字化的时代&#xff0c;企业资源规划(ERP)系统已成为企业管理的核心工具。上海微电子企业&#xff0c;作为国内微电子行业的重要力量&#xff0c;其ERP系统的应用与发展更是备受关注。 ERP系统是一种集信息技术与管理思想于一体的企业管理系统。它通过对企业内…