按天数显示的柱状图

最新推荐文章于 2024-06-28 20:28:04 发布
最新推荐文章于 2024-06-28 20:28:04 发布
阅读量902 收藏
点赞数 1
分类专栏： Echarts
@曾超缘的博客
本文链接：https://blog.csdn.net/weixin_42995083/article/details/126839747
版权

Echarts 条形图 图表配置 颜色动态渲染 数据解析
关键词由CSDN通过智能技术生成
这篇博客详细介绍了如何使用Echarts库创建一个条形图，包括图表的网格设置、提示框定位、X轴与Y轴的配置，以及不同数据段采用不同颜色的动态渲染。数据来源于一个名为`materailStorageList`的列表，涵盖了多个时间区间和不同的数据系列。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

var option = {

    legend: {
        bottom: "0",
        textStyle: { color: "#65ABE7", fontSize: fontSize }
    },

    "grid": {
        "top": "15%",
        "bottom": "25%",
        "right": "3%",
        "left": "10%"
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        },
        position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
                x = pointX + 10;
            } else { // 左边放的下
                x = pointX - boxWidth - 10;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
                y = 5;
            } else { // 上边放得下
                y = pointY - boxHeight;
            }

            return [x, y];

        },
    },
    xAxis: {

        data: timeName,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false,
            lineStyle: {
                color: "#65ABE7",
                width: 1
            },
        },
        axisLabel: { //X轴标签
            show: true,
            interval: 0,
            rotate: 12,
            textStyle: {
                color: '#65ABE7', //字体颜色
                fontSize: fontSize //字体大小
            }
        }


    },
    yAxis: [

        {
            type: 'value',
            min: 0,
            //max: 100,
            //interval: 1,
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: '#65ABE7', //字体颜色
                    fontSize: fontSize //字体大小
                }

            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitLine: { //Y轴分隔符
                show: true,
                lineStyle: {
                    color: '#65ABE7',
                }

            }
        },


    ],
    series: [

        {
            name: 'A01',
            type: 'bar',
            data: oneNum,
            itemStyle: {
                normal: {
                    //color: '#00d98b',
                    //这里是颜色
                    color: function (params) {
                        console.log("params", params);
                        if (params.name == "360天以上" || params.name == "181~360天") {
                            return "red";
                        } else if (params.name == "121~180天") {
                            return "yellow";
                        } else {
                            return "#00d98b";
                        }
                    },
                    label: {
                        show: false, //显示
                        formatter: "{c}",
                        position: 'top', //在上方
                        textStyle: { //文字样式
                            color: '#fff',
                            fontSize: fontSize
                        }
                    }
                }
            },

        },

        {
            name: 'D07',
            type: 'bar',
            data: twoNum,
            itemStyle: {
                normal: {
                    color: function (params) {
                        console.log("params", params);
                        if (params.name == "360天以上" || params.name == "181~360天") {
                            return "red";
                        } else if (params.name == "121~180天") {
                            return "yellow";
                        } else {
                            return "#00d98b";
                        }
                    },
                    label: {
                        show: false, //显示
                        formatter: "{c}",
                        position: 'top', //在上方
                        textStyle: { //文字样式
                            color: '#fff',
                            fontSize: fontSize
                        }
                    }
                }
            },

        },

        {
            name: 'W09',
            type: 'bar',
            data: threeNum,
            itemStyle: {
                normal: {
                    color: function (params) {
                        console.log("params", params);
                        if (params.name == "360天以上" || params.name == "181~360天") {
                            return "red";
                        } else if (params.name == "121~180天") {
                            return "yellow";
                        } else {
                            return "#00d98b";
                        }
                    },
                    label: {
                        show: false, //显示
                        formatter: "{c}",
                        position: 'top', //在上方
                        textStyle: { //文字样式
                            color: '#fff',
                            fontSize: fontSize
                        }
                    }
                }
            },

        },

        {
            name: 'W29',
            type: 'bar',
            data: fourNum,
            itemStyle: {
                normal: {
                    color: function (params) {
                        console.log("params", params);
                        if (params.name == "360天以上" || params.name == "181~360天") {
                            return "red";
                        } else if (params.name == "121~180天") {
                            return "yellow";
                        } else {
                            return "#00d98b";
                        }
                    },
                    label: {
                        show: false, //显示
                        formatter: "{c}",
                        position: 'top', //在上方
                        textStyle: { //文字样式
                            color: '#fff',
                            fontSize: fontSize
                        }
                    }
                }
            },

        },

        {
            name: 'A21',
            type: 'bar',
            data: fiveNum,
            itemStyle: {
                normal: {
                    color: function (params) {
                        console.log("params", params);
                        if (params.name == "360天以上" || params.name == "181~360天") {
                            return "red";
                        } else if (params.name == "121~180天") {
                            return "yellow";
                        } else {
                            return "#00d98b";
                        }
                    },
                    label: {
                        show: false, //显示
                        formatter: "{c}",
                        position: 'top', //在上方
                        textStyle: { //文字样式
                            color: '#fff',
                            fontSize: fontSize
                        }
                    }
                }
            },

        },

        {
            name: 'D27',
            type: 'bar',
            data: sixNum,
            itemStyle: {
                normal: {
                    color: function (params) {
                        console.log("params", params);
                        if (params.name == "360天以上" || params.name == "181~360天") {
                            return "red";
                        } else if (params.name == "121~180天") {
                            return "yellow";
                        } else {
                            return "#00d98b";
                        }
                    },
                    label: {
                        show: false, //显示
                        formatter: "{c}",
                        position: 'top', //在上方
                        textStyle: { //文字样式
                            color: '#fff',
                            fontSize: fontSize
                        }
                    }
                }
            },

        }

    ]
};
    var timeName=materailStorageList.map(x=>x.NAME);
    var oneNum=materailStorageList.map(x=>x.A01_NUM);
    var twoNum=materailStorageList.map(x=>x.D07_NUM);
	var threeNum=materailStorageList.map(x=>x.W09_NUM);
	var fourNum=materailStorageList.map(x=>x.W29_NUM);
	var fiveNum=materailStorageList.map(x=>x.A21_NUM);
	var sixNum=materailStorageList.map(x=>x.D27_NUM);
