echarts 柱状图

记录echarts 柱状图基础案例以及相关配置。

1.基础柱状图

在这里插入图片描述

    const myChart = this.$echarts.init(this.$refs.echartsZx);const option = {title: {text: '本周考试记录'},//提示框tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]}// 绘制图表myChart.setOption(option);

2.背景色的柱状图

在这里插入图片描述

    const myChart = this.$echarts.init(this.$refs.echartsZx);const option = {title: {text: '本周考试记录'},//提示框tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar',showBackground: true, //是否显示柱条的背景色backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)', //柱条的颜色borderColor: "rgba(208, 38, 38, 1)", //柱条的描边颜色// borderWidth:1,//柱条的描边宽度,默认不描边。// borderType:'dashed',//柱条的描边类型,默认为实线,支持 'dashed', 'dotted'。borderRadius: 0//圆角半径,单位px,支持传入数组分别指定 4 个圆角半径}}]}// 绘制图表myChart.setOption(option);

3.条形图

在这里插入图片描述

    // 基于准备好的dom,初始化echarts实例const myChart = this.$echarts.init(this.$refs.echartsZx);const option = {title: {text: '本周考试及格表'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',},//给提示框提示数据加单位formatter: (params) => {console.log(params);var relVal = params[0].namefor (var i = 0, l = params.length; i < l; i++) {relVal += '<br/>' + params[i].seriesName + ' ' + params[i].marker + ' ' + params[i].value + ' %'}return relVal},},legend: {},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'value',boundaryGap: [0, 0.01]},yAxis: {type: 'category',data: this.dataList.map(item => item.name)},series: [{name: '及格',type: 'bar',data: this.dataList.map(item => item.hege)},{name: '不及格',type: 'bar',data: this.dataList.map(item => item.buhege)}]}// 绘制图表myChart.setOption(option);

4.折柱混合图

在这里插入图片描述

    // 基于准备好的dom,初始化echarts实例const myChart = this.$echarts.init(this.$refs.echartsZx);const option = {title:{text:'折柱混合',},//提示框tooltip: {trigger: 'axis',axisPointer: {type: 'cross', //指示器类型。crossStyle: {color: '#999' //axisPointer.type 为 'cross' 时有效。}}},//工具栏toolbox: {feature: {dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true }}},legend: {data: ['Precipitation', 'Temperature']},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisPointer: {type: 'shadow'}}],yAxis: [{type: 'value',name: 'Precipitation',min: 0,max: 250,interval: 50,axisLabel: {formatter: '{value} ml'}},{type: 'value',name: 'Temperature',min: 0,max: 25,interval: 5,axisLabel: {formatter: '{value} °C'}}],series: [{name: 'Precipitation',type: 'bar',tooltip: {valueFormatter: function (value) {return value + ' ml';}},data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]},{name: 'Temperature',type: 'line',yAxisIndex: 1,tooltip: {valueFormatter: function (value) {return value + ' °C';}},data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]}]};// 绘制图表myChart.setOption(option);

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

spring、springmvc、springboot、springcloud简介

spring简介 spring是什么&#xff1f; spring: 春天spring: 轻量级的控制反转和面向切面编程的框架 历史 2002年&#xff0c;首次推出spring雏形&#xff0c;interface 21框架2004年&#xff0c;发布1.0版本Rod Johnson: 创始人&#xff0c;悉尼大学&#xff0c;音乐学博士…

配置vite项目打包控制台不显示console.log配置

可以看vite官方的配置文档&#xff1a;构建选项 | Vite 官方中文文档 主要是配置&#xff1a;但是terser需要vite3.0以后手动安装一下 build: {sourcemap: false,minify: terser,terserOptions: {compress: {drop_console: true,drop_debugger: true,},},}, 安装命令&#xff…

八种常见顺序存储的算法

目录 1、线性枚举 1&#xff09;问题描述 2&#xff09;动图演示 3&#xff09;示例说明 4&#xff09;算法描述 5&#xff09;源码详解 2、前缀和差分 1&#xff09;问题描述 2&#xff09;动图演示 3&#xff09;样例分析 4&#xff09;算法描述 5&#xff09;源码…

攻防世界—no-strings-attached

# 攻防世界—no-strings-attached 介绍下——IDA内置脚本 shiftF12 收获——要一个一个大致看出代码在干嘛 先运行一遍 int __cdecl main(int argc, const char **argv, const char **envp) { setlocale(6, &locale); banner(); prompt_authentication(); authenti…

3D展2D数学原理

今年早些时候&#xff0c;我为 MAKE 杂志写了一篇教程&#xff0c;介绍如何制作视频游戏角色的毛绒动物。 该技术采用给定的角色 3D 模型及其纹理&#xff0c;并以编程方式生成缝纫图案。 虽然我已经编写了一般摘要并将源代码上传到 GitHub&#xff0c;但我在这里编写了对使这一…

vue多条数据渲染(带图片)

我在这用的为接口数据&#xff1a; 先调用接口获取需要的数据: 然后用&#xff1a;data绑定需要渲染的数据&#xff1b;&#xff08;记得包裹在<el-table>标签中&#xff09; 然后以此循环渲染数据&#xff1b;那怎么渲染出来图片呢&#xff1f; 在<el-table-column…

技术资讯:2023编程语言排行榜,出炉啦!

大家好&#xff0c;我是大澈&#xff01; 本文约2000字&#xff0c;整篇阅读大约需要4分钟。 感谢关注微信公众号&#xff1a;“程序员大澈”&#xff0c;免费领取"面试礼包"一份&#xff0c;然后免费加入问答群&#xff0c;从此让解决问题的你不再孤单&#xff01…

PMCW体制雷达系列文章(2) - PMCW雷达与CDM

说明 多发多收(MIMO)体制下关于天线阵列有两个核心的问题&#xff1a;一是天线阵列怎么排布&#xff1b;二是这么多发射通道如何发射。这两点不管对于FMCW雷达还是PMCW雷达都同样适用。关于雷达的发射问题&#xff0c;我之前写过一篇博文&#xff1a;车载毫米波雷达MIMO阵列的天…

python如何读取被压缩的图像

读取压缩的图像数据&#xff1a; PackBits 压缩介绍&#xff1a; CCITT T.3 压缩介绍&#xff1a; 读取压缩的图像数据&#xff1a; 在做图像处理的时候&#xff0c;平时都是使用 函数io.imread() 或者是 函数cv2.imread( ) 函数来读取图像数据&#xff0c;很少用PIL.Image…

什么是 NLP (自然语言处理)

NLP&#xff08;自然语言处理&#xff09;到底是做什么&#xff1f; NLP 的全称是 Natural Language Processing&#xff0c;翻译成中文称作&#xff1a;自然语言处理。它是计算机和人工智能的一个重要领域。顾名思义&#xff0c;该领域研究如何处理自然语言。 自然语言就是我…

java设计模式学习之【迭代器模式】

文章目录 引言迭代器模式简介定义与用途实现方式 使用场景优势与劣势在Spring框架中的应用迭代器示例代码地址 引言 想象一下&#xff0c;你在一个书店里浏览各种书籍。你可能会从头到尾查看每一本书&#xff0c;或者可能跳过一些不感兴趣的部分。在这个过程中&#xff0c;你实…

计算机操作系统(OS)——P1操作系统概述

1、操作系统的概念(定义) 1.1、什么是操作系统 __操作系统&#xff08;Operating System&#xff0c;OS&#xff09;&#xff1a;__是指控制和管理整个计算机系统的__硬件和软件__资源&#xff0c;并合理的组织调度计算机的工作和资源的分配&#xff1b;以__提供给用户和其它…

都2023年了还不了解?使用FileZilla搭建信息文件服务器(Windows7)

目录 前言&#xff1a; 一.FileZilla介绍 1.FileZilla介绍 2.FileZilla的优点以及不足 优点 不足 3.FileZilla应用场景 4.FileZilla的主要功能&#xff1a; 二.Windows7搭建FileZilla服务器&#xff0c;并且在本地访问 1.下载 2.FileZIlla安装 服务端安装 新建组 …

基于鸿蒙OS开发一个前端应用

创建JS工程&#xff1a;做鸿蒙应用开发到底学习些啥&#xff1f; 若首次打开DevEco Studio&#xff0c;请点击Create Project创建工程。如果已经打开了一个工程&#xff0c;请在菜单栏选择File > New > Create Project来创建一个新工程。选择HarmonyOS模板库&#xff0c…

uniapp开发移动端遇到的问题记录

1. 键盘弹起时页面整体上移问题 很常见但我解决过程中遇到了很多问题 我的键盘没有遮盖到输入框&#xff0c;但手机键盘弹起后&#xff0c;form部分会整体上移一点&#xff0c;并且底部的操作也会弹到键盘上方 网上写得很复杂&#xff0c;什么动态赋值高度balabala。看到有一…

12.18构建哈夫曼树(优先队列),图的存储方式,一些细节(auto,pair用法,结构体指针)

为结构体自身时&#xff0c;用.调用成员变量&#xff1b;为结构体指针时&#xff0c;用->调用成员变量 所以存在结构体数组时&#xff0c;调用数组元素里的成员变量&#xff0c;就是要用. 结构体自身只有在new时才会创建出来&#xff0c;而其指针可以随意创建 在用new时&…

基于Java+SpringBoot+vue实现图书借阅管理系统

基于JavaSpringBootvue实现图书借阅和销售商城一体化系统 &#x1f345; 作者主页 程序设计 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; 文章目录 基于JavaSpringBootvue实现图书借阅和销售商城一体化…

【Unity动画系统】Unity动画系统Animation详解,参数细节你是否弄清?

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

【Web网站测试流程及方法】给你一个网站,你如何来做自动化测试的?

我想大多数开始进行web端页面测试的人&#xff0c;一开始会的都是在页面上点点点&#xff0c;然后一看到页面上有什么图片失效啊&#xff0c;页面遮挡就觉得是找到了大bug&#xff1b;一开始我也是这样&#xff0c;尽管我很谨慎&#xff0c;很仔细&#xff0c;把页面上的每一个…

hosts文件、DNS、删除浏览器域名安全策略、浏览器代理

文章目录 1. hosts文件2. DNS3. 删除浏览器域名安全策略4. 浏览器代理服务器 1. hosts文件 位置 C:\Windows\System32\drivers\etc\hosts 没有后缀名 内容 ip 一个空格 域名 定义 hosts就是系统的一个配置文件&#xff0c;主要配置ip和域名的映射关系&#xff0c;相当于是本地…