前言
因为之前的封装都是直接作为根节点封装的,使用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>
学无止境,谦卑而行.