//伪数据
materailStorageList:[
        {NAME:"1~7天(正产)",A01_NUM:474,D07_NUM:611,W09_NUM:577,W29_NUM:563,A21_NUM:258,D27_NUM:458},
        {NAME:"8~15天",A01_NUM:656,D07_NUM:511,W09_NUM:477,W29_NUM:548,A21_NUM:582,D27_NUM:752},
        {NAME:"16~21天",A01_NUM:567,D07_NUM:411,W09_NUM:377,W29_NUM:785,A21_NUM:465,D27_NUM:564},
        {NAME:"22~30天",A01_NUM:500,D07_NUM:311,W09_NUM:677,W29_NUM:256,A21_NUM:854,D27_NUM:285},
        {NAME:"31~60天",A01_NUM:400,D07_NUM:677,W09_NUM:345,W29_NUM:485,A21_NUM:235,D27_NUM:853},
        {NAME:"61~90天",A01_NUM:300,D07_NUM:777,W09_NUM:567,W29_NUM:256,A21_NUM:876,D27_NUM:253},
        {NAME:"91~120天",A01_NUM:100,D07_NUM:300,W09_NUM:432,W29_NUM:845,A21_NUM:582,D27_NUM:458},
        {NAME:"121~180天",A01_NUM:121,D07_NUM:455,W09_NUM:784,W29_NUM:256,A21_NUM:458,D27_NUM:762},
        {NAME:"181~360天",A01_NUM:647,D07_NUM:666,W09_NUM:257,W29_NUM:385,A21_NUM:358,D27_NUM:965},
        {NAME:"360天以上",A01_NUM:878,D07_NUM:366,W09_NUM:874,W29_NUM:415,A21_NUM:956,D27_NUM:584}
    ]

