echarts：柱状图的常用操作

文章目录

    • 背景
    • 基础柱状图
    • 设置柱子的样式 series.itemStyle
    • 添加标签（柱子上的数字）series.label
    • 添加提示框（点击柱子的弹窗）tooltip
    • 添加图例 legend
    • 滑动图表 dataZoom
      • 手动滑动
      • 滑动条
      • 扩展：左右滑动一页

背景

本文将带大家一步一步的熟悉柱状图相 API，关于如何初始化，可以看我这篇文章 echars：图表中核心的概念，本文只讲核心配置。

基础柱状图

这是一个最基础的柱状图

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

在这里插入图片描述
接下来的示例都是以这个基础做改动

设置柱子的样式 series.itemStyle

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      itemStyle: {
        // 柱子的背景颜色
        color: '#60D87E',
        // 柱子的 border-radius
        barBorderRadius: [15, 15, 0, 0],
      },
      // 设置柱子的默认宽度,可以是绝对值例如 40 或者百分数例如 '60%'。百分数基于自动计算出的每一类目的宽度。
      barWidth: '50%',
      // 柱条最小高度，可用于防止某数据项的值过小而影响交互。
      barMinHeight: 30,
      // 设置柱子的最大宽度
      // barMaxWidth: 40,
    }
  ]
};

在这里插入图片描述

添加标签（柱子上的数字）series.label

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 300, 150, 80, 70, 110, 50],
      type: 'bar',
      label: {
        // 显示标签
        show: true,
        // 标签位置，可以设置为 'inside'、'top'、'bottom' 等
        position: 'top',
        // 调整 offset 数值来控制标签的位置
        // offset: [0, 5],
        textStyle: {
          color: '#A9A9A9', // 设置文字颜色为白色
        },
        formatter: function (params) {
          // 判断值是否为 0，是则不显示标签
          return params.value !== 0 ? params.value : '';
        }
      },
    }
  ]
};

在这里插入图片描述

添加提示框（点击柱子的弹窗）tooltip

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
  },
  series: [
    {
      name: '柱状图1',
      data: [120, 300, 150, 80, 70, 110, 50],
      type: 'bar'
    }
  ]
};

在这里插入图片描述

添加图例 legend

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  legend: {
    // 垂直展示
    orient: 'vertical',
    // 距离右边10px
    right: 10,
    // 上下居中
    top: 'center',
  },
  series: [
    {
      // 一定要加上，否则出不来
      name: '柱状图1',
      data: [120, 300, 150, 80, 70, 110, 50],
      type: 'bar'
    },
    {
      name: '柱状图2',
      data: [120, 300, 150, 80, 70, 110, 50],
      type: 'bar'
    }
  ]
};

在这里插入图片描述
默认是放在上方居中位置的，我通过一些设置放在了右侧

滑动图表 dataZoom

图表的滑动包括两种，一种是有滚动条的，一种是手动滑动

手动滑动

const n = 100
// 生成数组 [0-n]
const xData = Array.from({ length: n + 1 }, (_, index) => `第${index}`)
const yData = Array.from({ length: n + 1 }, (_, index) => index)

option = {
  xAxis: {
    type: 'category',
    data: xData
  },
  yAxis: {
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 50
    }
  ],
  series: [
    {
      name: '柱状图1',
      data: yData,
      type: 'bar'
    }
  ]
};

在这里插入图片描述
鼠标向右滑动可以继续滑动直到第100。

start 和 end 是 dataZoom 组件中用于控制数据展示范围的两个参数：

  • start 表示数据窗口的起始位置，取值范围为 0 到 100，表示百分比。例如，start: 0 表示数据窗口的起始位置是数据的开头，start: 50 表示数据窗口从数据的中间开始。
  • end 表示数据窗口的结束位置，同样取值范围为 0 到 100。例如，end: 100 表示数据窗口的结束位置是数据的末尾，end: 80 表示数据窗口到数据的后面 20% 处结束。

滑动条

const n = 100
// 生成数组 [0-n]
const xData = Array.from({ length: n + 1 }, (_, index) => `第${index}`)
const yData = Array.from({ length: n + 1 }, (_, index) => index)

option = {
  xAxis: {
    type: 'category',
    data: xData
  },
  yAxis: {
  },
  dataZoom: [
    {
      type: 'slider',
      start: 0,
      end: 50
    }
  ],
  series: [
    {
      name: '柱状图1',
      data: yData,
      type: 'bar'
    }
  ]
};

在这里插入图片描述

扩展：左右滑动一页

子组件核心逻辑

