Ajax+Echarts动态添加成组柱状图
2018-01-18 16:38
337 查看
因公司项目原因,最近需要用到ECharts,按照官网的实例以及试验,完成了需求的报表效果图:
![](http://img.blog.csdn.net/20180118155603821?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemVvenVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
首先先去官网下载要开发的组件,ECharts还是非常厉害的。话不多说,先上前端代码<head>
<script src="echarts/echarts.js" type="text/javascript"></script>
<script src="echarts/echarts.min.js" type="text/javascript"></script>
<script src="echarts/jquery-3.2.1.min.js" type="text/javascript"></script>
</head><body>
<input id="Dt" name="Dt" value="2017-12-12" />
<button id="check" type="button">
<div id="main" style="height: 510px;">
</body>前端只要一个div做容器,其他都是相关参数。然后就是JS,在点击按钮时运行以下
首先先去官网下载要开发的组件,ECharts还是非常厉害的。话不多说,先上前端代码<head>
<script src="echarts/echarts.js" type="text/javascript"></script>
<script src="echarts/echarts.min.js" type="text/javascript"></script>
<script src="echarts/jquery-3.2.1.min.js" type="text/javascript"></script>
</head><body>
<input id="Dt" name="Dt" value="2017-12-12" />
<button id="check" type="button">
<div id="main" style="height: 510px;">
</body>前端只要一个div做容器,其他都是相关参数。然后就是JS,在点击按钮时运行以下
// 路径配置 require.config({ paths: { echarts: 'echarts' } }); require( [ 'echarts', 'echarts/chart/bar' // bar/lin/tree ], function(ec) { var myChart1 = ec.init(document.getElementById('main')); var option = { title: { text: '', subtext: '' }, tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' }, formatter: function(params) { var avg = divWidth / 25; var relVal = params[0].name + "<br/>"; for (var i = 1; i < params.length; i++) {这里是鼠标悬浮显示的内容 relVal += params[i].seriesName + ' : ' + (params[i].value / avg).toFixed(1) + "H<br/>"; } return relVal; } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'value', show: false, min: 0, max: divWidth }, { type: 'category', data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "00:00"], show: true } ], yAxis: { type: 'category', splitLine: { show: false }, data: ['OP10', 'OP20', '在线检测', '气密检测'] }, series: [ { name: '辅助',辅助项其实是透明的,看起来第一段柱子从空中开始,其实是因为辅助顶起了第一段 type: 'bar', stack: '总量', itemStyle: { normal: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' }, emphasis: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' } }, data: [0, 0, 0, 0]如果都是0的话,那就从0处开始往右延长 }, { name: '运行', type: 'bar', stack: '总量', itemStyle: { //通常情况下: normal: { color: 'green' }, //鼠标悬停时: emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, label: { normal: { show: true, position: 'inside' } }, data: [] }, { name: '故障', type: 'bar', stack: '总量', itemStyle: { //通常情况下: normal: { color: 'blue'//'rgb(164,205,238)' }, //鼠标悬停时: emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, label: { normal: { show: true, position: 'inside' } }, data: [] }, { name: '待机', type: 'bar', stack: '总量', itemStyle: { //通常情况下: normal: { color: 'yellow'//'rgb(195,229,235)' }, //鼠标悬停时: emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, label: { normal: { show: true, position: 'inside' } }, data: [] }, { name: '关机', type: 'bar', stack: '总量', itemStyle: { //通常情况下: normal: { color: 'red'//'rgb(195,229,135)' }, //鼠标悬停时: emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, label: { normal: { show: true, position: 'inside' } }, data: [] } ] }; $.ajax({Ajax读取后台数据库的数据 type: 'post', url: 'EQStateHisHandler.ashx?action=QCBarChart&SelectDate=' + ddate + '&divWidth=' + divWidth, data: {}, dataType: 'json', async: false, success: function(result) { if (result) { for (var i = 0; i < result.length; i++) {根据数据库的信息动态添加柱状图的柱子 var aa = result[i]; // 嵌套循环赋值 for (var j = 0; j < aa.ChectTimeList.length; j++) { var seriesCount = option.series.length; if (j < seriesCount) { option.series[j].data[i] = aa.ChectTimeList[j];默认是四组数据,所以直接为ECharts赋值就行 } else { var ckType = aa.ChectType[j]; var seriesName = ''; var itemStyle; switch (ckType) {根据状态,选择要增加的柱子是什么颜色的,代表什么意思。 case 1: seriesName = '运行'; itemStyle = { normal: { color: 'green' }, emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }; break; case 2: seriesName = '故障'; itemStyle = { normal: { color: 'blue' }, emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }; break; case 3: seriesName = '待机'; itemStyle = { normal: { color: 'yellow' }, emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }; break; case 4: seriesName = '关机'; itemStyle = { normal: { color: 'red' }, emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }; break; } var newSeries = { data: [aa.ChectTimeList[j]], name: seriesName, type: 'bar', stack: '总量', itemStyle: itemStyle, label: { normal: { show: true, position: 'inside' } } }; option.series.push(newSeries);将新的柱子项添加到报表中 } } } myChart1.setOption(option);绑定并展示 } }, error: function(errorMsg) { alert("request data failed!!!"); } }); } );
相关文章推荐
- echarts+ajax+json动态生成多个不同随机颜色的柱状图
- Echarts 饼图,折线图,柱状图,条形图ajax动态渲染数据方法汇总
- jqurey ajax 的动态添加二级联动下拉菜单
- Ajax动态添加Table
- Echarts2.0和Echarts3.0添加柱状图标签值
- ECharts+Ajax动态制图
- EChats结合PHP,MYSQL,利用ajax动态数据添加。
- jQuery+ajax实现动态添加表格tr td功能示例
- ajaxFileUpload+struts2实现多文件上传(动态添加文件上传框)
- AjaxFileUpload结合Struts2实现多文件上传(动态添加文件上传框)
- 自己绘制的可点击,可滑动,可动态添加的柱状图
- ajax异步获取数据后动态向表格中添加数据(行)
- 【Echarts】Echarts2.0动态加载柱状图~
- ajax发送请求,以及动态添加到页面
- ajaxFileUpload+struts2实现多文件上传(动态添加文件上传框)
- 为Ajax动态添加的元素添加事件
- Jquery+Ajax实现Select动态添加数据
- 使用Echarts和Ajax动态加载数据进行大数据可视化
- 通过ajax动态加载echarts——简单关系网络实例
- Android调Ajax和动态添加JS中的token(Android 和JS完全交互)