在vue中引入echarts报错,显示Echarts未定义
原代码如下:
<template>
<div class="home">
<commonView title="累计订单量" nums="2,157,450">
<template>
<div id="box">
</div>
</template>
<template #sum>
<div>
sum
</div>
</template>
</commonView>
</div>
</template>
<script>
import commonView from '../commonView/index.vue';
export default{
name: 'index',
components:{
commonView
}
}
import * as echarts from "echarts";
const chartDom = document.getElementById("box")
const charts = Echarts.init(chartDom,"",{renderer:"svg"})
charts.setOption({
xAxis:{
type:'category',
boundaryGap:false,
data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
},
yAxis:{
type:'value'
},
series:[{
type:'line',
data:[520, 832, 601, 1034, 590, 930, 620]
}]
})
</script>
<style>
</style>
不需要再次引入echarts,同时echarts已经挂载,直接使用this.$echarts即可
echarts的配置项等也需要在页面加载时渲染,所以写在mounted()函数中
修改后代码如下:
<template>
<div class="home">
<commonView title="累计订单量" nums="2,157,450">
<template>
<div id="box" style="width:100%;height: 100%;">
</div>
</template>
<template #sum>
<div>
sum
</div>
</template>
</commonView>
</div>
</template>
<script>
import commonView from '../commonView/index.vue';
export default{
name: 'index',
components:{
commonView
},
mounted(){
const chartDom = document.getElementById("box")
const charts = this.$echarts.init(chartDom)
charts.setOption({
xAxis:{
type:'category',
boundaryGap:false,
data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
},
yAxis:{
type:'value'
},
series:[{
type:'line',
data:[520, 832, 601, 1034, 590, 930, 620]
}]
})
}
}
</script>
<style>
</style>