<template>
    <div class="tyc">
        <div class="topnav">文化</div>
        <!-- 图形 -->
        <div class="tyclogo">
            <div class="tyname">文化</div>
            <div class="tydesc">图书馆|文化馆|博物馆</div>
        </div>
        <!-- 总计进馆人数 -->
        <div class="jgbox">
            <div class="jg_title">总计进馆人数</div>
            <div class="jgcon">

                <div class="jgitem">
                    <div class="jgimg"><img src="../assets/icon01.png" /></div>
                    <span class="jgival">234,255</span>
                    <span class="jgdesc">今日进馆人数</span>
                </div>
                <div class="jgitem">
                    <div class="jgimg"><img src="../assets/icon02.png" /></div>
                    <span class="jgival">234,255</span>
                    <span class="jgdesc">本月进馆人数</span>
                </div>
                <div class="jgitem">
                    <div class="jgimg"><img src="../assets/icon03.png" /></div>
                    <span class="jgival">234,255</span>
                    <span class="jgdesc">本年进馆人数</span>
                </div>
            </div>
        </div>
        <!-- 进馆人数统计 -->
        <div class="gcins">
            <div class="gcins_title">24小时进馆人数趋势</div>
            <div id="gcins_charts" style="height:16rem"></div>
        </div>

        <!-- 各场馆人数趋势 -->
        <div class="gcgrs">
            <div class="gcgrs_title">各场馆人数趋势</div>
            <div id="gc_charts" class="gcgrs_charts"></div>
        </div>
        <!-- 各场馆人数趋势 -->
        <div class="tsgbox">
            <div class="tsg_title">图书馆数据统计</div>
            <div id="tsgchart" class="tsgc_charts"></div>
        </div>
    </div>
</template>
<style scoped>
.tyc {
    position: relative;
}

.topnav {
    height: 46px;
    line-height: 46px;
    text-align: center;
    padding: 12rpx;
    width: 100%;
    position: fixed;
    z-index: 90;
    color: #fff;
    left: 0;
    top: 0;
    background-color: #080A25;
    margin-bottom: 30rpx;
}

