echarts-多柱子柱状图
来源:互联网 发布:想你所想 知你所需 编辑:程序博客网 时间:2024/04/26 06:21
利用ECharts制作一个多柱子柱状图,其中数据源模拟动态获取
<!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>
0 0
- echarts-多柱子柱状图
- echarts-多柱子柱状图
- Echarts 柱状图 多条柱子 颜色 宽度 标题
- echarts改变柱状图每个柱子的颜色
- Echarts柱状图的每个柱子显示不同颜色问题
- Echarts柱状图,改变柱子的颜色,后台操作
- Echarts之柱状图获取点击柱子事件&自定义柱子颜色&类目轴纵向排列
- 介绍一篇“让echarts柱状图的每个柱子显示不同的颜色”的好博客
- Echarts学习 堆叠柱状图 柱子样式颜色及透明度宽度间隔修改
- Echarts柱状图
- echarts-柱状图
- echarts 柱状图
- echarts柱状图
- echarts-柱状图
- echarts柱状图
- echats 柱状图柱子颜色设定。
- echarts柱状图自适应宽高 多图表
- Extjs设置柱状图柱子颜色和每条柱子颜色
- 从windows拷贝文件到linux服务器上
- 利用OpenCV实现旋转文本图像矫正的原理及OpenCV代码
- 界面原型创建工具Axure使用教程之一:基本操作
- 黑马程序员-(多线程)了解线程与如何解决线程同步到来的安全问题!(面试)
- android.intent.action.USER_PRESENT的接收与使用
- echarts-多柱子柱状图
- 大数据,云计算 核心体系
- 代码块概述
- 在虚拟机Vmware给ubuntu添加新硬盘
- 好东西传送门
- Word文档《Document SAFER 2》
- 自然语言处理中的Attention Model:是什么及为什么
- eclipse生成jar包
- jxl创建Excel文件导致整个系统与运行缓慢