echarts-多柱子柱状图
来源:互联网 发布:软件功能需求说明书 编辑:程序博客网 时间:2024/03/29 15:26
1、问题背景
利用ECharts制作一个多柱子柱状图,其中数据源模拟动态获取
2、实现源码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>echarts-多柱子柱状图</title><link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png"><script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script><script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script><style>body,html{width:99%;height: 99%;font-family: "arial, helvetica, sans-serif";font-size: x-large;font-kerning: inherit;font-stretch: expanded;}#manyColumn{width: 100%;height: 100%;font-size: 14px;font-family: "微软雅黑";backface-visibility: visible;background-blend-mode: inherit;background-origin: border-box;background: content-box;background-color: #5BC0DE;}</style><script>$(function(){buildData();});//生成数据function buildData(){var columLabel = ['甲','乙','丙','丁','戊','己','庚','辛','壬','癸'];var columName = ['周一','周二','周三','周四','周五','周六','周日'];var columnValue = new Array();var arrData = new Array();for(var i=0;i<columLabel.length;i++) {for(var j=0;j<columName.length;j++) {arrData.push(Math.floor(Math.random()*1000+1000*j-1000*i));}console.info(arrData);columnValue.push(eval('(' + ("{'name':'"+columLabel[i]+"','type':'bar','data':["+arrData+"]}") + ')'));}buildChart(columLabel,columName,columnValue);}//生成图形function buildChart(columLabel,columName,columnValue){var chart = document.getElementById('manyColumn'); var echart = echarts.init(chart); var option = { tooltip : { trigger: 'axis', axisPointer : { type : 'shadow' } }, toolbox: { show : true, feature : { saveAsImage : {show: true} } }, legend: { data:columLabel }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { min:0, type : 'category', data : columName } ], yAxis : [ { min:0, type : 'value' } ], series : columnValue};echart.setOption(option);}</script></head><body><div id="manyColumn"></div></body></html>
3、实现结果
1 0
- echarts-多柱子柱状图
- echarts-多柱子柱状图
- Echarts 柱状图 多条柱子 颜色 宽度 标题
- echarts改变柱状图每个柱子的颜色
- Echarts柱状图的每个柱子显示不同颜色问题
- Echarts柱状图,改变柱子的颜色,后台操作
- Echarts之柱状图获取点击柱子事件&自定义柱子颜色&类目轴纵向排列
- 介绍一篇“让echarts柱状图的每个柱子显示不同的颜色”的好博客
- Echarts学习 堆叠柱状图 柱子样式颜色及透明度宽度间隔修改
- Echarts柱状图
- echarts-柱状图
- echarts 柱状图
- echarts柱状图
- echarts-柱状图
- echarts柱状图
- echats 柱状图柱子颜色设定。
- echarts柱状图自适应宽高 多图表
- Extjs设置柱状图柱子颜色和每条柱子颜色
- java--排序算法之冒泡排序
- 2.Redis学习(二)redis配置
- Maven命令
- 脉络清晰的BP神经网络
- 在云服务器上从0安装CDH5.4.0 步骤
- echarts-多柱子柱状图
- 通过设置图片实现app启动广告页的效果
- iOS UITableView 总结
- eclipse点击一个变量使相同名称变量高亮显示的方法
- JavaScript基础——面向对象的程序设计(二)继承
- maven nexus私服搭建
- OCP 052 002
- 简单选择排序的代码实现与思考
- NFS挂载时出现"mount.nfs: access denied by server while mounting "的解决方法