echarts入门常用图表（柱状堆叠图）

echarts堆叠图柱状图的核心代码是在series中设置stack，拿官网的示例来讲，stack里内容相同的为一组堆叠

效果图

步骤

步骤一：引入echarts.js

<script src="../lib/echarts.min.js"></script>

步骤二：准备一个呈现图表的盒子

<div id="main" style="width:600px;height:400px"></div>

步骤三：初始化echarts实例对象

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);

步骤四：准备配置项

option = {// backgroud:'#333',tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}],yAxis: [{type: 'value'}],series: [{name: 'Email',type: 'bar',stack: 'Ad',emphasis: {focus: 'series'},data: [120, 132, 101, 134, 90, 230, 210],},{name: 'Union Ads',type: 'bar',stack: 'Ad',emphasis: {focus: 'series'},data: [220, 182, 191, 234, 290, 330, 310],},]};

步骤五：将配置项设置给echarts实例对象

option && myChart.setOption(option);

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 步骤一：引入echarts.js --><script src="../lib/echarts.min.js"></script>
</head>
<body><!-- 步骤二：准备一个呈现图表的盒子 --><div id="main" style="width:600px;height:400px"></div><script>// 步骤三：初始化echarts实例对象// 参数，dom，决定图标最终呈现的位置var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;var large = 0.2;// 步骤四：准备配置项option = {// backgroud:'#333',tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}],yAxis: [{type: 'value'}],series: [{name: 'Email',type: 'bar',stack: 'Ad',emphasis: {focus: 'series'},data: [120, 132, 101, 134, 90, 230, 210],},{name: 'Union Ads',type: 'bar',stack: 'Ad',emphasis: {focus: 'series'},data: [220, 182, 191, 234, 290, 330, 310],},]};// 步骤五：将配置项设置给echarts实例对象option && myChart.setOption(option);</script>
</body>
</html>

echarts入门常用图表（柱状堆叠图）相关推荐

echarts 柱状堆叠图（图例和x轴都是动态的）
问题描述: echarts柱状堆叠图,是很常用的图表,官网的例子很简单 .图例(legend),x轴(xAxis)都是写死的.但是一般实际应用中都是动态的.下面就举个例子,实现图例和x轴都是动态的 ...
用Python pyecharts v1.x 绘制图形（一）:柱状图、柱状堆叠图、条形图、直方图、帕累托图、饼图、圆环图、玫瑰图
文章目录关于pyecharts 柱状图堆叠柱状图条形图直方图帕累托图(复合图) 饼图圆环图玫瑰图下一节关于pyecharts pyecharts是一个用于生成echart(百度开源的 ...
python pyecharts Bar柱状堆叠图
柱状堆叠图,适合两个商家直接比较 attr=["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋" ...
Echarts之双横向柱状对比图
需求: 鼠标移入: 1.容器: <div id="bar" style="width: 700px; height: 380px; background: rgba ...
django Echarts画柱状推移图
1. 首先确定要画什么样的图,在Echarts官网找好案例 2.根据图确认需要准备的数据,从后台准备数据传递给模板 3.模板渲染,使用Echarts组件功能完成自己想要的内容中间遇到几个坑: 1. ...
柱状折线图2-双柱状重合堆积折线-重写图例点击事件
本例子: 使用了formatter方法重写了提示层的展示数据使用了双x轴实现重合使用了stack实现堆积使用了legendselectchanged和dispatchAction重写了图例点击事 ...
label mpchart 饼图_Origin系列：绘制柱状堆积图
原创不易,感谢分享,欢迎转发,请点在看堆积柱状图十分美观,不仅能够展示数据占比,更能表现其变化趋势,是科研必备技能今天分享粉丝提出类似下列图形用Origin绘制多列柱状堆积图.希望对大家有所帮助 ...
exlc如何对比_excel表格图形数据比较-Excel如何做柱状对比图
excel表格怎么做数据对比图 Excel的图表功能已供了柱状对,下面以Excel 2010为例进行实例演示--用柱状图对比显示下面数据列一和系列二 1.选中数据→插入→柱形图→簇状柱形图 2.因为数 ...
SwiftUI之深入解析如何使用组合矩形GeometryReader创建条形（柱状）图
一.图表布局条形(柱状)图以矩形条的形式呈现数据的类别,其宽度和高度与它们表示的值成比例.SwiftUI 对探索不同布局和预览实时视图结果是很友好的,很容易将部分内容提取到子视图中,以便每个部分都很 ...

echarts入门常用图表（柱状堆叠图）

效果图

步骤

echarts入门常用图表（柱状堆叠图）相关推荐

最新文章

热门文章

echarts入门 常用图表（柱状堆叠图）

效果图

步骤

echarts入门 常用图表（柱状堆叠图）相关推荐

最新文章

热门文章

echarts入门常用图表（柱状堆叠图）

echarts入门常用图表（柱状堆叠图）相关推荐