ApexCharts使用示例 -- 层叠柱状图

最新推荐文章于 2024-05-28 10:15:47 发布
最新推荐文章于 2024-05-28 10:15:47 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript 前端 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/semian7633/article/details/104700989
版权

ApexCharts使用示例 – 层叠柱状图

一、引入apexcharts.js

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

二、HTML代码

<html>
	<head>
	    <title>ApexCharts测试样例-Scatter</title>
	    <style>
	        #chart {
	            max-width: 1000px; 
	            margin: 50 auto;
	        }
	    </style>
	</head>
	<body >
	    <div id="chart">
	    </div>
	</body>
</html>

三、JavaScript代码

<script>
    var options = {
        series: [{
                name: 'aa',
                data: [null, 55, 41, 37, 22, 43, 21] 
            // 每条数据依次对应labels，下同
            // 若无数据，则为null，不能空着
            }, {
                name: 'bb',
                data: [53, 32, 33, 52, 13, 43, 32]
            }, {
                name: 'cc',
                data: [12, 17, 11, null, 15, 11, 20]
            }, {
                name: 'dd',
                data: [17, 15, 18, 16, 19, 14, 23]
            }
        ],
        chart: {
            type: 'bar',
            height: 350,
            stacked: true,//开启层叠柱状图
            toolbar:{
                show:false, //隐藏右上角的下载按钮
            }
        },
        plotOptions: {
            bar: {
            horizontal: false, //设置柱状图为水平方向，默认false
            columnWidth:"50%"
            },
        },
        title: {
            text: '测试',
            align:"center",
            style:{
                fontSize:18
            }
        },
        xaxis: {
            categories: ["湾","水","阳","西","柳","兴","渡"]
        },
        yaxis: {
            title: {
                text: "总数",
            },
        },
        tooltip: {
            shared:true,
            x: {
                formatter: function (val) {
                    return val;
                }
            },
            y: {
                formatter: function (val) {
                    return val;
                }
            }
        },
        fill: {
            opacity: 1
        },
        legend: {
            position: 'bottom',
            horizontalAlign: 'center',
            offsetX: 40
        }
    };
    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();
</script>

四、效果

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

