ECharts 柱状图 配置项总结

最新推荐文章于 2024-07-02 10:45:19 发布
最新推荐文章于 2024-07-02 10:45:19 发布
阅读量338 收藏
点赞数
文章标签： html javascript css echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyin0526/article/details/117702250
版权

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

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="width: 50%;height: 50%"></div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/echarts.min.js"></script>

    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};

        var option;

        var arr1 = [20, 32, 10, 32, 32, 32, 32];
        var arr2 = [50, 20, 50, 60, 60, 60, 50];
        var arr3 = [620, 732, 701, 734, 1090, 1130, 1120];

        // y轴最大值-根据数据变化而变化
        var test1 = Math.max.apply(null, arr1) //数组中取得最大值
        var test2 = Math.max.apply(null, arr2)
        var test3 = Math.max.apply(null, arr3)
        var max1 = test1 + test2
        var max2 = test3
        
        option = {
            color: ['#61a0a8', '#c23531', '#91c7ae'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['当日已支付', '当日总量', '当月总量'],  //标题
                x: '270px',   //自定义位置
                y: '0px',
                textStyle: {
                    fontSize: 14, //字体大小
                    color: 'red'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'pink'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'pink'
                        }
                    },
                    axisTick: {
                        show: false
                    }

                }
            ],
            yAxis: [
                {
                    name: '当日',
                    type: 'value',
                    max: max1,
                    min: 0,
                    nameTextStyle: {
                        color: "#65ABE7",
                        fontSize: 12
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'pink'
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {     //网格线
                        "show": false
                    },
                    axisLabel: {
                        textStyle: {
                            color: 'pink'
                        }
                    }
                },
                {
                    type: 'value',
                    scale: true,
                    name: '当月',
                    max: max2,
                    min: 0,
                    nameTextStyle: {
                        color: "#65ABE7",
                        fontSize: 12
                    },
                    boundaryGap: [0.2, 0.2],   //坐标轴两端空白，数值为百分比
                    axisTick: {
                        show: false,
                    },
                    splitLine: {     //网格线
                        "show": false
                    },
                    axisLine: {
                        show: true,  //轴线是否显示
                        lineStyle: {  //轴线样式
                            color: 'pink'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: 'pink'
                        }
                    }
                }
            ],
            series: [
                {
                    name: '当日已支付',
                    type: 'bar',
                    barGap: 0,
                    stack: '1',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        //    position: 'top',
                            color:'red',
                    },
                    data: arr1
                },
                {
                    name: '当日总量',
                    type: 'bar',
                    stack: '1',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        position: 'top',
                        color: 'yellow',
                        show: true
                    },
                    data: arr2
                },
                {
                    name: '当月总量',
                    type: 'bar',
                    yAxisIndex: 1,
                    // barWidth: 5,
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        position: 'top',
                        color: 'yellow'
                    },
                    data: arr3
                }
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

    </script>
</body>

