Echarts中所有数据的通用模板
只需要将数据添加至
myChart.setOption(
//放入Echart数据对象
)
<template>
<div :id="id" class="chart" />
</template>
<script>
// 引入基本模板
const echarts = require('echarts')
// 必须要引入的词云包 如果使用词云则需要解开以下注解
// import 'echarts-wordcloud';
export default {
props: {
data: {
type: Object,
default: () => {}
},
id: {
type: String,
default: 'id'
}
},
watch: {
data: {
deep: true, // 深度监听
handler() {
this.initData()
}
}
},
created() {
},
mounted() {
this.initData()
},
methods: {
// 初始化数据
initData() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById(this.id))
// 绘制图表
myChart.setOption(
// 放入Echart数据对象
}
)
}
}
}
</script>
<style scoped>
.chart {
width: 100%;
height: 400px;
}
</style>