Echarts柱状图配置代码详解，含常用图例代码

一、初识柱状图

从echarts官网引入基础的柱状图后，可以看到他有如下的配置项。我们可以改变各个配置项的属性，将图例调整为我们期望的效果。

二、常用配置项

因为引入echarts图例后，改变图例的东西都在option配置项中，所以其他部分如引入,获取盒子,挂载盒子等则不过多赘述

2.1 柱子顶部数据展示  

操作series 中 itemstyle 的 lable 属性，在lable中自定义顶部展示数据的css样式和数据格式

const yData = [15, 20, 12, 30, 45, 26];
option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: yData,type: 'bar',showBackground: true,label: {show: true, // 开启显示position: 'top', // 在上方显示distance: 15, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效verticalAlign: 'middle',textStyle: {color: '#424656', // 顶部数据的颜色fontSize: 14     // 顶部数据的字体大小},formatter: function (params) {// dataIndex是当前柱状图的索引let num = yData[params.dataIndex] / 160;num = Math.round(num * 100) / 100; // 保留两位小数,不四舍五入return (yData[params.dataIndex] + '人' + '(' + num + '%' + ')' // 此处return的字符串可根据自身项目需求自定义);}}}]
};

2.2 柱子的颜色

操作series 中 itemstyle 的 color 属性，即可改变柱状图的颜色 

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [15, 20, 12, 30, 45, 26],type: 'bar',showBackground: true,itemStyle:{ color:'green'  // 将柱子颜色改为绿色}}]
};

 

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [15, 20, 12, 30, 45, 26],type: 'bar',showBackground: true,itemStyle: {color: {type: 'linear',x: 0, // 若将此值设为1，表示从右到左渐变y: 1, // 若将此值设为1，表示从上到下渐变x2: 0, // 左y2: 0, // 上colorStops: [{offset: 0,color: '#192060' // 0% 处的颜色},{offset: 0.9,color: '#00C0FF' // 90% 处的颜色}]}}}]
};

 2.3 多根柱子的柱状图

series[ ]中写一个对象，就是单柱柱状图，写两个对象就是双柱柱状图图，写三个就是三柱，以此类推

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [15, 20, 12, 30, 45, 26,36],type: 'bar',showBackground: true,itemStyle: {color: {type: 'linear',x: 0, // 若将此值设为1，表示从右到左渐变y: 1, // 若将此值设为1，表示从上到下渐变x2: 0, // 左y2: 0, // 上colorStops: [{offset: 0,color: '#192060' // 0% 处的颜色},{offset: 0.9,color: '#00C0FF' // 90% 处的颜色}]}}},{data: [18, 28, 18, 38, 48, 28,32],type: 'bar',showBackground: true,itemStyle: {color: {type: 'linear',x: 0, // 若将此值设为1，表示从右到左渐变y: 1, // 若将此值设为1，表示从上到下渐变x2: 0, // 左y2: 0, // 上colorStops: [{offset: 0,color: '#322E28' // 0% 处的颜色},{offset: 0.9,color: '#FFD600' // 90% 处的颜色}]}}}]
};

 2.4 堆叠柱状图

操作series 中 itemstyle 的 stack 属性，两个柱状图的 stack属性值相等时，就会叠放

 series: [{stack: '演示柱状图',  // 两个柱子的 stack值相同时就会堆叠放置name: '蓝色柱子', // 这个name需要和 legend下面data里面的 name 对应起来data: [15, 20, 12, 30, 45, 26, 36], // 蓝色柱子数据type: 'bar', // 类型：柱状图barWidth: 40, // 柱子宽度showBackground: true, // 是否展示背后的阴影itemStyle: {color: '#2DC3FB' // 蓝色柱子颜色}},{stack: '演示柱状图',   // 两个柱子的 stack值相同时就会堆叠放置name: '黄色柱子', // 这个name需要和 legend下面data里面的 name 对应起来data: [18, 28, 18, 38, 48, 28, 32], // 黄色柱子数据type: 'bar', // 类型：柱状图barWidth: 40, // 柱子宽度showBackground: false, // 是否展示背后的阴影itemStyle: {color: '#FDD43C' // 黄色柱子颜色}}]

 2.5 legend配置项的展示

操作series 中 itemstyle 的 legedn 属性，即可调试 版块控制器的css样式以及位置等

 option = {grid: {//调整图表位置show: false, //是否显示直角坐标系网格top: '15%', // 距离图例顶部的位置，可写百分比，可以写数字right: '8%',bottom: '10%',left: '8%'},legend: {top: '5%', // 控制 板块控制器的位置right: 'center',// icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none// itemWidth: 10,  // 设置宽度// itemHeight: 4, // 设置高度itemGap: 40, // 设置两个legend之间的间距data: [{name: '蓝色柱子',  // 这个name需要和 series 里面的 name 对应起来textStyle: {color: '#2DC3FB' // 单独设置某一个图列的颜色}},{name: '绿色柱子',  // 这个name需要和 series 里面的 name 对应起来textStyle: {color: 'green' // 单独设置某一个图列的颜色}}]},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // x轴数据},yAxis: {type: 'value'},series: [{name: '蓝色柱子',  // 这个name需要和 legend下面data里面的 name 对应起来data: [15, 20, 12, 30, 45, 26, 36], // 蓝色柱子数据type: 'bar', // 类型：柱状图barWidth: 40, // 柱子宽度showBackground: true,  // 是否展示背后的阴影itemStyle: {color: '#2DC3FB' // 蓝色柱子颜色}},{name: '绿色柱子',  // 这个name需要和 legend下面data里面的 name 对应起来data: [18, 28, 18, 38, 48, 28, 32], // 黄色柱子数据type: 'bar', // 类型：柱状图barWidth: 40, // 柱子宽度showBackground: false,  // 是否展示背后的阴影itemStyle: {color: 'green' // 黄色柱子颜色}}]};

三、常用图例及配置代码

3.1双柱状图

       option = {backgroundColor: '#100C2A', // 背景色tooltip: {trigger: "axis",axisPointer: {type: "cross",crossStyle: {color: "#999",},},},grid: {//调整图表位置show: false, //是否显示直角坐标系网格top: "15%", // 一下数值可为百分比也可为具体像素值right: "8%",bottom: "10%",left: "8%",},xAxis: [{type: "category",data: ["a", "b", "c", "d", "e", "f"],axisPointer: {type: "shadow",},axisLine: {//横轴样式lineStyle: {color: "#08426D",},},axisLabel: {show: true,textStyle: {color: "#85B0C4",},},axisTick: {show: false, //隐藏刻度线},},],yAxis: [{type: "value",// min: 0, 最小值// interval: 20, 两根横轴之间的差值，不太建议手动设置splitLine: {show: true,lineStyle: {color: ["#08426D"],width: 1,type: "solid",},textStyle: {color: "green",},},axisLabel: {show: true,formatter: "{value}",textStyle: {color: "#85B0C4",},},},],legend: {top: "5%", // 控制 板块控制器的位置right: "center",// icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none// itemWidth: 10,  // 设置宽度// itemHeight: 4, // 设置高度itemGap: 40, // 设置间距data: [{name: "A柱子",textStyle: {color: "#fff", // 单独设置某一个图列的颜色},},{name: "B柱子",textStyle: {color: "#fff", // 单独设置某一个图列的颜色},},],},series: [{name: "A柱子",type: "bar",barWidth: "15%", // 柱的宽度data: [50, 60, 80, 45, 65, 25],itemStyle: {color: {type: "linear",x: 0, // 右y: 1, // 下x2: 0, // 左y2: 0, // 上colorStops: [{offset: 0,color: "#192060", // 0% 处的颜色},{offset: 0.9,color: "#00C0FF", // 90% 处的颜色},],},},label: {show: true, // 开启显示position: "top", // 在上方显示distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。verticalAlign: "middle",textStyle: {// 数值样式color: "#D2CC13",fontSize: 12,},},},{name: "B柱子",type: "bar",barWidth: "15%", // 柱的宽度data: [30, 26, 89, 12, 63, 45],itemStyle: {color: {type: "linear",x: 0, // 右y: 1, // 下x2: 0, // 左y2: 0, // 上colorStops: [{offset: 0,color: "#322E28", // 0% 处的颜色},{offset: 0.9,color: "#FFD600", // 90% 处的颜色},],},},label: {show: true, // 开启显示position: "top", // 在上方显示distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。verticalAlign: "middle",textStyle: {// 数值样式color: "#D2CC13",fontSize: 12,},},},],};

3.2 折线图结合柱状图

option = {backgroundColor: '#100C2A',tooltip: {trigger: "axis",axisPointer: {type: "cross",crossStyle: {color: "#fff",},},},tooltip: {// 图列提示框，默认不显示show: true,color: "red",},grid: {//调整图表位置show: false, //是否显示直角坐标系网格top: "15%", // 一下数值可为百分比也可为具体像素值right: "5%",bottom: "10%",left: "10%",},legend: {top: "5%",data: [{name: "柱子名称",textStyle: {color: "#A9DDEE", // 单独设置某一个图列的颜色},},{name: "折线名称",textStyle: {color: "#A9DDEE", // 单独设置某一个图列的颜色},},],},xAxis: [{type: "category",data: ["A类", "B类", "C类", "D类", "E类", "F类", "G类", "H类"],axisPointer: {type: "shadow",},axisLine: {show: false, //横轴样式},axisLabel: {show: true,textStyle: {color: "#85B0C4",},},axisTick: {show: false, //隐藏刻度线},},],yAxis: [{type: "value",// min: 0,// max: 250,// interval: 50, // y轴 两刻度之间的差值barWidth: "35%",axisLabel: {formatter: "{value} 个",},splitLine: {show: true,lineStyle: {color: ["#08426D"],width: 1,type: "solid",},},axisLabel: {// y轴 数据格式和颜色show: true,formatter: "{value} 个",textStyle: {color: "#85B0C4",},},},],series: [{name: "柱子名称",type: "bar",barWidth: "20%",tooltip: {valueFormatter: function (value) {return value + " 个";},},data: [40, 50, 60, 65, 54, 65, 60, 50],itemStyle: {color: {type: "linear",x: 0, // 右y: 1, // 下x2: 0, // 左y2: 0, // 上colorStops: [{offset: 0,color: "#192F68", // 0% 处的颜色},{offset: 1,color: "#18E0FD", // 90% 处的颜色},],},},label: {show: true, // 开启显示position: "top", // 在上方显示distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。verticalAlign: "middle",textStyle: {// 数值样式color: "#F4EC03",fontSize: 12,},},},{name: "折线名称",type: "line",// yAxisIndex: 1,tooltip: {valueFormatter: function (value) {return value + " 个";},},data: [35, 62, 84, 52, 44, 96, 78, 66],itemStyle: {color: {type: "linear",x: 0, // 右y: 1, // 下x2: 0, // 左y2: 0, // 上colorStops: [{offset: 0,color: "#18E0FD", // 0% 处的颜色},{offset: 0.9,color: "#18E0FD", // 90% 处的颜色},],},},},],};

3.3 堆叠柱状图

 option = {backgroundColor: '#100C2A',tooltip: {trigger: "axis",axisPointer: {type: "cross",crossStyle: {color: "#999",},},},grid: {//调整图表位置show: false, //是否显示直角坐标系网格top: "15%", // 一下数值可为百分比也可为具体像素值right: "5%",bottom: "10%",left: "8%",},legend: {top: "5%", // 控制 板块控制器的位置// icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none// itemWidth: 10,  // 设置宽度// itemHeight: 4, // 设置高度itemGap: 80, // 设置顶部图标间距right: "center",data: [{name: "A柱子的名字",textStyle: {color: "#fff", // 单独设置某一个图列的颜色},},{name: "B柱子的名字",textStyle: {color: "#fff", // 单独设置某一个图列的颜色},},],},xAxis: [{type: "category",data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",],axisPointer: {type: "shadow",},axisLine: {//横轴样式lineStyle: {color: "#08426D",},},axisLabel: {show: true,textStyle: {color: "#85B0C4",},},},],yAxis: [{type: "value",splitLine: {show: true,lineStyle: {color: ["#08426D"],width: 1,type: "solid",},textStyle: {color: "green",},},axisLabel: {show: true,formatter: "{value}",textStyle: {color: "#85B0C4",},},},],series: [{name: "A柱子的名字",type: "bar",barWidth: "25%", // 设置柱子的宽度stack: "柱子", //同个类目轴上系列配置相同的stack值可以堆叠放置data: [20, 30, 40, 60, 20, 50, 40, 30, 30, 50, 40, 30],itemStyle: {color: {type: "linear",x: 0, // 右y: 1, // 下x2: 0, // 左y2: 0, // 上colorStops: [{offset: 0,color: "#013560", // 0% 处的颜色},{offset: 0.9,color: "#00F5EE", // 90% 处的颜色},],},},},{name: "B柱子的名字",type: "bar",barWidth: "25%", // 设置柱子的宽度stack: "柱子", //同个类目轴上系列配置相同的stack值可以堆叠放置data: [50, 40, 70, 15, 30, 45, 25, 60, 70, 30, 10, 65],itemStyle: {color: {type: "linear",x: 0, // 右y: 1, // 下x2: 0, // 左y2: 0, // 上colorStops: [{offset: 0,color: "#1B2E6E", // 0% 处的颜色},{offset: 0.9,color: "#00C0FF", // 90% 处的颜色},],},},label: {show: true, // 开启显示position: "top", // 在上方显示distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。verticalAlign: "middle",textStyle: {// 数值样式color: "#D2CC17",fontSize: 12,},},},],};

四、更多参考

官方文档

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【电路笔记】-最大功率传输

【电路笔记】-最大功率传输

最大功率传输 文章目录 最大功率传输1、概述2、最大功率传输定理 (MPTT)3、示例4、阻抗匹配5、总结 当工程师设计电子电路时，他们会跟踪许多不同的参数，但最重要的参数之一是功率。 在现代电路中，功率在多个阶段中不断变化，有时由…
阅读更多...
CF1899 G. Unusual Entertainment [二维数点/二维偏序]

CF1899 G. Unusual Entertainment [二维数点/二维偏序]

传送门:CF [前题提要]:没什么好说的,区域赛爆炸之后发愤加训思维题.秒了div3 A~F的脑筋急转弯,然后被G卡了,树剖dfs序的想法已经想到了,题目也已经化简为两个线段是否存在一个合法位置了.但是MD不会二维数点,用一个树剖扫描线搞来搞去最后还是Tle.果然如下图所说:科技还是十分…
阅读更多...
详谈动态规划问题并解最大子数组和

详谈动态规划问题并解最大子数组和

今天刷力扣又学会了一种算法----动态规划，经过我查阅不少资料后，这些我总结的分享给大家 动态规划是什么？ 动态规划（Dynamic Programming）是一种求解最优化问题的数学方法，它通常用于解决具有重叠子问题和…
阅读更多...
学习模拟简明教程【Learning to simulate】

学习模拟简明教程【Learning to simulate】

深度神经网络是一项令人惊叹的技术。 有了足够的标记数据，他们可以学习为图像和声音等高维输入生成非常准确的分类器。 近年来，机器学习社区已经能够成功解决诸如对象分类、图像中对象检测和图像分割等问题。 上述声明中的加黑字体警告是有足够的标记数…
阅读更多...
【高并发内存池】第一篇 项目简介及定长内存池

【高并发内存池】第一篇 项目简介及定长内存池

🕺作者： 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux菜鸟刷题集 😘欢迎关注：👍点赞🙌收藏✍️留言 🏇码字不易，你的👍点赞🙌收藏❤️关注对我真的…
阅读更多...
二十三种设计模式全面解析-当你的对象需要知道其他对象的状态变化时，观察者模式是你的救星！

二十三种设计模式全面解析-当你的对象需要知道其他对象的状态变化时，观察者模式是你的救星！

在软件设计的世界中，有一种设计模式以其简洁而强大的特性闪耀着光芒，它就是——观察者模式（Observer Pattern）。这个模式它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象，为我们创造…
阅读更多...
035、目标检测-物体和数据集

035、目标检测-物体和数据集

之——物体检测和数据集 目录 之——物体检测和数据集 杂谈 正文 1.目标检测 2.目标检测数据集 3.目标检测和边界框 4.目标检测数据集示例 杂谈 目标检测是计算机视觉中应用最为广泛的，之前所研究的图片分类等都需要基于目标检测完成。 在图像分类任务中&am…
阅读更多...
OpenGL_Learn13（材质）

OpenGL_Learn13（材质）

1. 材质 cube.vs #version 330 core layout (location 0) in vec3 aPos; layout (location 0 ) in vec3 aNormal;out vec3 FragPos; out vec3 Normal;uniform mat4 model; uniform mat4 view; uniform mat4 projection;void main() {FragPosvec3(model*vec4(aPos,1.0));Norma…
阅读更多...
【Java程序员面试专栏 专业技能篇】Java SE核心面试指引

【Java程序员面试专栏 专业技能篇】Java SE核心面试指引

关于Java SE部分的核心知识进行一网打尽，包括四部分：基础知识考察、面向对象思想、核心机制策略、Java新特性，通过一篇文章串联面试重点，并且帮助加强日常基础知识的理解，全局思维导图如下所示：
阅读更多...
STM32-基本定时器

STM32-基本定时器

一、基本定时器的作用 定时触发输出直接驱动DAC。 二、基本定时器的框图 以STM32F103系列为例，具体开发板请查看开发手册。 类别定时器总线位数计数方向预分频系数是否可以产生DMA捕获/比较通道互补输出基本定时器TIM6 / TIM7APB116位向上1~65536可以0无通用定时…
阅读更多...
Yolov5安装运行过程中出现的问题

Yolov5安装运行过程中出现的问题

Yolov5安装运行过程中出现的问题合集 安装问题pip 安装 requirements.txtcmd下如何退出python&#xff1f;升级numpy protobuf版本过高AttributeError: Can’t get attribute ‘SPPF’ on <module ‘models.common’ from 地址找不到图片NameError: name warnings is not de…
阅读更多...
Spring Cloud学习（九）【Elasticsearch 分布式搜索引擎01】

Spring Cloud学习（九）【Elasticsearch 分布式搜索引擎01】

文章目录 初识 elasticsearch了解 ES倒排索引ES 的一些概念安装es、kibana安装elasticsearch部署kibana 分词器安装IK分词器ik分词器-拓展词库 索引库操作mapping 映射属性索引库的 CRUD 文档操作添加文档查看、删除文档修改文档Dynamic Mapping RestClient 操作索引库什么是Re…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023