用Exclel制作日期统计折线图与柱状图
CleverCode的博客
03-08 4732
1 选择Y轴数据列 2 选择X轴数据列 点击图右键。选择数据数据。 点击类别 点击选择x的数据源开始于结算位置 完整图 柱状图和折线图操作步骤基本一样，只需要选择柱状图即可。 技术交流 CleverCode是一名架构师，技术交流，咨询问题，请加CleverCode创建的qq群(架构师俱乐部)：51713358...
echarts按照时间显示柱状图_Echarts制作时间柱形离散分布图
weixin_33816685的博客
02-23 4922
话不多说， 先上效果：时间离散分布图制作步骤：1 找到echarts官方自定义原型图：官方自定义x-range原型图2 再观察源代码， 发现这块代码决定了数据的颜色显示， 从而出现x-range展示多个数据柱形的效果， 因为我们只需要显示一个数据， 所以就定义一种颜色即可， 因为需要按日期进行tooltip提示， 所以就按照实际单月日期填充数据， 颜色不变ok, 在不改变官方其他代码的情况下，...
用echarts显示本年365天每天的数据
weixin_43942765的博客
08-24 1385
用echarts显示本年365天每天的数据
ORACLE柱状图(histogram)
Colin Lau Oracle
10-31 7624
oracle 柱状图(histogram) oracle中的柱状图是用于记录表中的数据分布质量情况的描述，当每次使用analyze或者dbms_stat包分析数据表及列后，该表的分布情况会呗保存在统计表 (user_tab_columns/user_histograms)里面，当多表连接时,CBO优化器会根据柱状图提供的信息评估多表连接时将产生的成本(cost)或技术(cardinality)
mysql 柱状图统计_js/jquery 进行动态统计 各种柱状图 饼状图 线条图 等
weixin_31874577的博客
02-07 193
1.简单示例1 线条图$(document).ready(function(){var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);});2.简单示例2 柱状图$(document).ready(function(){// For horizontal bar charts, x an y values must will be "flip...
柱状图中显示显著性和数值
BioinfoDu
06-28 1280
基于ggplot绘制柱状图，小技巧，很基础的图形。但是，越到后面，会发现，越是基础的图形，我们使用的频率越高。今天的教程是基于发芽指数来绘制，我们模拟一个发芽数和天数，计算出发芽指数。
R语言 | 使用ggplot绘制柱状图，在柱子中显示数值和显著性
BioinfoDu
06-28 1924
基于ggplot绘制柱状图，小技巧，很基础的图形。但是，越到后面，会发现，越是基础的图形，我们使用的频率越高。今天的教程是基于发芽指数来绘制，我们模拟一个发芽数和天数，计算出发芽指数。，主要发表或收录生物信息学教程，以及基于R分析和可视化（包括数据分析，图形绘制等）；分享感兴趣的文献和学习资料!（PS：在社群中，可获得往期和未来教程所有数据和代码）（PS：在社群中，可获得往期和未来教程所有数据和代码）若我们的教程对你有所帮助，请。，这是对我们最大的支持。
python对比柱状图_Python 数据分析测试5 之 柱状图对比显示
weixin_32350433的博客
02-03 2320
#Time:2020/07/28#Author:Xiaohong#运行环境:OS:Windows 10#Python:3.7#功能: 导入4份文件(分别对应4个部位)，以柱状图的方式，对比显示ML1、01A的4个鞋部位平均库存时间天数。X轴为部位及两条线别，Y轴为平均库存时间天数效果如下： 主程序为(Tl_B06.py)：import osimport nu...
python pandas 可视化初步使用 -- 股票价格区间天数统计柱状图
qq_34975445的博客
04-05 1553
##通过API获取股票的历史数据 id为股票的代号 def tiingo_history(id): headers = { 'Content-Type': 'application/json', 'Authorization' : 'Token dff6a6f94862a7ee9aaddb4748c3fd1739ab6bf5' ...
matplotlib:1、同位置多柱状图 2、堆叠柱状图绘制 3、水平柱状图 4、水平同位置多柱状图
weixin_65544554的博客
10-16 3789
同一x轴位置绘制多个柱状图，主要通过调整柱状图的宽度和每个柱状图x轴的起始位置。底部x标签的位置未居中。
Echarts按天、按月、按公司统计图表（备忘）
阿杰的博客
03-06 1万+
function drawDayECharts(xArray,array_y1,array_y2,array_y3){ var dom_day = document.getElementById('main_area'); var myChart = echarts.init(dom_day); myChart.off('click'); var option =...
数据可视化——绘制带有时间线的柱状图
不能再留遗憾了的博客
07-21 4021
数据可视化——如何绘制带有时间线的动态柱状图
《七天数据可视化之旅》第五天：常用图表对比
木东居士
09-06 1778
《七天数据可视化之旅》第五天：常用图表对比Destiny，某物流公司数据产品经理，目前从事数据平台搭建和可视化相关的工作。持续学习中，期望与大家多多交流数据相关的技术和实...
柱状图+时间选择
qq_41035779的博客
08-27 2578
首先，效果图 页面代码，首先时间选择按钮 <table> <br> <tr> <td>日期： <button class="btn btn-sm btn-success"
echarts图表页面，sql 按日，周，月统计
weixin_43190879的博客
08-14 5944
首先先说需求，页面echarts图形控件，需要根据时间跨度间隔不同，页面不知如何实现不同时间跨度，所以用sql实现， 数据库表接口，日期字段是day 格式是vachar(2),统计字段userAdd 如果你表内时间字段格式是date类型的就不用to_date(day,‘YYYY-MM-dd’)转换了， 1.按天统计sql语句很好写 传入参数，开始时间startDate，结束时间endDate,统计...
echarts 修改y轴name的颜色
热门推荐
曾小超的博客
09-23 1万+
yAxis: [ { type: 'value', name:'（投入/产出）', nameTextStyle:{ color:"#65ABE7", fontSize:12, }, min: 0, ...
echarts图表没有数据的时候，在页面显示暂无数据
曾小超的博客
07-15 1万+
if(arr.length=='0'){ option = { title: { text: '暂无数据', x: 'center', y: 'center', textStyle: { color: '#65ABE7', fontWeight: 'normal', fontSize: 16 } } .
echarts的高度如何动态设置？
曾小超的博客
08-11 1万+
<div id="main" style="width: 100%;height:65vh;margin-top:5vh;position:absolute;"></div> /* 图表 */ // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var o..
echarts关系图
曾小超的博客
05-12 9087
效果图： 代码： <!DOCTYPE html> <html> <head> <title>ECharts 关系图</title> <script src="js/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;border:1p
stata柱状图代码
最新发布
03-23
### 如何使用 Stata 绘制柱状图 在 Stata 中，`graph bar` 是用于绘制柱状图的核心命令之一。以下是几种常见的柱状图及其对应的代码实现方式。 #### 1. 使用 `graph bar` 创建基本柱状图 以下是一个简单的例子，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值