echart图 月周日切换

本方法我先写了月和日的数据  先一起从后台查到list对象,然后在js里解析  画echarts

$(function() {
var dateArr = new Array();
var countArr = new Array();
var count = 0;
var createDate = "";
//月份统计
var monthArr = new Array();
var countArr2 = new Array();
var count2 = 0;
var month = "";
$.ajax({
url : 'tocountlist.do',
type : 'POST',
dataType : 'json',
success : function(result) {
if (result.code == 0) {


var dd = eval(result);
var list = result.countList;
for ( var i in list) {
count = list[i].count;
createDate = dateFormat(
new Date(list[i].date.time), "yyyy-MM-dd");
dateArr.push(createDate);
countArr.push(count);
}
var monthList = result.monthList;
for ( var i in monthList) {
count2 = monthList[i].count;
month = dateFormat(
new Date(monthList[i].date.time), "MM");
monthArr.push(month);
countArr2.push(count2);
}
var myChart = echarts.init(document
.getElementById('barPicture'));
var option = {
title : {
text : '日统计',
left : "center",
},
tooltip : {
trigger : 'axis'
},
legend : {
data : [ '用户人流量' ],
top : 40
},
toolbox : {
show : true,
feature : {
myTool1 : {
show : true,
title : '自定义扩展方法1',
icon : 'image://http://echarts.baidu.com/images/favicon.png',
onclick : function() {
alert('myToolHandler1')
}
},
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},


calculable : true,
xAxis : [ {
type : 'category',
boundaryGap : true,
name : "时间(年-月-日)",
data : dateArr
} ],
yAxis : [ {
type : 'value',
scale : true,
name : '人流量',
//boundaryGap: [0.2, 0.2]
} ],
series : [ {
name : '用户注册量',
type : 'line',
data : countArr,
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
} ]
};
myChart.setOption(option, true);

} else {
alert("获取数据失败!");
return;
}
},
error : function() {
alert("提交失败!");
}
});
});

先穿上js代码 

### 回答1: 要创建 ECharts 柱状堆叠,你需要使用 `series` 属性中的 `type: 'bar'`,并设置堆叠属性 `stack`。以下是一个简单的 ECharts 柱状堆叠示例: ```javascript option = { title: { text: 'ECharts 柱状堆叠示例' }, tooltip: {}, legend: { data: ['产品A', '产品B', '产品C'] }, xAxis: { data: ['一', '二', '三', '四', '五', '六', '周日'] }, yAxis: {}, series: [ { name: '产品A', type: 'bar', stack: '总量', data: [120, 132, 101, 134, 90, 230, 210] }, { name: '产品B', type: 'bar', stack: '总量', data: [220, 182, 191, 234, 290, 330, 310] }, { name: '产品C', type: 'bar', stack: '总量', data: [150, 232, 201, 154, 190, 330, 410] } ] }; ``` 在这个示例中,我们创建了一个包含三个数据系列的柱状堆叠。每个系列都设置了 `type: 'bar'` 和 `stack: '总量'`,这意味着它们将堆叠在一起。我们还添加了一个例,以便用户可以清楚地看到每个系列代表什么。 ### 回答2: ECharts是一个基于JavaScript的可视化库,用于创建各种类型的表,包括柱状。柱状堆叠是指将多个数据系列的柱状在同一个坐标轴上堆叠起来展示,以便比较各个系列的总量和各个数据之间的比例关系。 在ECharts中,可以通过设置series中的type为"bar"和stack属性来实现柱状的堆叠效果。具体步骤如下: 1. 在HTML页面中,引入ECharts的脚本文件: ```html <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script> ``` 2. 创建一个具有一定宽度和高度的div元素,作为表的容器: ```html <div id="chart" style="width: 400px; height: 300px;"></div> ``` 3. 在JavaScript代码中,使用ECharts的API进行表的配置和数据的传入: ```javascript // 初始化表对象 var chart = echarts.init(document.getElementById('chart')); // 配置表 var option = { xAxis: { type: 'category', // x轴类型为类目类型 data: ['类目1', '类目2', '类目3'] // x轴的数据 }, yAxis: { type: 'value' // y轴类型为数值类型 }, series: [ { name: '系列1', type: 'bar', // 表类型为柱状 stack: '总量', // 设置堆叠属性为“总量” data: [100, 200, 300] // 系列1的数据 }, { name: '系列2', type: 'bar', stack: '总量', data: [150, 250, 350] // 系列2的数据 } ] }; // 渲染表 chart.setOption(option); ``` 以上代码创建了一个堆叠的柱状,其中x轴为类目型,y轴为数值型。两个系列的柱状堆叠在一起,并分别展示了各个类目的数值。 值得注意的是,ECharts还提供了丰富的配置选项和API,可以根据不同需求进行自定义配置,如添加例、调整颜色、设置柱状的宽度等。 通过ECharts的柱状堆叠功能,我们可以清晰地展示多个数据系列之间的关系,帮助我们更好地理解数据的变化和趋势。 ### 回答3: echart柱状堆叠是一种表类型,用于展示不同类别数据之间的比较关系。堆叠柱状将多个数据系列按照柱子堆叠在一起,形成一列高度不断叠加的柱子。 每个数据系列代表一个类别,可以通过不同颜色来区分。柱子的高度表示该类别在不同数据维度上的数值大小,堆叠在一起便能直观地比较不同类别之间的差异。 例如,我们可以使用柱状堆叠来比较不同产品在不同份的销售额。X轴表示份,Y轴表示销售额,在每个份上,由于有多个产品的销售额信息,所以柱子会叠加在一起,形成堆叠效果。通过观察柱子高度的变化,我们可以直观地判断不同产品之间的销售情况。 柱状堆叠可以帮助我们分析多个类别数据在不同维度上的变化趋势,同时也能够减少表的复杂度,使得数据更易于理解和比较。使用echart数据可视化工具,我们可以通过简单的配置和数据绑定,快速生成堆叠柱状,并通过交互操作实现数据的动态更新和切换
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值