Echart 柱形图 双柱 堆叠 渐变色

最新推荐文章于 2024-09-06 22:20:29 发布
最新推荐文章于 2024-09-06 22:20:29 发布
阅读量58 收藏
点赞数 3
分类专栏： Echart 文章标签： 前端 echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaowxx/article/details/141963532
版权 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <style>
        .chart-item {
            width: 50%;
            height: 300px;
            margin: 48px auto;
        }
    </style>
</head>

<body>
    <div class="chart-item" id="chart"></div>
    <script>
        var myChartArr = [];
        function drawChart(id, data) {
            var myEchart = echarts.init(document.getElementById(id));
            var option = {
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "rgba(0,0,0,0.66)",
                    borderColor: 'rgba(0,0,0,0)',
                    axisPointer: {
                        type: "shadow",
                        label: {
                            show: false,
                        },
                    },
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    },
                },
                legend: {
                    orient: "horizontal",
                    right: "1%",
                    top: "3%",
                    textStyle: {
                        color: "#333",
                        fontSize: 12,
                    },
                    itemWidth: 14,
                    itemHeight: 10,
                },
                grid: {
                    left: "6%",
                    right: "3%",
                    bottom: "3%",
                    top: "15%",
                    containLabel: true,
                    z: 22,
                },
                xAxis: [{
                    type: "category",
                    gridIndex: 0,
                    data: data.xData,
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#fff",
                        },
                    },
                    axisLabel: {
                        interval: 0,
                        show: true,
                        color: "#909db0",
                        margin: 10,
                        textStyle: {
                            fontSize: 12,
                        },
                    },
                    axisPointer: {
                        type: 'shadow',
                    }
                },],
                yAxis: [{
                    type: "value",
                    name: "%",
                    nameTextStyle: {
                        color: "#88939d",
                        nameLocation: "start",
                    },
                    splitNumber: 5,
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#19347b",
                        },
                    },
                    gridIndex: 0,
                    min: 0,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#fff",
                        },
                    },
                    axisLabel: {
                        formatter: "{value}",
                        color: "#909db0",
                        margin: 10,
                        textStyle: {
                            fontSize: 12,
                        },
                    },
                }],
                series: [{
                    name: data.data1.name,
                    type: "bar",
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    itemStyle: {
                        normal: {
                            barBorderRadius: [20, 20, 20, 20],
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 1,
                                color: '#338dfc'
                            }, {
                                offset: 0,
                                color: '#02d7f9'
                            }], false)
                        },
                    },
                    barWidth: 14,
                    data: data.data1.value,
                    zlevel: 11,
                }, {
                    name: data.data2.name,
                    type: "bar",
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    itemStyle: {
                        normal: {
                            barBorderRadius: [20, 20, 20, 20],
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 1,
                                color: '#fc7c33'
                            }, {
                                offset: 0,
                                color: '#ffc007'
                            }], false)
                        },
                    },
                    barWidth: 14,
                    data: data.data2.value,
                    zlevel: 11,

                }],
            };
            myEchart.setOption(option)
            myChartArr.push(myEchart)
        }
        var mockData = {
            xData: [1,2,3,4,5,6,7,8,9,10],
            data1: {
                name: 'item1',
                value: [ 1.63, 1.65, 1.67, 1.69, 1.67, 1.66, 1.65, 1.64, 1.65, 1.66 ]
            },
            data2: {
                name: 'item2',
                value: [ 1.45, 1.43, 1.45, 1.43, 1.46, 1.48, 1.46, 1.43, 1.38, 1.40]
            }
        }
        drawChart('chart', mockData)

        $(window).resize(function () {
            for (var i = 0; i < myChartArr.length; i++) {
                myChartArr[i].resize();
            }
        })
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <style>
        .chart-item {
            width: 50%;
            height: 300px;
            margin: 48px auto;
        }
    </style>
</head>

<body>
    <div class="chart-item" id="chart"></div>
    <script>
        var myChartArr = [];
        function drawChart(id, data) {
            var myEchart = echarts.init(document.getElementById(id));
            var option = {
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "rgba(0,0,0,0.66)",
                    borderColor: 'rgba(0,0,0,0)',
                    axisPointer: {
                        type: "shadow",
                        label: {
                            show: false,
                        },
                    },
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    },
                },
                legend: {
                    orient: "horizontal",
                    right: "1%",
                    top: "3%",
                    textStyle: {
                        color: "#333",
                        fontSize: 12,
                    },
                    itemWidth: 14,
                    itemHeight: 10,
                },
                grid: {
                    left: "6%",
                    right: "3%",
                    bottom: "3%",
                    top: "15%",
                    containLabel: true,
                    z: 22,
                },
                xAxis: [{
                    type: "category",
                    gridIndex: 0,
                    data: data.xData,
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#fff",
                        },
                    },
                    axisLabel: {
                        interval: 0,
                        show: true,
                        color: "#909db0",
                        margin: 10,
                        textStyle: {
                            fontSize: 12,
                        },
                    },
                    axisPointer: {
                        type: 'shadow',
                    }
                },],
                yAxis: [{
                    type: "value",
                    name: "%",
                    nameTextStyle: {
                        color: "#88939d",
                        nameLocation: "start",
                    },
                    splitNumber: 5,
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#19347b",
                        },
                    },
                    gridIndex: 0,
                    min: 0,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#fff",
                        },
                    },
                    axisLabel: {
                        formatter: "{value}",
                        color: "#909db0",
                        margin: 10,
                        textStyle: {
                            fontSize: 12,
                        },
                    },
                }],
                series: [{
                    name: data.data1.name,
                    type: "bar",
                    stack: "all",
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    itemStyle: {
                        normal: {
                            barBorderRadius: [20, 20, 20, 20],
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 1,
                                color: '#338dfc'
                            }, {
                                offset: 0,
                                color: '#02d7f9'
                            }], false)
                        },
                    },
                    barWidth: 14,
                    data: data.data1.value,
                    zlevel: 11,
                }, {
                    name: data.data2.name,
                    type: "bar",
                    stack: "all",
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    itemStyle: {
                        normal: {
                            barBorderRadius: [20, 20, 20, 20],
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 1,
                                color: '#fc7c33'
                            }, {
                                offset: 0,
                                color: '#ffc007'
                            }], false)
                        },
                    },
                    barWidth: 14,
                    data: data.data2.value,
                    zlevel: 11,

                }],
            };
            myEchart.setOption(option)
            myChartArr.push(myEchart)
        }
        var mockData = {
            xData: [1,2,3,4,5,6,7,8,9,10],
            data1: {
                name: 'item1',
                value: [ 1.63, 1.65, 1.67, 1.69, 1.67, 1.66, 1.65, 1.64, 1.65, 1.66 ]
            },
            data2: {
                name: 'item2',
                value: [ 1.45, 1.43, 1.45, 1.43, 1.46, 1.48, 1.46, 1.43, 1.38, 1.40]
            }
        }
        drawChart('chart', mockData)

        $(window).resize(function () {
            for (var i = 0; i < myChartArr.length; i++) {
                myChartArr[i].resize();
            }
        })
    </script>
</body>

</html>

四喜花露水
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts常用柱状图
m0_51431448的博客
04-04 3363
最近做可视化比较多，就常用的图表类型做了一下总结。 因为做可视化的图表代码量非常大，所以会把echarts图表单独抽离出来，封装成一个组件，也可以复用，所以这里我直接把封装的组件直接放在这里，是可以直接拿来用的，根据所需稍作修改即可。 这里都是用的vue3，其实和vue2差不多，各式各样的花里胡哨的图表无非就是option配置不同，如果使用的是vue2，在写法上稍作修改即可。 上篇博客有写 echarts 图表组件封装模板，vue2、vue3都有可以参考，链接附上echarts图表组件封装模板 1.
vue+echart实现 X轴 双柱状图 渐变色
Polarisone的博客
04-28 3085
vue+echart实现X轴双柱状图渐变色 一:安装 1. 首先需要安装echarts依赖包 npm install echarts -S 2. 或者使用国内的淘宝镜像： npm install -g cnpm --registry=https://registry.npm.taobao.org 二: 创建图表 全局引入 main.js >```javascript // ...
【Echarts】echarts渐变重叠立体柱形图
weixin_44100002的博客
09-19 527
echarts渐变重叠立体柱形图
【Echarts】echarts渐变不重叠立体柱形图
weixin_44100002的博客
09-19 449
渐变的立体柱形图
Echarts 3D柱形图和3D堆叠柱形图实现
z1076233241的博客
05-28 4174
这个图本身组成部分多样，一组双柱图（蓝绿柱子），由10个部分构成，解释其中一个（蓝色），一个由3个菱形，2个直边构成。3个菱形为上、中、底部，2个直边为背景虚化的柱子，和蓝颜色柱子，绿色柱子同理。其中，直边的图形利用两种颜色，深浅不一进行渲染，出现了类似于直边的效果。最后吐槽，我原本想实现的柱形图，是上方为平行四边形的类型的柱形图，但发现，Echarts自带的图形中，没有平行四边形，得自己画或者去官方那里放入图片进行代码的生成导出，于是放弃，使用这种网上查找的大多数人使用的菱形进行操作。
echarts柱状图两种颜色上下堆叠增加而不是重合
sdad2154的博客
03-10 994
【代码】echarts柱状图两种颜色上下堆叠增加而不是重合。
echarts柱状图配置代码详解，柱状图常用图例代码
热门推荐
做笔记/记录遇到的前端bug
03-14 1万+
一篇足够，带你快速上手echarts柱状图，附渐变柱状图、堆叠柱状图、多柱柱状图、横向柱状图等详细配置代码
echarts实现柱状重叠展示（背景是浅白色壮壮图，数据采用其他柱状图展示）
Aa12364567的博客
10-23 894
【代码】echarts实现柱状重叠展示（背景是浅白色壮壮图，数据采用其他柱状图展示）
堆叠图_echarts_柱状堆叠图_
09-29
在这个场景中，我们关注的是“堆叠图”和“柱状堆叠图”，这是ECharts中用于展现多组数据相互叠加效果的图表类型。这种图表可以有效地展示不同类别在总值中的占比，以及各个类别之间的相对关系。 堆叠图（Stacked ...
带渐变色 效果的柱形图
04-13
当柱形图结合了渐变色效果时，不仅可以增强视觉吸引力，还能更有效地传达数据间的差异和趋势。本篇文章将深入探讨如何创建带有渐变色效果的柱形图，并基于提供的文件"BarChartManager.java"，以及可能使用的库...
matplotlib画图：柱形图、堆叠柱形图、分组柱形图。
橘子味儿的阳光
07-30 3514
matlibplot画图：柱形图、堆叠柱形图、分组柱形图。 分组柱形图与堆叠柱形图的区别 堆叠柱形图：有助于帮助我们观察部分与整体之间的关系。如：2020年每个区域每个季度的销售情况。 分组柱形图：当比较一个整体的某组成部分与其他整体对应组成部分时，分组柱形图表现更好。如：2020年各区域第一季度的销售情况比较。 柱形图 先画个柱形图：表示不同组男生的分数。 import matplotlib.pyplot as plt import numpy as np # G1,G2,G3,G4,G5小组的分数。
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 484
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 300
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 363
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
网页开发 HTML
ultramand的博客
09-06 862
这个例子中，我使用了多个HTML标签来构建一个包含图像、图表、视频和其他元素的综合页面。// JavaScript代码。
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 840
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
深入理解JavaScript闭包：避免常见的内存泄漏问题
官方推荐
09-02 4573
深入理解JavaScript闭包：避免常见的内存泄漏问题
Nginx部署前端Vue项目
不会代码的小林
09-03 1311
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
echart 柱形图的宽度
03-20
ECharts是一个基于JavaScript的开源可视化库，用于构建交互式的图表和数据可视化。在ECharts中，柱形图的宽度可以通过设置series中的barWidth属性来调整。 barWidth属性用于设置柱形图的宽度，可以是具体的数值或百分比。如果设置为数值，则表示柱形的宽度；如果设置为百分比，则表示相对于类目宽度的百分比。 以下是设置柱形图宽度的示例代码： ```javascript option = { xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'], }, yAxis: { type: 'value', }, series: [{ type: 'bar', data: [10, 20, 30, 40, 50], barWidth: 20, // 设置柱形图宽度为20像素 }] }; ``` 在上述示例中，通过设置series中的barWidth属性为20，将柱形图的宽度设置为20像素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值