echarts设置之stack参数
2024-04-11 00:20:00
echarts设置之stack参数
1、效果
2、代码（复制可用）
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>echarts设置之stack参数</title><!-- 引入 echarts.js --><script src="http://echarts.baidu.com/examples/vendors/echarts/echarts.min.js?_v_=1526486305040"></script>
</head>
<body>
<p> </p>
<p> </p>
<p>只改变了参数 stack 的值，柱状图的展现形式就不一样了。</p>
<p> </p>
<p> <a href="https://www.echartsjs.com/zh/option.html#series-bar.stack" target="_blank">配置项：https://www.echartsjs.com/zh/option.html#series-bar.stack</a> </p>
<p style="color:red"> [ stack ] 数据堆叠，同个类目轴上系列<b>配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。</b></p>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<div id="main1" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
<div id="main3" style="width: 600px;height:400px;"></div><script type="text/javascript">let consoleObj = {};/*** 创建条形图* @param id echarts需要挂载的对象* @param paramData 需要展示的相关数据* @param orderCountStack 订单数量 stack 名* @param orderPriceStack 订单金额 stack 名* @param refundCountStack 退款数量 stack 名* @param refundPriceStack 退款金额 stack 名*/consoleObj.createBar = function (id, paramData, orderCountStack, orderPriceStack, refundCountStack, refundPriceStack) {let barChart = echarts.init(document.getElementById( id ));const barOptions = {tooltip : {trigger: 'axis',axisPointer : {type : 'shadow'}},//color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],color: ['#c23531','#d48265', '#6e7074','#749f83'],xAxis : [ // X轴{show: true,type : 'category',axisTick: {alignWithLabel: true},data : paramData.xAxis //X轴的数据}],yAxis : [ // Y轴{type : 'value'}],series: [{name: '订单数量',type: 'bar',stack: orderCountStack,itemStyle: {barBorderRadius: [5, 5, 0, 0]},data: paramData.orderCount},{name: '订单金额',type: 'bar',stack: orderPriceStack,itemStyle: {barBorderRadius: [5, 5, 0, 0]},label: {formatter: '￥：{c}',show: true,position: 'top' //在X轴上方},data: paramData.orderPrice},{name: '退款数量',type: 'bar',stack: refundCountStack,itemStyle: {barBorderRadius: [5, 5, 0, 0]},data: paramData.refundCount},{name: '退款金额',type: 'bar',stack: refundPriceStack,itemStyle: {barBorderRadius: [0, 0, 5, 5]},label: {show: true,formatter: '出账：{c}',color: '#999',position: 'bottom'},data: paramData.refundPrice}]}barChart.setOption(barOptions);};//定义数据let paramData = {xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'], // x轴数据orderPrice: [100, 200, 300, 400, 500, 440, 350], //订单金额orderCount: [30, 60, 90, 110, 230, 444, 180], //订单数量refundPrice: [-200,-400,-500,-100,-200,-440,-350], //退款金额refundCount: [-20, -50, -150, -160, -190, -110, -202], //退款数量};//调用方法consoleObj.createBar('main', paramData, 'price', 'count', 'price', 'count');consoleObj.createBar('main1', paramData, 'price', 'price', 'count', 'count');consoleObj.createBar('main2', paramData, 'price', 'price', 'price', 'price');consoleObj.createBar('main3', paramData, 'price1', 'price2', 'count1', 'count2');
</script>
</body>
</html>echarts设置之stack参数相关推荐
- Echarts数据可视化开发参数配置全解
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 github源码地址:https://github.com/626626cdll ...
- 【Java 虚拟机原理】垃圾回收算法 ( 设置 JVM 命令参数输出 GC 日志 | GC 日志输出示例 | GC 日志分析 )
文章目录 一.设置 JVM 命令参数输出 GC 日志 二.GC 日志示例 三.GC 日志分析 一.设置 JVM 命令参数输出 GC 日志 在 IntelliJ IDEA 的启动参数中设置 -XX:+P ...
- 【Android RTMP】音频数据采集编码 ( FAAC 音频编码参数设置 | FAAC 编码器创建 | 获取编码器参数 | 设置 AAC 编码规格 | 设置编码器输入输出参数 )
文章目录 一. 头文件.成员变量准备 二. 创建 FAAC 编码器 三. 获取并设置 FAAC 编码器参数 四. 设置 FAAC 编码器编码标准 五. 设置 FAAC 编码器 AAC 编码规格 六. ...
- Redhat中通过命令工具和配置文件设置TCP/IP参数的方法
Redhat中通过命令工具和配置文件设置TCP/IP参数的方法 ①ifconfig命令 用ifconfig命令修改后重起服务配置不保存 给Eth0接口设置IP地址和子网掩码广播地址并激活:ifconf ...
- 生产上如何设置线程池参数？拒绝策略怎么配？|| Executors 中 JDK 给你提供了，为什么不用？？
生产上如何设置线程池参数?拒绝策略怎么配?
- 从原理上搞懂如何设置线程池参数大小？
我们在使用线程池的时候,会有两个疑问点: 线程池的线程数量设置过多会导致线程竞争激烈 如果线程数量设置过少的话,还会导致系统无法充分利用计算机资源 那么如何设置才不会影响系统性能呢? 其实线程池的设置 ...
- linux java main 参数设置_Java虚拟机参数设置
"MyEclipse has detected that less than 5% of the 64MB of Perm Gen (Non-heap memory) space remai ...
- Scrapy框架的学习(8.scrapy中settings.py里面配置说明以及怎样设置配置或者参数以及怎样使用)
1.settings.py里面的参数说明 每个参数其对应的官方得文档的网址 # -*- coding: utf-8 -*-# Scrapy settings for tencent project # ...
- ajax后台返回数据中文乱码_解决Jmeter返回值显示中文乱码 的三种方法及设置随机动态参数（非原创侵删）...
一.Jmeter返回值显示中文乱码解决方法 第一种解决方法: 1. 点击线程组--添加--后置处理器--BeanShell后置处理程序 2.点击BeanShell后置处理程序,编写:prev.setD ...
- 主从同步设置的重要参数log_slave_updates
说明:最近部署了mysql的集群环境,详细如下M01和M02为主主复制,M01和R01为主从复制:在测试的过程中发现了以下问题: 1.M01和M02的主主复制是没有问题的(从M01写入数据能同步到M0 ...
最新文章
- 升级之后的BCH将推动游戏业更上一层楼
- webService 远程访问不了的问题
- C# 效率也不是很差嘛
- java 集合 CopyOnWriteArrayList
- 学习手记(2018.9.15~2018.11.10)——备战NOIP2018
- Java循环删除集合多个元素的正确打开方式
- SpringBoot与任务
- 常用Web漏洞扫描工具汇总
- 搭建PyQt环境（Vs Code）
- 【程序人生】Web前端工程师岗位分析报告
- 该虚拟机似乎正在使用中。如果该虚拟机未在使用，请按“获取所有权(T)”按钮获取它的所有权
- 南澳大学计算机科学专业学费,2020年南澳大学学费（本科及研究生）及学费支付方式解析！...
- NameSilo域名解析管理工具
- 【实用软件 01期】B站视频下载器（免安装、即点即用）
- html 按钮按下变色松开还原,js中怎么写点击按钮时变色，松开后恢复原来的颜色...
- HDOJ 2010 水仙花数
- 避免使用std::dynamic_pointer_cast
- 《有限与无限的游戏》第五章 自然是不能言说者的王国：经典摘抄（1）
- require和import的区别？
- Rasa Core实践 报时机器人