1、安装echarts
npm install echarts --save
npm install lodash --save // 若已安装请忽略
2、在mian.js中全局引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
3、Echart.vue文件:图本身组件
<template>
<div class="common-charts">
<div
v-show="!isEmpty"
class="chart-content"
/>
<empty v-show="isEmpty" />
</div>
</template>
<script>
import * as Echarts from 'echarts'
export default {
name: 'CommonCharts',
props: {
chartOption: {
required: true,
type: Object
}
},
data: () => ({
isEmpty: false
}),
watch: {
chartOption: {
immediate: true,
handler () {
this.setOption()
}
}
},
mounted () {
this.initCharts()
},
destroyed () {
this.destroyResizeEvent()
},
methods: {
setOption () {
const isEmpty = !(this.chartOption && Array.isArray(this.chartOption.series) && this.chartOption.series.filter(n => !Array.isArray(n.data) || n.data.length < 1).length < 1)
this.isEmpty = isEmpty
if (th