【Echarts】详解 柱状图(Mixed Line and Bar)!!快来看看吧!

2023-11-01 01:50

本文主要是介绍【Echarts】详解 柱状图(Mixed Line and Bar)!!快来看看吧!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

柱状图(Mixed Line and Bar)的实现

先看效果

在这里插入图片描述

文件目录

在这里插入图片描述

获取Echarts

在这里插入图片描述

引入Echarts
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="../incubator-echarts-5.0.0-alpha.2/dist/echarts.min.js"></script>
</head>
</html>
绘制图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器

<body style="background: black;"><!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --><div id="main" style="width: 835px; height: 670px"></div>
</body>

然后就可以通过echarts.init方法初始化一个 echarts 实例并通过setOption方法生成一个 柱状图(Mixed Line and Bar)

 <script type="text/javascript">// 基于准备好的dom, 初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 使用刚指定的配置项和数据显示图表myChart.setOption(option)</script>
代码步骤拆分
指定图标的配置和数据
数据源
  // 数据集
const dataList = [{date: '08/01', value: 116, orderNum: 14},{date: '08/02', value: 256, orderNum: 14},{date: '08/03', value: 446, orderNum: 25},{date: '08/04', value: 111, orderNum: 18},{date: '08/05', value: 416, orderNum: 47},{date: '08/06', value: 446, orderNum: 75},{date: '08/07', value: 516, orderNum: 45},{date: '08/08', value: 116, orderNum: 18},{date: '08/09', value: 236, orderNum: 40},{date: '08/10', value: 129, orderNum: 14},{date: '08/11', value: 115, orderNum: 15},{date: '08/12', value: 306, orderNum: 45},{date: '08/13', value: 405, orderNum: 74},{date: '08/14', value: 187, orderNum: 10},{date: '08/15', value: 382, orderNum: 15},{date: '08/16', value: 224, orderNum: 40},{date: '08/17', value: 478, orderNum: 25},{date: '08/18', value: 256, orderNum: 25},{date: '08/19', value: 352, orderNum: 25},{date: '08/20', value: 172, orderNum: 25},{date: '08/21', value: 172, orderNum: 25},{date: '08/22', value: 172, orderNum: 32},{date: '08/23', value: 172, orderNum: 32},{date: '08/24', value: 172, orderNum: 32},{date: '08/25', value: 250, orderNum: 42},{date: '08/26', value: 210, orderNum: 38},{date: '08/27', value: 334, orderNum: 60},{date: '08/28', value: 412, orderNum: 80},{date: '08/29', value: 334, orderNum: 60},{date: '08/30', value: 252, orderNum: 48},{date: '08/31', value: 172, orderNum: 31}
]const xKeys = dataList.map((item) => item.date)
const values = dataList.map((item) => item.value)
const ordersList = dataList.map((item) => item.orderNum)
title
title: {text: '近30日用户订单数据',show: true,textStyle: {color: '#fff',fontSize: '36',fontFamily: 'Microsoft YaHei',fontWeight: 400},top: '42',left: '40'
}

在这里插入图片描述

legend (配合series才会显示)
legend: { // 图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示top: 150,right: 20,z:4, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖data: ['登陆用户数', '下单次数'], // 图例的数据数组。数组项通常为一个字符串,每一项代表一个系列的 name(如果是饼图,也可以是饼图单个数据的 name)。图例组件会自动根据对应系列的图形标记(symbol)来绘制自己的颜色和标记,特殊字符串 ''(空字符串)或者 '\n'(换行字符串)用于图例的换行textStyle: {fontSize: '24px',fontFamily: 'Microsoft YaHei',fontWeight: 400,color: '#c2cbf2'}
}

在这里插入图片描述

grid
grid: { // 直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)left: 30,top: 200,right: 30,bottom: 70
}

在这里插入图片描述

