echart图表初始化重置等管理盒子效果代码
代码语言:html
所属分类:图表
代码描述:echart图表初始化重置等管理盒子效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #000;
}
div.eb {
width: 300px;
height: 30vh;
border: 1px solid #ccff00;
float: left;
margin-left: 1%;
}
</style>
</head>
<body>
<div class="eb" id="div1"></div>
<div class="eb" id="div2"></div>
<div class="eb" id="div3"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
<script >
var $eo = {
getLengend1: function (data) {
return {
show: true,
top: '5%',
itemWidth: 10,
itemHeight: 10,
right: '1%',
orient: 'horizontal',
textStyle: {
color: '#d5d5d5',
fontSize: 14
},
data: data
};
},
getXAxis1: function (data) {
return {
type: 'category',
data: data,
axisLine: {
lineStyle: {
color: "#244163"
}
},
axisLabel: {
// rotate: 30,
// interval: 0,
color: "#dbe1de"
},
axisTick: {
show: false,
}
}
},
getYAxis1: function (name, obj) {
var o = {
type: 'value',
name: name,
nameTextStyle: {
color: "#8c908e"
},
nameGap: 10,
axisLabel: {
color: "#b7bcb9"
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: "#343434",
type: "dashed"
}
}
};
if (obj) {
for (var k in obj) {
o[k] = obj[k];
}
}
return o;
}
};
$eo.rowBars = function (param) {
var label = {
show: true,
position: "right",
color: "#fff",
fontSize: 14,
formatter: function (o) {
return o.value + param.unit;
}
};
var series = [];
var color = [];
param.legendData.forEach(function (value, i) {
series.push({
name: value,
type: 'bar',
label: label,
barMaxWidth: "40%",
data: param.seriesData[i]
});
color.push({
type: 'linear',
x: 0,
y: 0.5,
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0