JavaScript实现堆叠图echarts

echarts.js下载链接

提取码：qj3g

根据以下数据实现堆叠图

堆叠图数据
	男	女
20~29岁	4	6
30~39岁	0	3
40~49岁	1	0

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="echarts.js"></script>
</head><body><div id="main" style="width: 600px; height: 400px"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById("main"));var option = {title: {text: '会员年龄段分布情况',},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow' }},legend: {data: ['男', '女']},toolbox: {show: true,orient: 'vertical',x: 'right',y: 'center',feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },restore: { show: true },saveAsImage: { show: true }}},calculable: true,xAxis: [{type: 'category',data: ['20~29岁', '30~39岁', '40~49岁']}],yAxis: [{type: 'value'}],series: [{name: '男',type: 'bar',stack: '111',data: [4, 0, 1],},{name: '女',type: 'bar',stack: '111', data: [6, 3, 0]},]};myChart.setOption(option); </script>
</body></html>

效果图

JavaScript实现堆叠图echarts相关推荐

JavaScript实现环形图echarts
echarts.js下载链接提取码:qj3ghttps://pan.baidu.com/s/1hEr_0IU1aom1Ag3hhpArTw 根据以下数据实现环形图环形图数据入会方式数量自愿 5 ...
echarts堆叠图tooltip中如何仅展示鼠标当前位置相应的指标数据
项目创建到现在快小半年了,期间遇到了大大小小非常多的问题,在不断遇到问题和解决问题的过程中,对vue和element-ui还有echarts的认知一点点的加深,也累积了不少对应各种问题的奇技淫巧.记录 ...
【Echarts】中国地图、堆叠图、横向柱状图
封装一个监听窗口变化,自适应图像大小的混入对象: 混入对象:一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件本身的选项. chart ...
echarts入门常用图表（柱状堆叠图）
echarts堆叠图柱状图的核心代码是在series中设置stack,拿官网的示例来讲,stack里内容相同的为一组堆叠效果图步骤步骤一:引入echarts.js <script src= ...
echarts 柱状堆叠图（图例和x轴都是动态的）
问题描述: echarts柱状堆叠图,是很常用的图表,官网的例子很简单 .图例(legend),x轴(xAxis)都是写死的.但是一般实际应用中都是动态的.下面就举个例子,实现图例和x轴都是动态的 ...
Echarts-阶梯折线堆叠图 - x、y轴动态获取
Echarts-阶梯折线堆叠图 - x.y轴动态获取最终样式数据格式 Echarts配置详情请参考: Echarts官网最终样式数据格式 "data": [[467,-4 ...
【Vue】Vue 项目前、后端整合(图表二：产品月销曲线堆叠图)
文章目录 Vue 项目前.后端整合(图表二:产品月销曲线堆叠图) 一.配置图表二 1.基本结构搭建 2.Axios 请求数据 3.图表获取数据配置 4.图标丰富 (1)字体颜色 (2)设置提示框组件 ...
用Python pyecharts v1.x 绘制图形（一）:柱状图、柱状堆叠图、条形图、直方图、帕累托图、饼图、圆环图、玫瑰图
文章目录关于pyecharts 柱状图堆叠柱状图条形图直方图帕累托图(复合图) 饼图圆环图玫瑰图下一节关于pyecharts pyecharts是一个用于生成echart(百度开源的 ...
ggplot2版聚类物种丰度堆叠图
文章目录写在前面加载依赖关系导入数据 ggtree绘制聚类树物种组成数据整理成facet需要的格式保证颜色填充独立性分面组合树和柱图修改配色 ggtree调整布局添加样本其他信息树 ...

JavaScript实现堆叠图echarts

echarts.js下载链接

根据以下数据实现堆叠图

代码

效果图

JavaScript实现堆叠图echarts相关推荐

最新文章

热门文章