echart 分组属性
<!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:%;
height: %;
font-family: "arial, helvetica, sans-serif";
font-size: x-large;
font-kerning: inherit;
font-stretch: expanded;
}
#manyColumn{
width: %;
height: %;
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=;i<columLabel.length;i++)
{
for(var j=;j<columName.length;j++)
{
arrData.push(Math.floor(Math.random()*+*j-*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:,
type : 'category',
data : columName
}
],
yAxis : [
{
min:,
type : 'value'
}
],
series : columnValue
}; echart.setOption(option);
}
</script>
</head>
<body>
<div id="manyColumn"></div>
</body>
</html>
echart 分组属性的更多相关文章
- echart全局属性，自用，搜索比较快
// 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd ...
- Qt Quick分组属性案例
import QtQuick 2.4 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 import QtQuick.Win ...
- echart option属性
option 图表选项,包含图表实例任何可配置选项: 公共选项 , 组件选项 , 数据选项 名称 描述 {color}backgroundColor 全图默认背景,(详见backgroundColor ...
- echart title属性
title http://echarts.baidu.com/echarts2/doc/doc.html#Title 标题,每个图表最多仅有一个标题控件,每个标题控件可设主副标题. 名称 默认值 描述 ...
- echart分组柱形图绑定数据
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts </ ...
- echart itemStyle属性设置
itemStyle // itemStyle 设置饼状图扇形区域样式 itemStyle: { // emphasis:英文意思是 强调;着重; ...
- QML Object Attributes QML对象属性
QML Object Attributes Every QML object type has a defined set of attributes. Each instance of an obj ...
- JavaScript正则表达式之分组匹配 / 反向引用
语法 元字符:(pattern) 作用:用于反复匹配的分组 属性$1~$9 如果它(们)存在,用于得到对应分组中匹配到的子串 \1或$1 用于匹配第一个分组中的内容 \2或$2 用于匹配第一个分组中的 ...
- jquery-mobile 学习笔记之中的一个（基础属性）
写在前面 本文是依据w3c 学习轨迹,自己研习过程中记录下的笔记,仅仅供自己学习轨迹记录之用,不喜勿喷. 0 引入库 引入相应的文件: <link rel="stylesheet&qu ...
随机推荐
- 通过Jmeter 代理功能获取postman请求
对于初学者在Jmeter 配置 请求其实属于比较麻烦的事情,但是如果在Postman配置就容易多了,所以考虑是否可以把postman的配置直接导入Jmeter,避免初学者上手不易的问题,后来考虑使用J ...
- FileUpload上传
单文件上传: ASPX: <div> <!-- 文件上传 --> <asp:FileUpload ID="FileUpload1" runat=&qu ...
- HttpWebResponse Post 前端控件数据，后台如何接收？
MVC视图页: @{ Layout = null; } <!DOCTYPE html> <html> <head> <title>test</ti ...
- MQTT研究之EMQ：【JAVA代码构建X509证书【续集】】
openssl创建私钥,获取公钥,创建证书都是比较简单的,就几个指令,很快就可以搞定,之所以说简单,是因为证书里面的基本参数配置不需要我们组装,只需要将命令行里面需要的几个参数配置进去即可.但是呢,用 ...
- 2019.1.17 homework
1.求两个整型数较大值 #include<stdio.h>int compare_big(int var1,int var2);int main(void){ int big,x,y ...
- FIRMWARE BUG – THE BIOS HAS CORRUPTED HW-PMU RESOURCES
If you’re trying to install CentOS 7 on HP server and you receive the error from the caption, don’t ...
- Win10系统下Anaconda下安装多种Python函数库
建议直接安装Anaconda,这是一个包含Numpy,Pandas,Sklearn等函数库的计算机科学软件包,下面的软件可以在此环境下进行安装下载. 一.计算机视觉 1. OpenCV图像处理 在ht ...
- python 云打码 http接口
import http.client, mimetypes, urllib, json, time, requests ######################################## ...
- photo型的object转byte[]
IEnumerable en = (IEnumerable) myObject; byte[] myBytes = en.OfType<byte>().ToArray(); TypeCon ...
- Tesseract训练
最近在用Tesseract做一个图片识别的小应用,目标图像只有数字和英文字母,在实际使用过程中发现个别数识别错误,因此不得不研究学习Tesseract的训练. http://www.cnblogs.c ...