echarts 柱状图

$(document).ready(function () {
var myChart = echarts.init(document.getElementById(‘main‘), ‘westeros‘);
function main(chartData) {
var delayAvg = []; //延迟完成数组
var completedAvg = []; //按时完成数组
for (var i = 0; i < chartData.delayDayList.length; i++) {
if (chartData.delayDayList[i] >= 0) {
completedAvg.push(null);
delayAvg.push(chartData.delayDayList[i]);
} else {
completedAvg.push(chartData.delayDayList[i]);
delayAvg.push(null);
}
}
var option = {
color: [‘#3398DB‘],
tooltip: {
show: false,
trigger: ‘axis‘,
axisPointer: {
type: ‘shadow‘
}
},
grid: {
x: 58,
y: 48,
x2: 53,
y2: 95,
containLabel: false
},
xAxis: [
{
type: ‘category‘,
data: chartData.nodeTileList,
axisTick: {
alignWithLabel: true
},
axisLabel: {
textStyle: {
fontSize: 12,
color: ‘#000‘
},
formatter: function (par) {
return par;
},
interval: 0 //类目全显
//rotate: 90 //顺时针旋转45度
}
}
],
yAxis: [
{
type: ‘value‘
}
],
"dataZoom": [
{
"show": false,
"height": 30,
"xAxisIndex": [0],
bottom: 20,
"start": 0,
"end": 250,
handleIcon: ‘path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z‘,
handleSize: ‘110%‘,
handleStyle: {
color: "#d3dee5"
},
textStyle: {
color: "#000"
},
borderColor: "#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}
],
series: [
{
name: ‘延迟完成‘,
type: ‘bar‘,
barWidth: ‘40%‘,
stack: ‘数量‘,
itemStyle: {
normal: {
label: {
show: true,
position: ‘top‘,
formatter: function (par) {
if (par.data >= 0) {
return par.data;
} else {
return "";
}
},
textStyle: {
color: ‘#000‘
}
},
color: ‘rgb(168, 1, 6)‘
}
},
data: delayAvg
}, {
name: ‘已完成‘,
type: ‘bar‘,
stack: ‘数量‘,
barWidth: ‘40%‘,
itemStyle: {
normal: {
label: {
show: true,
position: ‘bottom‘,
formatter: function (par) {
if (par.data < 0) {
return par.data;
} else {
return "";
}
},
textStyle: {
color: ‘#000‘
}
},
color: ‘rgb(25, 107, 0)‘
}
},
data: completedAvg
}
]
};
myChart.on(‘click‘, function (param) {
var index = param.dataIndex;
_nodeId = chartData.flowNodeIdList[index];
var startTime = $("#txtStartTime").val(); //开始时间
var endTime = $("#txtEndTime").val(); //结束时间
window.open("/Statistical/ProjectNode/NodeAvgDelayList?flowNodeId=" + _nodeId + "&status=all&startTime=" + startTime + "&endTime=" + endTime);
});
//使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
};

//请求堆积图数据AJAX
var ajaxGetStacke = function (startTime, endTime) {
$.ajax({
type: "get",
url: "/Statistical/ProjectNode/GetNodeProAvgDayResult?time="+new Date(),
data: { startTime: startTime, endTime: endTime },
dataType: "json",
success: function (data) {
if (data.Success === true) {
var result = data.results;
main(result);
}
},
error: function (error) {
console.log(error);
//parent.$.messager.layer.alert(‘提示‘, ‘模板节点规则信息获取失败!‘, ‘info‘);
return;
}
});
}
//第一次进页面刷新调用
ajaxGetStacke(null, null);
//点击统计调用
$("#subSta").click(function () {
var startTime = $("#txtStartTime").val(); //开始时间
var endTime = $("#txtEndTime").val(); //结束时间
ajaxGetStacke(startTime, endTime);
});
});

<div id="main" style="height: 460px; margin-bottom: 40px; background-color: #fff;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
</script>

时间: 2024-07-29 11:11:57

echarts 柱状图的相关文章

Echarts 柱状图配置详解

柱状图比如做成如下所示图: 所有的基本配置如下: // 指定图表的配置项和数据 var option = { // ---- 标题 ----- title: { text: '主标题', textStyle: { color: 'red' }, subtext: '副标题', subtextStyle: { color: 'blue' }, padding: [0, 0, 10, 100] // 位置 }, // ---- legend ---- legend: { type: 'plain',

echarts 柱状图的选中模式实现-被选中变色和再次选中为取消变色

方法: 1 function barCharShow(curr_dim,divId,result_data){ 2 mutilDim(curr_dim);//维度信息 3 var paint = initEcharts(echarts,divId); 4 var option = buildStandardBar(); 5 option.xAxis[0].data=result_data.xAxis_data; 6 option.series[0].data= result_data.data;

echarts 柱状图+折线+文字倾斜及省略

效果图: 代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>柱状图.折线图</title> 6 <script src="js/jquery-2.2.3.min.js"></script> 7 <script src="

Echarts 柱状图组

通过Echarts可以实现柱状图组,如下图:是一个学生三次模考成绩对比结果 源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script>

echarts柱状图当数据为0时不显示0

在series --> label 中添加属性 fromatter 需求:echarts中的柱状图当数据为0时,显示数字0,影响美观(如图) 添加代码:(注意:series中的多个数组都要添加这个属性,少一个都不行!!!) formatter: function (params) { if (params.value > 0) { return params.value; } else { return ''; } }, 代码所在位置 + 修改后样式如下: 原文地址:https://www.c

Echarts柱状图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>ECharts-基本线性图及其配置要求</title> <script src="js/esl.js" type="text/javascript"></script> </head&

Echarts柱状图的学习总结(一)

今天在学习Echarts练习时,总是在路径的配置上出现错误,作为入门,总结一下,在此分享给大家,希望有用. ECharts主页:  http://echarts.baidu.com/index.html ECharts-2.2.0下载地址:  http://echarts.baidu.com/build/echarts-2.2.0.zip ECharts官方实例:  http://echarts.baidu.com/doc/example.html ECharts官方API文档:  http:/

echarts柱状图颜色设置:echarts柱状图如何设置不同颜色?(代码)

xAxis : [             {                 type : 'category', //                 name:'额度', //这是设置的false,就不不显示下方的x轴,默认是true的                 show: false, //这里呢,就是每个柱的name了,根据实际情况下就好了,我就先写这三个                 data : ['最多','平均','最少'],                 axisL

echarts柱状图实现每个柱子颜色不同

需求如下: series : [ { name:'直接访问', type:'bar', barWidth: '60%', data:[10, 52, 200, 334, 390, 330, 220], //重点在这,设置itemStyle itemStyle:{ normal:{ color:function(params){ var colorList = [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA