Vue封装好ECharts组件引用时，图表不显示，报错：data(): "ReferenceError: data is not defined"
代码
封装的EChart.vue
<template>
<div ref="echarts"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: "ECharts",
props: {
isAxisChart: {
type: Boolean,
default: true
},
chartData: {
type: Object,
default() {
return {
xData: [],
series: []
}
}
}
},
watch: {
charData: {
handler: function() {
this.initChart()
},
deep: true
}
},
methods: {
initChart() {
this.initChartData();
if (this.echart) {
this.echart.setOption(this.options);
} else {
this.echart = echarts.init(this.$refs.echarts);
this.echart.setOption(this.options);
}
},
initChartData() {
if (this.isAxisChart) {
this.axisOption.xAxis.data = this.chartData.xData;
this.axisOption.series = this.chartData.series;
} else {
this.normalOption.series = this.chartData.series;
}
}
},
data() {
return {
axisOption: {
legend: {
// 图例文字颜色
textStyle: {
color: "#333"
}
},
grid: {
left: '20%'
},
// 提示框
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category', // 类目轴
data: data.userData.map(item => item.date),
axisLine: {
lineStyle: {
color: '#17b3a3'
}
},
axisLabel: {
interval: 0,
color: '#333'
}
},
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#17b3a3'
}
}
}
],
color: ['#2ec7c9', '#b6a2de'],
series: [
{
name: '新增用户',
data: data.userData.map(item => item.new),
type: 'bar'
},
{
name: '活跃用户',
data: data.userData.map(item => item.active),
type: 'bar'
}
],
echarts: null
},
normalOption: {
tooltip: {
trigger: 'item'
},
color: [
'#0f78f4',
'#dd536b',
'#9462e5',
'#de1e17',
'#e1bb22',
'#39c362',
'#3ed1cf',
'#a34b22'
],
series: [
{
data: data.videoData,
type: 'pie'
}
]
}
}
},
computed: {
options() {
return this.isAxisChart ? this.axisOption : this.normalOption;
}
}
}
</script>
<style scoped>
</style>
Home.vue
<template>
<el-row class="home" :gutter="20">
<el-col :span="8" style="margin-top: 20px">
<el-card shadow="hover">
<div class="user" style="display: flex">
<img :src="userImg"/>
<div class="userinfo" style="flex: 1">
<p class="name">Admin</p>
<p class="access">超级管理员</p>
</div>
</div>
<div class="login-info">
<p>上次登录时间: <span>2022-01-20</span></p>
<p>上次登录地点: <span>广东深圳市</span></p>
</div>
</el-card>
<el-card style="height: 460px; margin-top: 20px">
<el-table :data="tableData">
<el-table-column show-overflow-tooltip
v-for="(val, key) in tableLabel"
:key="key"
:prop="key"
:label="val"
style="display: flex"
>
</el-table-column>
</el-table>
</el-card>
</el-col>
<el-col :span="16" style="margin-top: 20px">
<div class="num">
<el-card v-for="item in countData"
:key="item.name"
:body-style="{display: 'flex', padding: 0}"
>
<i class="icon" :class="`el-icon-${item.icon}`" :style="{background: item.color}"></i>
<div class="detail">
<p class="num">{{ item.value }}</p>
<p class="txt">{{ item.name }}</p>
</div>
</el-card>
</div>
<el-card style="height: 280px;">
<!-- <div style="height: 280px;" ref="echarts"></div>-->
<echart :echartData="echartData.order" style="height: 280px"/>
</el-card>
<div class="graph">
<el-card style="height: 260px;">
<!-- <div style="height: 260px;" ref="userEcharts"></div>-->
<echart :echartData="echartData.user" style="height: 260px"/>
</el-card>
<el-card style="height: 260px;">
<!-- <div style="height: 240px;" ref="videoEcharts"></div>-->
<echart :echartData="echartData.video" :isAxisChart="false" style="height: 240px"/>
</el-card>
</div>
</el-col>
</el-row>
</template>
<script>
import {getData} from "@/api/data";
// import * as echart from 'echarts';
import Echart from '../../../src/components/ECharts';
export default {
name: "Home",
components: {
Echart
},
data() {
return {
userImg: require('../../assets/images/userImg.png'),
tableData: [],
tableLabel: {
name: '商品',
todayBuy: '今日购买',
monthBuy: '本月购买',
totalBuy: '总共购买'
},
countData: [
{
name: '今日支付订单',
value: 1234,
icon: 'success',
color: '#2ec7c9'
},
{
name: '今日收藏订单',
value: 210,
icon: 'star-on',
color: '#dad125'
},
{
name: '今日未支付订单',
value: 1234,
icon: 'circle-close',
color: '#eb330f'
},
{
name: '本月支付订单',
value: 210,
icon: 'finished',
color: '#2ec7c9'
},
{
name: '本月收藏订单',
value: 210,
icon: 'star-on',
color: '#dad125'
},
{
name: '本月未支付订单',
value: 210,
icon: 'document-delete',
color: '#eb330f'
}
],
echartData: {
order: { // 折线图
xData: [],
series: []
},
user: { // 图标
xData: [],
series: []
},
video: { // 饼图
series: []
}
}
}
},
mounted() {
getData().then(res => {
const {code, data} = res.data;
console.log(data);
console.log(code);
if (code === 20000) {
this.tableData = data.tableData;
const order = data.orderData;
const xData = order.date;
const keyArray = Object.keys(order.data[0]);
const series = [];
// 折线图
keyArray.forEach(key => {
series.push({
name: key,
data: order.data.map(item => item[key]),
type: 'line'
})
});
this.echartData.order.xData = xData;
this.echartData.order.series = series;
// 用户图（柱状）
this.echartData.user.xData = data.userData.map(item => item.date);
this.echartData.user.series = [
{
name: '新增用户',
data: data.userData.map(item => item.new),
type: 'bar'
},
{
name: '活跃用户',
data: data.userData.map(item => item.active),
type: 'bar'
}
]
// 饼图
this.echartData.video.series = [
{
data: data.videoData,
type: 'pie'
}
]
}
})
}
}
</script>
<style scoped lang="scss">
@import "src/assets/scss/home";
</style>
home.js
// mock数据模拟
import Mock from 'mockjs';
// 图表数据
let List = [];
export default {
getStatisticalData: () => {
//Mock.Random.float 产生的随机数100-8000之间 保留小数，最小0位 最大0位
for (let i = 0; i< 7; i++) {
List.push(
Mock.mock({
OPPO: Mock.Random.float(100, 8000, 0, 0),
Iphone: Mock.Random.float(100, 8000, 0, 0),
Xiaomi: Mock.Random.float(100, 8000, 0, 0),
Huawei: Mock.Random.float(100, 8000, 0, 0),
OnPlus: Mock.Random.float(100, 8000, 0, 0),
vivo: Mock.Random.float(100, 8000, 0, 0),
努比亚: Mock.Random.float(100, 8000, 0, 0),
摩托罗拉: Mock.Random.float(100, 8000, 0, 0)
})
)
}
return {
code: 20000,
data: {
// 饼图
videoData: [
{
name: 'OPPO',
value: 2999
},
{
name: 'Iphone',
value: 5699
},
{
name: 'Xiaomi',
value: 1999
},
{
name: 'Huawei',
value: 19999
},
{
name: 'OnePlus',
value: 3499
},
{
name: 'vivo',
value: 2499
},
{
name: '努比亚',
value: 4499
},
{
name: '摩托罗拉',
value: 3299
}
],
// 柱状图
userData: [
{
date: '周一',
new: 5,
active: 200
},
{
date: '周二',
new: 10,
active: 500
},
{
date: '周三',
new: 12,
active: 550
},
{
date: '周四',
new: 60,
active: 800
},
{
date: '周五',
new: 65,
active: 550
},
{
date: '周六',
new: 53,
active: 770
},
{
date: '周日',
new: 33,
active: 170
}
],
// 折线图
orderData: {
date: ['2022-01-02', '2022-01-03', '2022-01-04', '2022-01-05', '2022-01-06', '2022-01-07', '2022-01-08'],
data: List
},
tableData: [
{
name: 'OPPO',
todayBuy: 500,
monthBuy: 3500,
totalBuy: 22000
},
{
name: 'Iphone',
todayBuy: 5500,
monthBuy: 35000,
totalBuy: 134000
},
{
name: 'Xiaomi',
todayBuy: 500,
monthBuy: 3500,
totalBuy: 22000
},
{
name: 'Huawei',
todayBuy: 500,
monthBuy: 3500,
totalBuy: 22000
},
{
name: 'OnePlus',
todayBuy: 500,
monthBuy: 3500,
totalBuy: 22000
},
{
name: 'vivo',
todayBuy: 500,
monthBuy: 3500,
totalBuy: 22000
},
{
name: '努比亚',
todayBuy: 500,
monthBuy: 3500,
totalBuy: 22000
},
{
name: '摩托罗拉',
todayBuy: 500,
monthBuy: 3500,
totalBuy: 22000
}
]
}
}
}
}
运行结果及报错内容
[Vue warn]: Error in data(): "ReferenceError: data is not defined"
我的解答思路和尝试过的方法
暂时无思路
我想要达到的结果
图表能正常显示出来
this.options改为this.axisOption
data.userData，data哪来的？
