html引入vue组件，vue组件中使用echarts

川长思鸟来 2023-07-13 03:45 27阅读 0赞

将图设置代码写在vue的methods中，然后在mounted中调用

*  得到echarts图

<div id="pushed" style="width: 630px;height:300px;float: left;margin-right:30px"></div>
    
    var myChart = echarts.init(document.getElementById('pushed'));

*  完整代码

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/multiple-select.min.css">
    <script type="text/javascript" src="/js/jquery/multiple-select.min.js"></script>
    <script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="/css/master.css">
    <link rel="stylesheet" type="text/css" href="/css/animate.delay.css">
    <link rel="stylesheet" type="text/css" href="/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/css/description.scss">
    <link rel="stylesheet" type="text/css" href="/css/element-ui.scss">
    <link rel="stylesheet" type="text/css" href="/css/index.scss">
    <link rel="stylesheet" type="text/css" href="/css/mixin.scss">
    <link rel="stylesheet" type="text/css" href="/css/sidebar.scss">
    <link rel="stylesheet" type="text/css" href="/css/transition.scss">
    <link rel="stylesheet" type="text/css" href="/css/variables.scss">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
    
    <div id="app">
        <div class="dashboard-editor-container">
            <el-row class="box">
                <div class="box-body box-form">
                    <el-form :inline="true" :model="formInline" size="mini">
                        <div class="conditions pull-left" style="width: calc(100% - 150px);">
                            <el-form-item label="统计时段">
                                <el-date-picker v-model="formInline.time" type="daterange" align="right" value-format="yyyy-MM-dd" :editable="false" @change="dateChange" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="知识使用情况">
                                <el-select size="mini" v-model="formInline.useSituation" placeholder="知识使用情况">
                                    <template v-for="item in useSituations">
                                        <el-option :label="item.name" :value="item.code"></el-option>
                                    </template>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="知识体系">
                                <el-select size="mini" v-model="formInline.system" placeholder="知识体系">
                                    <template v-for="item in systems">
                                        <el-option :label="item.name" :value="item.code"></el-option>
                                    </template>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="action pull-right">
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i>　开始分析</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
            </el-row>
    
    
    
            <el-row class="box">
                <div class="box-header">
                    <h3 class="box-title">　知识使用占比</h3>
                </div>
                <div class="box-body">
                    <div>
                        <div id="pushed" style="width: 630px;height:300px;float: left;margin-right:30px"></div>
                        <div id="adopted" style="width: 630px;height:300px;float: left;"></div>
                    </div>
                </div>
            </el-row>
        </div>
    </div>
    
    <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    
    <script>
        var app = new Vue({
            el: "#app",
            components: {
            
            },
            data: {
                minDate: null,
                maxDate: null,
                pickerOptions: {
                    onPick: (date) => {
                        this.maxDate = date.maxDate;
                        this.minDate = date.minDate;
                    },
                    disabledDate: (time) => {
                        if (null != this.minDate) {
                            let min = new Date(this.minDate.getTime());
                            let max = new Date(this.minDate.getTime());
                            min.setFullYear(this.minDate.getFullYear() - 1);
                            max.setFullYear(this.minDate.getFullYear() + 1);
                            return time.getTime() > max || time.getTime() < min;
                        }
                        return false;
                    },
                    shortcuts: [{
                        text: '昨日',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24)
                            end.setTime(end.getTime() - 3600 * 1000 * 24)
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '本周',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            let week = start.getDay() || 7;
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * (week - 1))
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '上周',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            let week = start.getDay() || 7;
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * (week - 1))
                            end.setTime(start.getTime() - 3600 * 1000 * 24);
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '上月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setMonth(start.getMonth() - 1)
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDate() - 1))
                            let d = new Date(start.getFullYear(), (start.getMonth() + 1), 0);
                            let day = d.getDate();
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * (day - 1))
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '本月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setDate(1);
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '今年',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            //start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 12)
                            start.setMonth(0);
                            start.setDate(1);
                            picker.$emit('pick', [start, end])
                        }
                    }]
                },
                formInline: {
                    time: [],
                    useSituation: '',
                    system: ''
                },
                useSituations: [
                    {name:"已推送",code:"pushed"},
                    {name:"已采纳",code:"adopted"},
                    {name:"未采纳",code:"unAdopted"}
                ],
                systems: [
                    {name:"知识体系1",code:"first"},
                    {name:"知识体系2",code:"second"},
                    {name:"知识体系3",code:"third"}
                ],
                reloadComponent: false
            },
            // 从数据库拿数据动态显示
            mounted() {
            	//调用获取echarts的option的方法
                this.getPushedPie();
                this.getAdoptedPie();
            },
            methods: {
                getPushedPie() {
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('pushed'));
    
                    var option = {// 指定图表的配置项和数据
                        title: {
                            text: '已推送占比',
                            left: 'center'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: ['已推送','未推送']
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        series: [
                            {
                                name: '知识使用占比',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: [
                                    {value: 15, name: '已推送'},
                                    {value: 11, name: '未推送'}
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                },
                getAdoptedPie() {
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('adopted'));
                    var option = {// 指定图表的配置项和数据
                        title: {
                            text: '已采纳占比',
                            left: 'center'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: ['已采纳','未采纳']
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        series: [
                            {
                                name: '知识使用占比',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: [
                                    {value: 15, name: '已采纳'},
                                    {value: 11, name: '未采纳'}
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
    
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
              }
    	}
    });
    
    <style rel="stylesheet/scss" lang="scss" scoped> .dashboard-editor-container { background-color: rgb(240, 242, 245); .chart-wrapper { background: #fff; padding: 16px 16px 0; margin-bottom: 32px; } } </style>
    </body>
    </html>