.tyclogo {
    margin-top: 1.6rem;
    background-image: url("../assets/wh_00.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: -1.8rem 0;
    height: 12rem;
}

.tyclogo .tyname {
    height: 3rem;
    line-height: 3rem;
    text-align: right;
    padding-right: 6.8rem;
    font-size: 2.02rem;
    padding-top: 4.8rem;
}

.tyclogo .tydesc {
    height: 2rem;
    line-height: 2rem;
    font-size: 1.03rem;
    text-align: right;
    padding-right: 1.06rem;
    color: #999;
}

/* 总计进馆 */
.jgbox {
    margin-top: 1.02rem;
    width: 100%;
    height: 12rem;
}

.jgbox .jg_title {
    background-image: url('../assets/ty_jg_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
    padding-left: 3.2rem;
    height: 2.06rem;
    line-height: 2.06rem;
}

.jgbox .jgcon {
    width: 100%;
    height: 7rem;
    padding-top: 2rem;
}

.jgbox .jgcon .jgitem {
    width: 30%;
    margin-left: 3%;
    float: left;
}

.jgbox .jgcon .jgitem .jgimg {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.jgbox .jgcon .jgitem span {
    display: block;
    text-align: center;
    height: 1.8rem;
    line-height: 1.8rem;
}

.jgbox .jgcon .jgitem .jgival {
    font-size: 1.06rem;
}

.jgbox .jgcon .jgitem .jgdesc {
    color: #666;
    font-size: 0.8rem;
}

/* 24小时进馆人数趋势 */
.gcins {
    margin-top: 1.6rem;
}

.gcins .gcins_title {
    background-image: url("../assets/tyc_tbg.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 1.8rem;
    line-height: 1.8rem;
    padding-left: 2.02rem;
}

/* 各场馆人数趋势 */
.gcgrs {
    margin-top: 1.06rem;
}

.gcgrs .gcgrs_title {
    background-image: url("../assets/wh_tbg.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 1.8rem;
    line-height: 1.8rem;
    padding-left: 2.02rem;
}

.gcgrs .gcgrs_charts {
    margin-top: 2rem;
    width: 100%;
    height: 17rem;
}

/* 图书馆趋势 */
.tsgbox {
    margin-top: 3rem;
}

.tsgbox .tsg_title {
    background-image: url("../assets/wh_tsg_tbg.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 2.2rem;
    line-height: 2.2rem;
    padding-left: 2.02rem;
}

.tsgbox .tsgc_charts {
    margin-top: 2rem;
    width: 100%;
    height: 16rem;
}
</style>
<script>
import * as echarts from 'echarts';
export default {
    name: 'TycView',
    data() {
        return {
            //
        }
    },
    mounted() {
        // 24h ins k line
        this.cgsf_line()
        //
        this.gc_line()
        //
        this.tsg_line()
    },
    methods: {
        // 山峰图
        cgsf_line() {
            var chartDom = document.getElementById('gcins_charts');
            var myChart = echarts.init(chartDom);
            var option;

            option = {

                grid: {
                    left: '3%',
                    right: '3%',
                    bottom: '3%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: [{
                    data: [
                        '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00',
                    ],
                    axisLine: {
                        lineStyle: {
                            color: '#0095FF',
                            width: 1,
                            type: 'solid',
                        },
                        show: true
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: '#027eff'
                        }
                    },
                    axisLabel: {
                        color: '#0095FF',
                    }
                }],
                series: [{
                    // name: '厂用电量',
                    type: 'bar',
                    barGap: '5%',
                    barWidth: '10%',
                    barCategoryGap: '60%',
                    stack: 1,
                    itemStyle: {
                        normal: {
                            barBorderRadius: [30, 30, 0, 0],
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00feff'
                                },
                                {
                                    offset: 1,
                                    color: '#0286ff'
                                }
                            ]
                            )
                        }
                    },
                    data: [
                        14000,
                        11000,
                        10000,
                        9000,
                        8000,
                        7000,
                        5000,
                        4000,
                        3000,
                    ],
                    zlevel: 11
                },
                {
                    // name: '厂用电量',
                    type: 'scatter',
                    stack: 1,
                    xAxisIndex: 0,
                    symbolOffset: [0, 0], //相对于原本位置的偏移量
                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
                    itemStyle: {
                        normal: {
                            color: '#fff'
                        }
                    },
                    symbolSize: 13,
                    zlevel: 10,
                    z: 2,
                },
                {
                    name: '背景',
                    type: 'bar',
                    barWidth: '10%',
                    barGap: '-100%',
                    data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
                    itemStyle: {
                        normal: {
                            color: '#004298',
                            barBorderRadius: 30,
                        }
                    },
                    z: 1,
                },
                ]
            }

            option && myChart.setOption(option);
        },

        //
        gc_line() {
            var chartDom = document.getElementById("gc_charts");
            var myChart = echarts.init(chartDom);

            var option
            var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',];
            var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
            var name = ['图书馆', '文化馆', '博物馆']
            var data = [
                [137, 34, 135, 161, 74, 152, 110, 100, 150],
                [174, 137, 135, 34, 152, 135, 140, 160, 100],
                [134, 74, 137, 135, 161, 137, 300, 220, 250],
            ]

            var series = [];
            for (var i = 0; i < 6; i++) {
                series.push({
                    name: name[i],
                    type: "line",
                    symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
                    symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                    smooth: true, //是否平滑曲线显示
                    showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: color[i]
                            }, {
                                offset: 0.8,
                                color: 'rgba(255,255,255,0)'
                            }], false),
                            // shadowColor: 'rgba(255,255,255, 0.1)',
                            shadowBlur: 10,
                            opacity: 0.3,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: color[i],
                            lineStyle: {
                                width: 1,
                                type: 'solid' //'dotted'虚线 'solid'实线
                            },
                            borderColor: color[i], //图形的描边颜色。支持的格式同 color
                            borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] 
                            barBorderRadius: 0,
                            label: {
                                show: false,
                            },
                            opacity: 0.5,
                        }
                    },
                    data: data[i],

                })
            }
            option = {
                // backgroundColor: "#141f56",
                legend: {
                    top: 0,
                    itemGap: 15,
                    itemWidth: 15,
                    textStyle: {
                        color: '#fff',
                        fontSize: '14'
                    },
                    data: name
                },
                title: {
                    // text: "负面言论分领域趋势",
                    textStyle: {
                        color: '#fff',
                        fontSize: '22',
                        fontWeight: 'normal',
                    },
                    subtextStyle: {
                        color: '#90979c',
                        fontSize: '16',

                    },
                },
                grid: {
                    borderWidth: 0,
                    top: 240,
                    bottom: 240,
                    textStyle: {
                        color: "#fff"
                    }
                },
                xAxis: [{
                    type: "category",
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
                    axisTick: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    },
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#FFFFFF',
                            fontWeight: 'normal',
                            fontSize: '12',
                        },
                    },
                    data: xData,
                }],
                yAxis: {
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#32346c ',
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#0095FF',
                            fontWeight: 'normal',
                            fontSize: '12',
                        },
                        formatter: '{value}',
                    },
                },
                series: series,
            }

            option && myChart.setOption(option);
        },
        // 图书馆
        tsg_line() {
            var chartDom = document.getElementById("tsgchart");
            var myChart = echarts.init(chartDom);
            var option;

            var data = [{
                name: '今日办证人数',
                value: 323,
            },
            {
                name: '今日还书册数',
                value: 209,
            },
            {
                name: '今日借书册数',
                value: 323,
            },
            ];
            var getArrByKey = (data, k) => {
                let key = k || "value";
                let res = [];
                if (data) {
                    data.forEach(function (t) {
                        res.push(t[key]);
                    });
                }
                return res;
            };
            var getSymbolData = (data) => {
                let arr = [];
                for (var i = 0; i < data.length; i++) {
                    arr.push({
                        value: data[i].value,
                        symbolPosition: 'end'
                    })
                }
                return arr;
            }

            console.log(getSymbolData(data));
            option = {
                grid: {
                    top: '2%',
                    bottom: -15,
                    right: 30,
                    left: 30,
                    containLabel: true
                },
                xAxis: {
                    show: false
                },
                yAxis: [{
                    triggerEvent: true,
                    show: true,
                    // inverse: true,
                    data: getArrByKey(data, 'name'),
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                        interval: 0,
                        color: '#fff',
                        align: 'left',
                        margin: 80,
                        fontSize: 12,
                        formatter: function (value) {
                            return '{title|' + value + '}'
                        },
                    },
                }, {
                    triggerEvent: true,
                    show: true,
                    // inverse: true,
                    data: getArrByKey(data, 'name'),
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        shadowOffsetX: '-20px',
                        color: '#fff',
                        align: 'right',
                        verticalAlign: 'bottom',
                        lineHeight: 42,
                        fontSize: 14,
                        formatter: function (value, index) {
                            return data[index].value + ' 册 '
                        },
                    }
                }],
                series: [{
                    name: 'XXX',
                    type: 'pictorialBar',
                    symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                    symbolSize: [50, 50],
                    symbolOffset: [20, 0],
                    z: 12,
                    itemStyle: {
                        normal: {
                            color: '#14b1eb'
                        }
                    },
                    data: getSymbolData(data)
                }, {
                    name: '条',
                    type: 'bar',
                    showBackground: true,
                    barBorderRadius: 30,
                    yAxisIndex: 0,
                    data: data,
                    barWidth: 10,
                    // align: left,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                1,
                                0,
                                [{
                                    offset: 0,
                                    color: '#A71A2B'
                                },
                                {
                                    offset: 0.7,
                                    color: '#A71A2B'
                                },
                                {
                                    offset: 1,
                                    color: '#5EDEE5'
                                }
                                ],

                                false
                            ),
                            barBorderRadius: 10
                        },
                        // color: '#A71A2B',
                        barBorderRadius: 4,
                    },
                    label: {
                        normal: {
                            color: '#fff',
                            show: true,
                            position: [0, '-20px'],
                            textStyle: {
                                fontSize: 16
                            },
                            formatter: function (a) {
                                return a.name
                            }
                        }
                    }
                }]
            };

            option && myChart.setOption(option);
        },
    },
}
</script>