前言

因为之前的封装都是直接作为根节点封装的,使用this.$el,非根组件的时候使用this.$refs.xx指定即可

内容

简写

<div ref="container" :id="id" style="height: 165px; width: 100%"></div>

this.chart = echarts.init(this.$refs.container)

完整示例

<template>
    <div>
        <div
            ref="container"
            :id="id"
            style="height: 165px; width: 100%"></div>
        <div>
            <el-row class="device-info">
                <el-col :span="8">
                    <div class="grid-content">
                        <div class="device-num online">6</div>
                        <div class="info-name">设备总数</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <div class="device-num online">3</div>
                        <div class="info-name">在线数</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <div class="device-num off">3</div>
                        <div class="info-name">离线数</div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'dailyEcharts',
    props: {
        id: {
            type: String,
            default: 'chart',
        },
    },
    data() {
        return {
            chart: null,
            options: {},
            pageflag: false,
            data: [
                { value: 3, name: '在线' },
                { value: 3, name: '离线' },
            ],
        }
    },
    watch: {
        options: {
            handler(options) {
                this.chart.setOption(options, true)
            },
            deep: true,
        },
    },
    created() {
        this.getData()
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        getData() {
           .....
        },
        initData() {
            this.options = {
                legend: {
                    top: 'bottom',
                    top: 120,
                    textStyle: { color: '#fff' },
                },
                label: {
                    formatter: '{c}个',
                    color: '#fff',
                },
                color: ['#08E690', '#8FD1D2'],
                series: [
                    {
                        type: 'pie',
                        radius: [10, 45],
                        center: ['50%', '30%'],
                        roseType: 'area',
                        data: this.data,
                    },
                ],
            }
        },
        initChart() {
            this.chart = echarts.init(this.$refs.container)
            this.chart.resize()
            this.chart.clear()
            this.chart.setOption(this.options, true)
        },
    },
}
</script>
<style lang="scss" scoped>
...
</style>