1、使用该组件时,需要先安装echrats
npm install echarts --save
或
cnpm install echarts --save
2、该组件可以自适应浏览器的宽度,高度需要根据业务需求自行设置
3、可根据业务需求动态import相关组件,正确import即可
import echarts from 'echarts/lib/echarts'; // 必须要引入
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/legendScroll'
import 'echarts/lib/component/title'
import 'echarts/lib/component/dataZoom'
4、组件完整代码如下:
组件名称:echartsCom.vue
<template>
<div :id="id" class="echarts-element-class">
<div style="display: none">{{optionUpdated}}</div><!-- 该行代码主要是使计算属性产生作用,进而执行optionChanged方法 -->
</div>
</template>
<script>
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/legendScroll'
import 'echarts/lib/component/title'
import 'echarts/lib/component/dataZoom'
export default {
components:{echarts},
props: {
options: { //父组件传递的options
type: Object,
default: {}
},
id: { //echarts元素的id
type: String,
default: 'id'
}
},
data(){
return{}
},
computed:{
optionUpdated(){
this.$nextTick(()=>{
this.optionChanged(this.options)
})
return this.options
}
},
methods:{
resizeHander(){
this.initEcharts(this.id).resize()
},
optionChanged(option){
this.echartsSetOption(this.id, option);
window.addEventListener('resize',this.resizeHander) //监听浏览器的resize事件,进而执行echarts的resize()方法
},
echartsSetOption(echart_ele_id,echart_ele_option){
let temp = echarts.init(document.getElementById(echart_ele_id)) ;
temp.clear() // echarts图表同一画布下,重新画图时 需要先清空画布缓存再执行setOption操作
temp.setOption(echart_ele_option)
},
initEcharts(echart_ele_id){
return echarts.init(document.getElementById(echart_ele_id))
}
},
beforeDestroy(){ // 注意这里不能使用destoryed 否则无法移除window的resize事件
window.removeEventListener("resize",this.resizeHander)
}
}
</script>
<style lang="scss">
.echarts-element-class{
width: 100%;
background-color: #fff;
}
</style>
5、假设你需要在home.vue组件中使用,具体代码如下
<template>
<div id='home'>
<echarts-com :options="salesOption" id="income" />
</div>
</template>
<script>
export default {
components:{
echartsCom: ()=>import('@/components/common/echartsCom.vue'), // 组件懒加载
},
data() {
return {
salesOption:{},
}
},
created() {
this.getIncome()
},
methods: {
async getIncome(){
this.salesOption = {
title: {
// text: '金额'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['商品1', '商品2'],
top: 10
},
grid: {
left: '20',
right: '50',
bottom: '15',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2020-10-01','2020-10-02','2020-10-03','2020-10-04','2020-10-05','2020-10-06','2020-10-07']
},
yAxis: {
type: 'value',
name: '金额'
},
series: [
{
name: '商品1',
type: 'line',
stack: '商品1',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '商品2',
type: 'line',
stack: '商品2',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
}
},
}
}
</script>
<style lang=scss>
#home {
#income{
height: 260px;
}
}
</style>
PS:欢迎加入vue技术交流群(864583465)进行更多问题的探讨,你的问题将是我们大家共同进步的关键