VUE2+Element-ui+Echarts图表
封装Echarts图表,如下效果图

Home组件代码块,使用的mock.js模拟数据封装
<template>
<div style="height: 400px">
<ChartsPart id="demo" :chartData="echartData.order"></ChartsPart>
</div>
</template>
<script>
//引入组件 略去
import ChartsPart from '@/components/EchartEasy.vue'
export default {
components: {
ChartsPart,
},
data() {
return {
echartData: {
// 订单折线图数据
order: {
// X轴数据
xData: [],
yData: {
type: 'value',
},
// series是x轴图表内,一个个的数据坐标轴
series: [],
},
// 用户柱状图数据
user: {
xData: [],
// series是x轴图表内,一个个的数据坐标轴
series: [],
},
// 视频饼状图数据
video: {
// series是x轴图表内,一个个的数据坐标轴
series: [],
},
},
}
},
methods: {
getTableData() {
this.$http.get('/home/getOnData').then((res) => {
// EChart图表数据
res = res.data
// console.log(res.data)
// 订单折线图
const order = res.data.orderData
// console.log(order)
// x轴数据
this.echartData.order.xData = order.date
// series图像渲染,x轴中的内置图表
// 第一步取出series中name部分-键名
// 通过 对象中的键值取出,需要数据的键名
let keyArray = Object.keys(order.data[0])
console.log(keyArray)
// 循环遍历每一项数据
keyArray.forEach((key) => {
// 在data数据中定义的echartData.order.series中存放数据
this.echartData.order.series.push({
name: key === 'wechat' ? '小程序' : key,
// key是一个变量,所以要[在这里装着],变量提升
data: order.data.map((item) => item[key]),
type: 'line', // 线性图
})
})
})
},
},
// 页面还没渲染完成,在这里调用接口比较好
created() {
// console.log(this.echartData.order)
// console.log(this.ChartTestData)
this.getTableData()
},
}
</script>
Echarts图表组件
<template>
<div style="height: 400px" ref="myEchart">echart</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'EchartEasy',
// 数据部分是由,父组件传入的
props: {
chartData: {
// 数据肯定是一个对象
type: Object,
// 设置对象的默认值
// 使用default函数,再return返回
// 父组件修改内容,本身组件不受影响
default() {
return {
// x轴的数据
xData: [],
yData: {
type: 'value',
},
// y轴的值,是根据x轴中图表的数据进行动态增加或减少的
// yAxis: {