properties = {
  // chartData: { xData: [], yData: [] }
  chartData: {
    type: Object,
    value: {},
    observer(newValue) {
      if (Object.keys(newValue).length > 0) {
        wx.nextTick(() => {
          this.initChart();
        });
      }
    },
  }
},
methods = {
  initChart() {
    let mousedownX = 0;
    echartsComponnet = this.selectComponent('#wx-chart');
    echartsComponnet.init((canvas, width, height, dpr) => {
      // 初始化图表
      const chart = echarts.init(canvas, undefined, {
        width,
        height,
        devicePixelRatio: dpr,
      });
      chart.setOption(this.getOptions());

      chart.getZr().on('mousedown', (params) => {
        console.log('测试-mousedown');
        mousedownX = params.offsetX;
      });
      chart.getZr().on('mouseup', (params) => {
        if (this.data.chartType !== 2) {
          if (mousedownX - params.offsetX > 50) {
            console.log('测试-左滑动');
            this.triggerEvent('changChartData', { type: 'next' });
          }
          if (params.offsetX - mousedownX > 50) {
            console.log('测试-右滑动');
            this.triggerEvent('changChartData', { type: 'last' });
          }
        }
      });
      return chart;
    });
  },
  getOptions () {
    const { xData, yData } = this.data.chartData
    // 这里的 xData、yData就只展示当前页面要展示的数据
    const option = {
      xAxis: {
        type: 'category',
        data: xData
      },
      yAxis: {
      },
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 100
        }
      ],
      series: [
        {
          name: '柱状图1',
          data: yData,
          type: 'bar'
        }
      ]
    };
    return option
  }
}

父组件核心逻辑

// 子组件
<chart bind:changChartData="changChartData" chartData="{{chartData}}" />

data = {
  chartData: {
    xData: [],
    yData: []
  }
}
methods = {
  changChartData(event) {
    // type: last | next
    const { type } = event.detail;
    // 根据 type 获取要展示的 chartData
    this.chartData = getNewChartData(type);
  }
}

最终效果和上面的 手动滑动 差不多，只不过左右滑动的时候是一整页的翻动

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

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

相关文章

某顺cookie逆向

某顺cookie逆向

目标网站:aHR0cHM6Ly9xLjEwanFrYS5jb20uY24v 这个网站是对cookie进行反爬虫的&#xff0c;可以看到cookie中有一个加密参数v 二、分析参数 可以使用hook方法&#xff0c;来hook住cookie中v生成的位置&#xff0c;可以直接在控制台中输入hook函数 (function () {use strict;v…
阅读更多...
unity学习笔记----游戏练习06

unity学习笔记----游戏练习06

一、豌豆射手的子弹控制 创建脚本单独控制子弹的运动 用transform来控制移动 void Update() { transform.Translate(Vector3.right * speed * Time.deltaTime); } 创建一个控制子弹速度的方法&#xff0c;方便速度的控制 private void SetSpeed(float spee…
阅读更多...
Grafana loki配置, 无脑版

Grafana loki配置, 无脑版

使用docker部署Grafana loki 1.创建 docker-compose.yml 文件 touch docker-compose.yml写入以下内容 vim touch docker-compose.yml version: "3"networks:loki:services:loki:image: grafana/loki:latestrestart: unless-stoppedports:- "3100:3100"vo…
阅读更多...
vue 本地中导入 maptalks

vue 本地中导入 maptalks

1、进入 github 中 maptalks 文件下载页面&#xff08;https://github.com/maptalks/maptalks.js/releases&#xff09; 这里可能会有朋友应为网络问题打不开 github &#xff0c;可以查看作者另一篇关于解决该问题的文章&#x1f449;GitHub 打不开问题解决 2、将下载好的文件…
阅读更多...
【郑益慧】模拟电子技术：5.双极晶体管的结构与方法原理

【郑益慧】模拟电子技术：5.双极晶体管的结构与方法原理

双极晶体管的结构与方法原理 空穴和自由电子都参与导电称之为双极晶体管&#xff08;半导体三极管&#xff09; 1.结构及类型 一块半导体材料上&#xff0c;做出三个不同的掺杂区域。 发射极 —— emitter 基极 —— basic 集电极 —— collector’ 为什么叫不同的名字&…
阅读更多...
静态web服务器实战

静态web服务器实战

准备html页面&#xff0c;包含两个页面(index.html, index2.html)和一个404(404html)页面&#xff0c;目录示意&#xff1a; 1.返回固定页面 with open("website/index.html","r") as file: import socket# # 返回固定的页面 website/index.html if __na…
阅读更多...
Redis 面试题 | 10.精选Redis高频面试题

Redis 面试题 | 10.精选Redis高频面试题

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
android 图片添加水印

android 图片添加水印

