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