zhaobao
/
layui_back


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>echarts二次封装</title>
    <script src="../echarts.min.js"></script>
    <script src="../theme/vintage.js"></script>
    <script src="../theme/macarons.js"></script>
    <script src="../theme/shine.js"></script>
    <script src="../theme/dark.js"></script>
    <script src="mysetTheme.js"></script>
    <script src="echarts-util.js"></script>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            background: url("./image/bi_board_background.jpg") center center no-repeat;
            background-size: 100% 100%;
            /*background-color: rgb(31, 37, 49);*/
        }

        .container {
            display: grid;
            grid-gap: 10px;
            grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
            grid-auto-rows: 450px;
        }

        .container > div {
            border: 1px solid #0a6ebd;
            position: relative;
        }
    </style>
</head>

<body>
<div class="container">
    <div id="main">饼状图</div>
    <div id="pieC">环形饼图</div>
    <div id="mainLine">折线图</div>
    <div id="mainBar">柱状图</div>
    <div id="barGroup">柱状分组</div>
    <div id="mixCharts">混搭</div>
    <div id="acrossBar">横向柱状图</div>
    <div id="Radar">雷达图</div>
    <div id="Funnel">漏斗图</div>

</div>
<script>
    /**
     * 饼图
     **/
    var data = [{name: '男生', value: 10},
        {name: '女生', value: 20}];
    var option = MyEcharts.EchartsOption.pie("男女人数统计", "单位（人）", data);
    var initChart = MyEcharts.initChart(option, "main", "macarons");
    //要替换默认样式就取消下面注释
    // var options = {
    //     color: ["#FDB157", "#3498DB"],
    //     legend: {
    //         orient: 'vertical', //垂直：vertical； 水平 horizontal
    //         right: 'right',
    //     },
    //     series: [{
    //         radius: '55%', //圆的大小
    //         center: ['50%', '60%'],//位置居中
    //     }]
    // };
    // initChart.setOption(options);

    /**
     * 环形饼图 滑翔
     **/
    var pieCData = [
        {value: 335, name: '直接访问'},
        {value: 310, name: '邮件营销'},
        {value: 234, name: '联盟广告'},
        {value: 135, name: '视频广告'},
        {value: 1548, name: '搜索引擎'}
    ]
    var option = MyEcharts.EchartsOption.pie("环形饼图", "种类数（份）", pieCData, ['40%', '60%']);
    var initChart = MyEcharts.initChart(option, "pieC", "shine");

    /**
     * 折线图
     **/
    var nameLine = [];
    for (var i = 1; i <= 11; i++) {
        nameLine.push('11月' + i + '日');
    }
    var valLine = [0, -120, 1245, 0, -190, 1376, 1511, 1689, 1256, 1495, 1192];
    var dataLine = []
    for (var i = 0; i < nameLine.length; i++) {
        dataLine.push({name: nameLine[i], value: valLine[i], group: '出生人数1'})
        // dataLine.push({ name: nameLine[i], value: valLine.reverse()[i], group: '出生人数2' })
    }
    console.log(dataLine)
    var option = MyEcharts.EchartsOption.Line("折线图", "单位（人）", dataLine);
    //区域填充样式(渐变)
    /*option.series[0].areaStyle = {
        color: {
            type: 'linear', // 线性渐变：linear，径向渐变：radial
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0.2, color: '#838CFF' // 0% 处的颜色
            }, {
                offset: 0.6, color: 'transparent' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        }
        // 纹理填充
        // color: {
        //     image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
        //     repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
        // }
    }*/

    var initChartLine = MyEcharts.initChart(option, "mainLine");

    /**
     * 柱状图
     **/
    var option = MyEcharts.EchartsOption.bar("柱状图", "单位（人）", dataLine);
    //柱子线性渐变
    option.series[0].itemStyle = {
        color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, //x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比。x0 x2从左到右横向的渐变方向，y0 y2从上到下纵向的渐变方向
            [
                {offset: 0, color: '#F97332'},
                {offset: 0.5, color: '#F97332'},
                {offset: 1, color: 'transparent'}
            ]
        )
    }
    var initChart = MyEcharts.initChart(option, "mainBar");

    /**
     * 柱状分組
     **/
    var nameBar = [];
    for (var j = 1; j <= 6; j++) {
        nameBar.push('11月' + j + '日');
    }
    var value = [55, 900, 1245, 1530, 1376, 1376];

    var dataBar = []
    for (var i = 0; i < nameBar.length; i++) {
        dataBar.push({name: nameBar[i], value: value[i], group: '人生1'})
    }
    var dataBar2 = [];
    for (var i = 0; i < nameBar.length; i++) {
        dataBar2.push({name: nameBar[i], value: value.reverse()[i], group: '人生2'})
    }
    var option = MyEcharts.EchartsOption.bar("柱状分组", "种类数（份）", [...dataBar, ...dataBar2]);
    // console.log([...dataBar, ...dataBar2]);
    var initChart = MyEcharts.initChart(option, "barGroup");

    /**
     * 横向柱状图
     **/
    var dataacrossBar = [];
    var valBar = [55, 900, 1245, 1530, 0, 1376, 1511, 1689, 1856, 1495, 1292];
    for (var i = 0; i < nameBar.length; i++) {
        dataacrossBar.push({name: nameBar[i], value: valBar[i], group: '很想'})
    }
    var option = MyEcharts.EchartsOption.acrossBar("横向柱状图", "种类数（份）", dataacrossBar);
    /**
     * 未分组的情况下(group)使每个柱子独立的颜色
     **/
    option.series[0].itemStyle = {
        normal: {
            color: function (params) {
                let color = myTheme.color;
                return color[params.dataIndex]
            },
        }
    }
    var initChart = MyEcharts.initChart(option, "acrossBar");


    /**
     * 双y轴,和柱状折线混搭
     **/
    var nameBar = [];
    for (var j = 1; j <= 6; j++) {
        nameBar.push('11月' + j + '日');
    }
    var value = [55, 90, 124, 153, 137, 105];

    var dataBar = []
    for (var i = 0; i < nameBar.length; i++) {
        dataBar.push({name: nameBar[i], value: value[i], group: '人生1'})
    }

    var value2 = [12.0, 23.2, 25.6, 62.2, 32.6, 43.3];
    var dataBar2 = [];
    for (var i = 0; i < nameBar.length; i++) {
        dataBar2.push({name: nameBar[i], value: value2.reverse()[i], group: '人生2', yAxisIndex: 1})
    }
    var dataBar3 = [];
    for (var i = 0; i < nameBar.length; i++) {
        dataBar2.push({name: nameBar[i], value: value2[i], group: '人生3', yAxisIndex: 1})
    }
    // console.log( [...dataBar, ...dataBar2, ...dataBar3]);
    // var option = MyEcharts.EchartsOption.doubleYMixUp("混搭/双y轴", "种类数（份）", [...dataBar, ...dataBar2, ...dataBar3], 'bar');
    var option = MyEcharts.EchartsOption.doubleYMixUp("混搭/双y轴", "种类数（份）", [...dataBar, ...dataBar2, ...dataBar3], ['line', 'bar', 'line']);
    //重置右侧y轴样式
    /*问题1：重置yAxis的样式后，点击图例无法控制y轴显隐*/
    option.yAxis[1] = {
        type: 'value',
        name: '温度',
        interval: 5,
        splitLine: {
            show: false,
        },
        axisLabel: {
            formatter: '{value} °C'
        }
    }
    option.yAxis[0].name = '%';
    option.series[0].label = {
        show: true,
        position: 'top',
        color: '#FFFFFF',
        formatter: '{c}%'
    };
    var initChart = MyEcharts.initChart(option, "mixCharts");

    var options = {
        yAxis: [{
            name: '%',
        }, {
            type: 'value',
            name: '温度',
            interval: 5,
            splitLine: {
                show: false, // 去除网格线
            },
            axisLabel: {
                formatter: '{value}'
            }
        }],
        series: [
            {
                label: {
                    show: true,
                    position: 'top',
                    color: '#FFFFFF',
                    formatter: '{c}%'
                }
            }
        ]

    }
    initChart.setOption(options);
    //添加自定义loading
    // initChart.showLoading("nodatas",{text:'暂无数据！',showSpinner: true});
    // initChart.hideLoading("nodatas");

    /**
     * 雷达图Radar
     **/

    var option = MyEcharts.EchartsOption.Radar("雷达图", "", [...dataBar, ...dataBar2, ...dataBar3]);
    var initChart = MyEcharts.initChart(option, "Radar");

    /**
     * 漏斗图Funnel
     **/
    var option = MyEcharts.EchartsOption.Funnel("漏斗图Funnel", "", [...dataBar, ...dataBar2, ...dataBar3]);
    var initChart = MyEcharts.initChart(option, "Funnel");
</script>
</body>

</html>