是阿洋啊
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 层叠与z-index的示例代码
11-21
层叠与层叠等级 HTML 元素是一个三维的概念，除了水平和垂直方向外，还会在“z 轴”上层层叠加。 既然是叠加，就会涉及到先后顺序的问题，规范中称之为“层叠等级”。 默认情况下，图文是网页的核心，因此内联元素的等级理应最高；然后是布局，其中浮动元素（脱离文档流）的等级高于块级元素；最低等级是设置背景、边框等装饰属性的元素。 例子： <style> .f { background-color: #ccffcc; border: 1px dashed #669966; padding: 10px; } .f div:fir
HTML5 ApexCharts 曲线图折线图表一例.rar
07-10
HTML5 ApexCharts 曲线图表一例，这个图表的样式挺不错，看上去很华丽，而且功能方面，支持鼠标拖拽放大曲线图，还支持鼠标圈选相关图表数据，适时显示图表提示，调用方法简单，配合HTML5技术效果更好，在IE下也有良好表现，确实是个挺实用的图表插件。
ApexCharts 不同颜色的柱状图
秋风伴落叶
08-15 404
代码】ApexCharts 不同颜色的柱状图。
apexcharts数据可视化之饼图
最新发布
Python私教
05-28 1018
apexcharts数据可视化之饼图有完整配套的Python后端代码。
Apexcharts入门须知
qq_41818857的博客
12-18 6589
1、目前市面上的图表库很多，之前我接触的比较多的是echarts,后来在工作中有幸接触到了Apexcharts,将两者进行比较会发现二者的优缺点： echarts缺点： （1）echarts体积比较大，代码写起来特别的多 （2）echarts主题颜色比较老气，并不是很好看 echarts优点： （1）功能、类型比较全面 （2）文档、demo比较详细，最重要的是文档是中文的比较方便阅读 （3）毕竟echarts用的人数比较多，所以它也比较稳定，遇到困难在百度上搜索能找到答案 Apexcharts缺点： （1）
Vue3 + hook + Apexcharts实现可视化图表渲染的封装 - 第一节 - 基础封装
qq_41068362的博客
09-07 624
可视化是切图仔的必备技能，大部分需求我都是通过现有工具，不必自己实现。比如EchartsD3Antv等可视化工具，但是我们今天的主角都是这些，是一个叫Apexcharts的可视化工具。Apexcharts是js+svg实现的（ps:Echarts同时支持canvas和svg渲染图表）。因为工作偶然接触到Apexcharts，但是该工具的社区环境是真的差，如果遇到什么问题在网上基本上搜不到信息，只有官方文档。这里对开发使用过程的封装进行整理保存，后续针对其他的问题进行整理。
ApexCharts使用示例 -- 柱状图
Young Lee
02-29 9667
ApexCharts使用示例 – 柱状图 一、引入apexcharts.js <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> 或 <script src="../apexcharts.js"></script> 二、HTML代码 <html> ...
Apexcharts学习
weixin_45030426的博客
04-26 1366
Apexcharts学习地址 ：（建议看着图标一行一行分析） 系列 [使用数据] – 顶点图表.js (apexcharts.com)https://apexcharts.com/docs/series/ 推荐看下面这个： 与数据标签一行 – 顶点图表.js (apexcharts.com)https://apexcharts.com/javascript-chart-demos/line-charts/data-labels/ ApexCharts加载了强大的功能，以满足您的数据可视化...
qt例程-折线图-柱状图ChartView.7z
07-19
在本压缩包“qt例程-折线图-柱状图ChartView.7z”中，包含的是关于Qt框架下创建折线图和柱状图的示例代码。Qt是一个跨平台的应用程序开发框架，广泛用于图形用户界面和其他类型的应用程序开发。这个例子将帮助我们...
echarts-省份地图+柱状图组合.zip
03-26
"echarts-省份地图+柱状图组合.zip" 是一个包含 ECharts 示例的压缩包，展示了如何将省份地图与柱状图结合使用，提供了一种数据可视化的解决方案。 在 ECharts 中，省份地图是通过特定的地图数据来实现的，这些数据...
swift-charts框架集成柱状图demo详解
08-15
在`Chart-Barview-master`这个项目中，你可以看到一个完整的柱状图示例，包括上述步骤的实现。通过查看源代码和运行项目，你可以更深入地理解Swift-Charts框架如何工作，以及如何自定义和扩展柱状图的功能。此外，...
Excel组合图表-柱状图组合
01-16
excel 柱状组合图表示例
echarts-柱状图
06-26
柱状图：坐标轴刻度与标签对齐。适合于网页，app等。里面的标签内容，需按照要求进行更改。详情可以查看更多关于echart的信息。也可以查看我更多关于echart的介绍和心得。
D3图表示例-线型图表面型图表柱状图表
12-05
在这个"线型图表面型图表柱状图表"的例子中，我们将探讨如何使用D3.js来构建这三种基本的数据可视化类型。 首先，线型图（Line Chart）是一种常用的数据表示方法，常用于展示趋势和变化。在D3.js中，我们可以通过`...
ng-apexcharts：ng-apexcharts是apexcharts的angular实现。 它带有一个简单的组件，使您可以在有角度的项目中使用顶点图表
01-29
import { NgApexchartsModule } from "ng-apexcharts" ; ... imports: [ BrowserModule , FormsModule , ReactiveFormsModule , NgApexchartsModule , ... ] 用法 在任何组件中，您都可以使用以下图表： < ...
商业编程-源码-层叠式窗体控件指南.zip
06-22
"商业编程-源码-层叠式窗体控件指南"很可能是提供了一套具体的实现示例，涵盖了上述部分或全部技术细节。通过学习这份指南，开发者可以深入理解层叠式窗体控件的工作原理，进而应用到自己的项目中，提升应用程序的...
Apexcharts实现双/多Line图 - 每条线的点数不同 - 第四节
qq_41068362的博客
01-29 1092
通过Apexcharts实现不同点数的多直线、多曲线图
ApexCharts使用示例 -- 折线图&柱状图混合
Young Lee
03-02 2672
ApexCharts使用示例 – 折线图&柱状图混合 一、引入apexcharts.js <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> 或 <script src="../apexcharts.js"></script> 二、HTML代码 <htm...
echarts叠加柱状图
星空的博客
06-16 1134
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="lib/echarts.js"></script> <script src="lib/jquery-3.4.1.js"></script> </head> <body> <div id="main" style="width: .
el-table里面放柱状图
09-18
### 回答1： 要在 el-table 中放置柱状图，你需要在 el-table-column 中使用自定义模板（slot）来渲染柱状图组件。以下是一个简单的示例： ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="value" label="Value"> <template slot-scope="scope"> <div> <bar-chart :data="scope.row.chartData" /> </div> </template> </el-table-column> </el-table> </template> <script> import BarChart from "@/components/BarChart.vue"; export default { components: { BarChart, }, data() { return { tableData: [ { name: "A", value: 10, chartData: [1, 2, 3, 4, 5], }, { name: "B", value: 20, chartData: [5, 4, 3, 2, 1], }, ], }; }, }; </script> ``` 在上面的代码中，我们使用了一个自定义的柱状图组件 `BarChart`，并将其放置在 el-table 的第二列中。注意，在 el-table-column 中使用 `slot-scope` 来访问当前行的数据。我们可以通过 `scope.row` 来获取当前行的数据，并将其传递给柱状图组件的 `data` 属性。 当然，你也可以使用其他的柱状图组件，只需要将其替换为 `BarChart` 即可。 ### 回答2： 在el-table中放置柱状图可以通过以下步骤实现： 1. 引入所需的依赖：在Vue组件中引入element-ui和echarts依赖。 2. 在el-table的列配置中，添加一个自定义列（slot）：通过使用el-table-column的scoped-slot属性，可以自定义一个列。 3. 在自定义列中使用echarts绘制柱状图：在自定义列的内容中，使用echarts的API来绘制柱状图。 具体实现步骤如下： 1. 在Vue组件的代码中引入依赖： ``` <template> <div> <el-table :data="tableData"> ... <el-table-column label="柱状图"> <template slot-scope="scope"> <div class="chart-container"></div> </template> </el-table-column> ... </el-table> </div> </template> <script> import { ECharts } from 'echarts' import { ElTable, ElTableColumn } from 'element-ui' export default { components: { ElTable, ElTableColumn }, data() { return { tableData: [ // 表格数据 ] } }, mounted() { this.renderChart() }, methods: { renderChart() { const chartContainer = document.querySelector('.chart-container') const chart = new ECharts(chartContainer) // 使用echarts的API来绘制柱状图 // 可以通过this.tableData获取表格数据 } } } </script> ``` 在以上代码中，通过el-table-column的scoped-slot属性，我们在表格中创建了一个自定义列。在自定义列中使用了一个div元素作为柱状图的容器，并在mounted钩子函数中调用renderChart方法来绘制柱状图。在这个方法中，使用echarts的ECharts类创建一个实例，并将柱状图渲染到容器中。在renderChart方法中，你可以根据自己的需求使用echarts的API来绘制定制的柱状图。 注意事项： - 需要在项目中正确引入element-ui和echarts的依赖。 - 在el-table中使用scoped-slot时，可以通过slot-scope属性访问到每行数据，以便在柱状图中使用。 ### 回答3： 在element-ui中，el-table是一个用于展示表格数据的组件，而柱状图是用于展示数据值的图表类型。按照题目要求，我们可以将柱状图放在el-table中的列（column）中来展示数据。 首先，我们需要引入element-ui的库和echarts的库，element-ui提供了el-table组件，而echarts是用于生成各种图表的库。 然后，我们可以在el-table的列（column）中定义一个自定义列，使用render函数来渲染柱状图。在render函数中，我们可以使用echarts生成柱状图，并将其插入到当前列（column）中。 具体代码如下： ``` <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column label="柱状图"> <template slot-scope="scope"> <div class="chart-container" ref="chartRef"></div> </template> </el-table-column> </el-table> </template> <script> import * as echarts from 'echarts'; export default { data() { return { tableData: [ { name: '小明', value: 80 }, { name: '小红', value: 90 }, { name: '小亮', value: 70 }, ], }; }, mounted() { this.drawChart(); }, methods: { drawChart() { this.$nextTick(() => { const chartDom = this.$refs.chartRef; const chart = echarts.init(chartDom); const option = { // 设置柱状图的配置项 xAxis: { type: 'category', data: this.tableData.map(item => item.name), }, yAxis: { type: 'value', }, series: [{ data: this.tableData.map(item => item.value), type: 'bar', }], }; chart.setOption(option); }); }, }, }; </script> <style scoped> .chart-container { width: 200px; height: 200px; } </style> ``` 以上代码中，我们通过el-table的data属性传递数据，使用el-table-column的prop属性设置name列的值，然后在柱状图列中使用slot-scope来自定义列的渲染。在mounted生命周期钩子函数中，使用echarts初始化柱状图，并将其渲染到页面上。最后，使用computed属性和echarts的配置项来生成柱状图。 通过以上代码，我们就可以在el-table中显示柱状图了。其中，每一行的柱状图根据数据的value值来显示高度，达到了在el-table中放置柱状图的目的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值