android 图片添加水印 本文主要讲下android 中如何给图片添加水印. 在Android中给图片添加水印可以使用Bitmap、Matrix和Canvas类的方法来实现. private Bitmap addWater() {// 加载原始图片Bitmap sourceBitmap BitmapFactory.decodeResource(getResources(), R.mipmap.sou…
阅读更多...
云原生安全：风险挑战与安全架构设计策略

云原生安全：风险挑战与安全架构设计策略

概述 数字化转型已经成为当今最流行的话题之一&#xff0c;大部分企业已经开启自身的数字化转型之旅&#xff0c;在未来企业只有数字化企业和非数字化企业之分。通过数字经济的加速发展&#xff0c;可以有效推动企业数字化转型的步伐。云计算作为数字化转型的底座和重要的载体…
阅读更多...
『OpenCV-Python鼠标画笔』

『OpenCV-Python鼠标画笔』

OpenCV-Python教程链接&#xff1a; https://opencv-python-tutorials.readthedocs.io/ 示例一&#xff1a;图片上双击的位置绘制一个圆圈 首先创建一个鼠标事件回调函数&#xff0c;鼠标事件发生时就会被执行。鼠标事件可以是鼠标上的任何动作&#xff0c;比如左键按下&#x…
阅读更多...
HarmonyOS关于deps、external_deps的使用

HarmonyOS关于deps、external_deps的使用

在添加一个模块的时候&#xff0c;需要在BUILD.gn中声明它的依赖&#xff0c;为了便于后续处理部件间依赖关系&#xff0c;我们将依赖分为两种——部件内依赖deps和部件间依赖external_deps。 依赖分类 如上图所示&#xff0c;主要分为部件内依赖&#xff08;图左&#xff09;…
阅读更多...
如何降低微服务复杂度丨云栖大会微服务主题分享实录

如何降低微服务复杂度丨云栖大会微服务主题分享实录

作者&#xff1a;谢吉宝 本文整理自阿里云资深技术专家、中间件负责人谢吉宝在2023云栖大会《极简微服务模式&#xff0c;降低微服务复杂度的最佳实践》的分享 2023 云栖大会现场 当面临复杂的挑战时&#xff0c;"分而治之"的方法往往能取得显著的效果。微服务架构…
阅读更多...
Qt编写linux系统onvif工具(支持预览/云台/预置位/录像等)

Qt编写linux系统onvif工具(支持预览/云台/预置位/录像等)

一、功能特点 广播搜索设备&#xff0c;支持IPC和NVR&#xff0c;依次返回。可选择不同的网卡IP进行对应网段设备的搜索。依次获取Onvif地址、Media地址、Profile文件、Rtsp地址。可对指定的Profile获取视频流Rtsp地址&#xff0c;比如主码流地址、子码流地址。可对每个设备设…
阅读更多...
mmpose 2d姿态预测值转json文件

mmpose 2d姿态预测值转json文件

目录 效果图： 参考 模板文件下载地址： python预测代码： 效果图： <
阅读更多...
Mall4j电商系统 java电商系统 后台界面-mall4v

Mall4j电商系统 java电商系统 后台界面-mall4v

一个基于vue、element ui 的轻量级、前后端分离、拥有完整sku和下单流程的完全开源商城后台所属前端界面 前言 mall4j商城项目致力于为中小企业打造一个完整、易于维护的开源的电商系统&#xff0c;采用现阶段流行技术实现。后台管理系统包含商品管理、订单管理、运费模板、规…
阅读更多...
《动手学深度学习(PyTorch版)》笔记3

《动手学深度学习(PyTorch版)》笔记3

注&#xff1a;书中对代码的讲解并不详细&#xff0c;本文对很多细节做了详细注释。另外&#xff0c;本书源代码是在Jupyter Notebook上运行的&#xff0c;较为分散&#xff0c;本文将代码集中起来&#xff0c;并加以完善&#xff0c;全部用vscode测试通过。 Chapter3 Linear …
阅读更多...
【模拟通信】AM、FM等的调制解调

【模拟通信】AM、FM等的调制解调

调制相关的概念 调制&#xff1a;控制载波的参数&#xff0c;使载波参数随调制信号的规律变化 已调信号&#xff1a;受调载波&#xff0c;含有调制信号的全部特征 调制的作用: 提高发射效率多路复用&#xff0c;提高信道利用率提高系统抗干扰能力 两种调制方式 线性调制&a…
阅读更多...
主播产品对比话术

主播产品对比话术

—、价格对比 主播产品A︰这款产品定价相对较高&#xff0c;但是其品质和功能都是一流的&#xff0c;对于追求高端体验的消费者来说&#xff0c;物有所值。 主播产品B∶这款产品的价格相对较低&#xff0c;性价比很高&#xff0c;对于预算有限的消费者来说&#xff0c;是个不…
阅读更多...
链表OJ---排序链表

链表OJ---排序链表

https://leetcode.cn/problems/7WHec2/description/ //合并 struct ListNode* merge_link(struct ListNode* head1, struct ListNode* head2) {struct ListNode* temhead malloc(sizeof(struct ListNode));temhead->val 0;struct ListNode *tmp temhead, *cur1 head1, *…
阅读更多...
Leetcode—2696. 删除子串后的字符串最小长度【简单】

Leetcode—2696. 删除子串后的字符串最小长度【简单】

2023每日刷题&#xff08;八十八&#xff09; Leetcode—2696. 删除子串后的字符串最小长度 实现代码 class Solution { public:int minLength(string s) {string sub " ";for(auto c: s) {if((c B && sub.back() A) || (c D && sub.back() C…
阅读更多...
最新文章

Copyright @ 2022~2023