</html>
lily_木子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts 有引导线和内部文字_排版初步丨分析整理与视线引导
weixin_39548541的博客
12-24 339
点击这里查看上一期推送哦~半平米工坊：排版初步丨对比原则​zhuanlan.zhihu.com在前四篇推送中，我们依次接触了四大设计的基本原则，也了解了它们在排版中的重要性。也许这么长时间过去了，有的原则你已记不太清了，不过没关系，下面就让我们简单地回顾下之前的内容吧~1.亲密性：相关性强的元素靠得近，相关性弱的元素离得远2.对齐：页面上的任何元素都不能随意摆放，元素间应存在一定的视觉联系3.重复...
echarts 图表 设置柱状图，并将数据区域缩放20-40区间
qq_46011557的博客
03-22 6224
一、echarts是什么？ 一个纯JavaScript图表库。ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进...
Echarts常用配置(折线图阴影渐变，柱状图堆叠，柱状图顶部显示数量，饼图引导线配置，饼图引导线末加圆点效果)
beichen3997的博客
03-04 1587
1.折线图与柱状图鼠标hover效果 tooltip:{ width:20, axisPointer:{ type:'shadow' }, fommatter(params){ return params[0] //params是图表数据，为数组，在有两个数据（折线图或柱状图堆叠的情况）的情况下可通过param...
Echarts地图添加引导线效果(labelLine)
12-13
最近有粉丝问我能不能出个案例：地图上的地区文字，或其他标示类的图层，因为区块面积相对太小，想放在地图之外，通过labelLine连接到对应的区块上。今天就分享一个类似简单的案例，铺设散点形式铺设label，部分地区用线连接，地图以广州地图为例： 如果需要地图geojson或js文件的话，可以到我的个人 github 上自取：https://github.com/zhangqian00/echarts3-mapFile 1、初始化地图： 2、 声明label数据： 配置需要铺设的label，value值为坐标点，注释的四个区，需要用连线连接到地图外面，在后面会有单独配置，所以在此label
UI设计素材|图标在UI设计界面当中起到什么作用
awayaya1的博客
10-09 499
图标的用途 图标就是简化的文字，作为一般使用具有指意的特性，但在界面设计上图标的指意大概有三种用途： 动作提示，例如：新增、删除、编辑、赞、分享、喜欢…等等。 内容提示，例如：各种自定义的功能页面图标。 状态提示，例如：新的、成功、失败、完成、已连结的…等等。 常见UI图标素材： UI图标集 UI图标合集3 UI图标4 UI图标集合5 UI图标社交图标 ...
echarts柱状图
11-11
**ECharts柱状图详解** ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、饼图等，能够满足各种数据分析和展示的需求。在本篇中，我们将深入探讨ECharts中的柱状图...
Echarts 柱状图自动刷新数据
11-01
在本案例中，我们将关注如何实现ECharts柱状图的数据自动刷新。 首先，让我们了解柱状图的基本构建过程。ECharts柱状图的创建需要以下步骤： 1. **引入ECharts库**：在HTML文件中，你需要通过`<script>`标签引入...
echarts漂亮的柱状图按月统计
07-20
`标签`中的“js统计图”指的是这个项目使用JavaScript技术进行数据可视化，“按月统计”表明数据是按照月份分组的，“echarts柱状图”则强调了使用的图表类型。这个项目展示了如何利用ECharts这个强大的工具，结合...
springboot echarts vue 柱状图
01-25
5. **柱状图配置**： 在ECharts中，柱状图的配置项包括`series`（定义图表系列）、`xAxis`（定义横轴）、`yAxis`（定义纵轴）、`tooltip`（提示框）等。`series`中的每一项代表一个数据系列，`data`属性是具体的...
Echarts动态排名柱状图(自适应电脑和手机端)源代码
10-09
配置项中，`series`部分定义了柱状图的各项属性，比如颜色、数据值等。`xAxis`和`yAxis`用于设置坐标轴的相关参数，如刻度、标签等。动态排名可以通过定时器（`setInterval`）定期更新数据，然后调用`myChart....
echarts实现3D柱状图(视觉层面)
最新发布
qq_44624290的博客
07-02 612
文章知识点与官方知识档案匹配，可进一步学习相关知识。完整实例，copy就可直接使用。完整实例，copy就可直接使用。完整实例，copy就可直接使用。完整实例，copy就可直接使用。完整实例，copy就可直接使用。42665 人正在系统学习中。
echarts labelLine(引导线)呈水平展示
IT_iosers的博客
01-29 3743
通过labelLine属性 把第一段引导线设置为0 labelLine: { length: 0, // 第一段引导线的长度 length2: 50, // 第二段引导线的长度 show: true, color: "#00ffff", } ...
vue中使用echarts（饼图显示引导线和文字以及图例+柱形图显示格式化的图例）超详细
乐一的博客
11-21 3493
【代码】vue中使用echarts（饼图显示引导线和文字以及图例+柱形图显示格式化的图例）超详细。
Echarts饼状图柱状图指示线字体颜色百分比X轴Y轴隐藏等信息修改
记录生活点滴
06-17 689
Echarts饼状图柱状图指示线字体颜色百分比X轴Y轴隐藏等信息修改饼状图饼块信息重写饼块颜色重写指示线信息重写完整代码柱状图X轴信息过多旋转展示背景显示网格虚线隐藏X轴Y轴柱子颜色渐变和圆角柱子悬空效果完整代码最终图表效果 饼状图 饼块信息重写 tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" // 饼块详细信息重写 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比; } 饼块
ECharts踩过的坑之---引导线markLine
weixin_43843463的博客
04-20 838
ECharts踩过的坑之---引导线
echarts折线图、柱状图基准值
云
07-13 1116
【代码】echarts折线图、柱状图基准值。
echarts引导线_如何使用引导线获得更清晰的照片
culunyi0802的博客
09-19 738
echarts引导线As you get better at photography, you need to start making deliberate choices about the composition of your images. The rule of thirds just won’t cut it anymore. One of the simplest and most...
echarts设置视觉引导线穿过两行文字的效果
WanweI897的博客
10-27 480
【代码】echarts设置视觉引导线穿过两行文字的效果。
echars 地图添加引导线效果
qq_39889855的博客
04-25 2977
·引入地图数据、配置基础地图 await axios.get("../../../static/json/map/yantai.json", {}).then(yantaiJson => { //获取json数据 echarts.registerMap("yantai", yantaiJson.data); //生成地图 let jsondata = yantaiJson.data.featu...
echarts柱状图配置项
10-13
ECharts 柱状图的配置项包括： 1. xAxis：x 轴相关配置，如轴线、刻度、标签等。 2. yAxis：y 轴相关配置，如轴线、刻度、标签等。 3. series：数据系列相关配置，如颜色、标签、柱状图宽度等。 4. tooltip：提示框...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值