【Echarts】详解 柱状图（Mixed Line and Bar）！！快来看看吧！

2023-11-01 01:50
文章标签 详解 line echarts 来看 柱状图 bar mixed 看吧

本文主要是介绍【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。

相关文章

一文详解SpringBoot中控制器的动态注册与卸载

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注
阅读更多...
C#读写文本文件的多种方式详解

C#读写文本文件的多种方式详解

《C#读写文本文件的多种方式详解》这篇文章主要为大家详细介绍了C#中各种常用的文件读写方式,包括文本文件,二进制文件、CSV文件、JSON文件等,有需要的小伙伴可以参考一下... 目录一、文本文件读写1. 使用 File 类的静态方法2. 使用 StreamReader 和 StreamWriter二、二进
阅读更多...
Conda与Python venv虚拟环境的区别与使用方法详解

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,：本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v
阅读更多...
Spring Boot中WebSocket常用使用方法详解

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP
阅读更多...
java中反射Reflection的4个作用详解

java中反射Reflection的4个作用详解

《java中反射Reflection的4个作用详解》反射Reflection是Java等编程语言中的一个重要特性,它允许程序在运行时进行自我检查和对内部成员（如字段、方法、类等）的操作,本文将详细介绍... 目录作用1、在运行时判断任意一个对象所属的类作用2、在运行时构造任意一个类的对象作用3、在运行时判断
阅读更多...
MySQL 中的 CAST 函数详解及常见用法

MySQL 中的 CAST 函数详解及常见用法

《MySQL中的CAST函数详解及常见用法》CAST函数是MySQL中用于数据类型转换的重要函数,它允许你将一个值从一种数据类型转换为另一种数据类型,本文给大家介绍MySQL中的CAST... 目录mysql 中的 CAST 函数详解一、基本语法二、支持的数据类型三、常见用法示例1. 字符串转数字2. 数字
阅读更多...
SpringBoot中SM2公钥加密、私钥解密的实现示例详解

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具
阅读更多...
MyBatis-Plus 中 nested() 与 and() 方法详解(最佳实践场景)

MyBatis-Plus 中 nested() 与 and() 方法详解(最佳实践场景)

《MyBatis-Plus中nested()与and()方法详解(最佳实践场景)》在MyBatis-Plus的条件构造器中,nested()和and()都是用于构建复杂查询条件的关键方法,但... 目录MyBATis-Plus 中nested()与and()方法详解一、核心区别对比二、方法详解1.and()
阅读更多...
Spring IoC 容器的使用详解(最新整理)

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注
阅读更多...
MySQL 删除数据详解(最新整理)

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》：本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法： 示例：2.TRUNCATE语句✅ 基本语
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2