xAxis(直角坐标系 grid 中的 x 轴)
xAxis: [{type: "category",color: "#323E52",data: xKeys,axisLabel: {margin: 20, // 刻度标签与轴线之间的距离interval:'auto', // 坐标轴刻度标签的显示间隔,在类目轴中有效textStyle: {fontSize: 22,fontFamily: "Microsoft YaHei",fontWeight: 400,textAlign: "center",color: "#c2cbf2",},},axisLine: {lineStyle: {color: "#b7ccff",type: "solid",},},splitLine: {show: false,},},]

在这里插入图片描述

yAxis(直角坐标系 grid 中的 y 轴)
yAxis: [{ // 左边轴type: 'value',silent: true, // 坐标轴是否是静态无法交互interval: 100, // 强制设置坐标轴分割间隔   因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 min、max 强制设定刻度划分,一般不建议使用min: 0,max: 600,axisLable: {textStyle: {fontSize: 24,fontFamily: 'Microsoft YaHei',fontWeight: 400,textAlign: 'right',color: '#c2cbf2'}},axisLine: {show: false},axisTick: { // 坐标轴刻度相关设置show: false},splitLine: { // 坐标轴在 grid 区域中的分隔线show: true,lineStyle: {color: '#232842',type: 'solid'}}},{ // 右边轴type: 'value',position: 'right',silent: true,interval: 20,min: 0,max: 120,axisLable: {textStyle: {fontSize: 24,fontFamily: 'Microsoft YaHei',fontWeight: 400,textAlign: 400,color: '#c2cbf2'}},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false}}
]

在这里插入图片描述

series(系列列表。每个系列通过 type 决定自己的图表类型)
series: [{name: '登陆用户数',type: 'bar',data: values,itemStyle: {color: '#6482ff',barBorderRadius: [10, 10, 0, 0]},label: {show: false}},{name: '下单次数',type: 'line',data: ordersList,yAxisIndex: 1, // 使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用symbol: 'emptyCircle', // 标记的图形symbolSize: 8,itemStyle: {color: '#24DEF3'},hoverAnimation: true // 是否开启 hover 在拐点标志上的提示动画效果}
]

在这里插入图片描述

修改部分问题(bug)

示例: 问题一

grid: {left: 'auto',top: 346, right: 'auto',containLabel:true,bottom: 20,},//grid这样写,左右都写成auto,还要加containLabel,不然就有可能挡住y轴的标签

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述


示例: 问题二

yAxis里面的max不能写死,不然最大值永远不会变,比如max=100,实际的值超过是200,那就会挡住

在这里插入图片描述
在这里插入图片描述


在这里插入图片描述

相信看了这篇文章,你应该会构建 柱状图(Mixed Line and Bar),觉得有用的话就给小编点个赞呗!!!

这篇关于【Echarts】详解 柱状图(Mixed Line and Bar)!!快来看看吧!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/319627

相关文章

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,:本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典

MySQL 主从复制部署及验证(示例详解)

《MySQL主从复制部署及验证(示例详解)》本文介绍MySQL主从复制部署步骤及学校管理数据库创建脚本,包含表结构设计、示例数据插入和查询语句,用于验证主从同步功能,感兴趣的朋友一起看看吧... 目录mysql 主从复制部署指南部署步骤1.环境准备2. 主服务器配置3. 创建复制用户4. 获取主服务器状态5

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

Spring Boot中的路径变量示例详解

《SpringBoot中的路径变量示例详解》SpringBoot中PathVariable通过@PathVariable注解实现URL参数与方法参数绑定,支持多参数接收、类型转换、可选参数、默认值及... 目录一. 基本用法与参数映射1.路径定义2.参数绑定&nhttp://www.chinasem.cnbs

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

Redis中Stream详解及应用小结

《Redis中Stream详解及应用小结》RedisStreams是Redis5.0引入的新功能,提供了一种类似于传统消息队列的机制,但具有更高的灵活性和可扩展性,本文给大家介绍Redis中Strea... 目录1. Redis Stream 概述2. Redis Stream 的基本操作2.1. XADD

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

Java JDK1.8 安装和环境配置教程详解

《JavaJDK1.8安装和环境配置教程详解》文章简要介绍了JDK1.8的安装流程,包括官网下载对应系统版本、安装时选择非系统盘路径、配置JAVA_HOME、CLASSPATH和Path环境变量,... 目录1.下载JDK2.安装JDK3.配置环境变量4.检验JDK官网下载地址:Java Downloads

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定

MySQL中的LENGTH()函数用法详解与实例分析

《MySQL中的LENGTH()函数用法详解与实例分析》MySQLLENGTH()函数用于计算字符串的字节长度,区别于CHAR_LENGTH()的字符长度,适用于多字节字符集(如UTF-8)的数据验证... 目录1. LENGTH()函数的基本语法2. LENGTH()函数的返回值2.1 示例1:计算字符串