zhaobao
/
layui_back


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
							<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet" href="assets/libs/layui/css/layui.css"/>

<head>
    <style>
        .layui-panel {
            height: 400px;
        }
    </style>
</head>
<body>
<div class="layui-row" id="app">
    <div class="layui-col-xs6">
        <div class="grid-demo grid-demo-bg1">
            <div class="layui-panel">
                <button @click="reverseOption">bar</button>
                <v-chart autoresize :option="option"/>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6">
        <div class="grid-demo">
            <div class="layui-panel">
                <v-chart autoresize :option="orgOptions"/>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6">
        <div class="grid-demo grid-demo-bg1">
            <div class="layui-panel">
                <v-chart autoresize :option="option1"/>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6">
        <div class="grid-demo">
            <var-row>
                <var-col :span="8">span: 8</var-col>
                <var-col :span="8">span: 8</var-col>
                <var-col :span="8">span: 8</var-col>
                <var-col :span="8">span: 8</var-col>
                <var-col :span="8">span: 8</var-col>
                <var-col :span="8">span: 8</var-col>
            </var-row>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.11"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-rc.5"></script>
<script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script>
<script src="assets/libs/echarts/plus/echarts-util.js"></script>
<script>
    var data = {
        line: {
            title: {
                text: '折线图堆叠'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'line',
                    stack: '总量',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '直接访问',
                    type: 'line',
                    stack: '总量',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    stack: '总量',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        }, bar: {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        }, pie: {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: 1048, name: '搜索引擎'},
                        {value: 735, name: '直接访问'},
                        {value: 580, name: '邮件营销'},
                        {value: 484, name: '联盟广告'},
                        {value: 300, name: '视频广告'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
    }
    const optionApp = {
        data() {
            return {
                option: data.bar,
                orgOptions: data.line,
                option1: data.pie
            }
        }, methods: {
            reverseOption() {
                this.option = data.bar
                this.orgOptions = data.line
                this.option1 = data.pie
            }
        }
    }
    Vue.createApp(optionApp).use(Varlet).component("v-chart", VueECharts).mount("#app");
</script>
</body>
</html>