将图设置代码写在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>
<!--新引入的css-->
<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>
<!--vue注册-->
<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>&#12288;开始分析</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </el-row>



        <el-row class="box">
            <div class="box-header">
                <h3 class="box-title">&#12288;知识使用占比</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>
Logo

前往低代码交流专区

更多推荐