源码如下所示:
<template>
<div class="reports">
<!-- A面包屑导航区域 -->
<el-breadcrumb style="margin-bottom:10px" separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>数据报表</el-breadcrumb-item>
<el-button type="warning" @click="$router.push('/test1')">点我去Test1Echarts</el-button>
</el-breadcrumb>
<el-card>
<el-row>
<el-col :span="8">
<el-table :data="tableData" style="width:350px">
<el-table-column prop="name" label="课程" width="70"></el-table-column>
<el-table-column prop="todayBuy" label="今日购买" width="80"></el-table-column>
<el-table-column prop="monthBuy" label="本月购买" width="80"></el-table-column>
<el-table-column prop="totalBuy" label="总购买" width="80"></el-table-column>
</el-table>
</el-col>
<el-col :span="16">
<!-- 折线图 -->
<el-card class="linepic" style="height:280px,width:300px">
<div ref="echarts1" style="height:280px" class="echarts1"> </div>
</el-card>
<div class="graph">
<!-- 柱状图 -->
<el-card class="graphl" style="height:260px">
<div id="echarts2" ref="echarts2" style="height:260px"></div>
</el-card>
<!-- 饼图 -->
<el-card class="graphr" style="height:260px">
<div id="echarts3" ref="echarts3" style="height:260px"></div>
</el-card>
</div>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
const echarts = require('echarts')
export default {
name:"Welcome",
data() {
return {
tableData:[]
}
},
methods: {
getData(){
this.$http.get("http://localhost:8080/api/welcome/getData").then((res)=>{
console.log("welcome=res",res)
const {tableData,orderData,userData,videoData}=res.data.data
// 表格数据
this.tableData=tableData
console.log("@orderData",orderData);
console.log("@uesrData",userData);
console.log("@videoData",videoData);
// ============================================================
// 1.折线图
// 基于准备好的dom,初始化echarts实例
const echarts1=echarts.init(this.$refs.echarts1)
// 指定图表的配置项和数据
var echarts1Option={}
// 处理数据
const xAxis=Object.keys(orderData.data[0])
// console.log("@xAxis",xAxis);//['苹果', 'vivo', 'oppo', '小米', '三星', '华为']
const xAxisData={
data:xAxis
}
echarts1Option.xAxis=xAxisData
echarts1Option.yAxis={}
echarts1Option.legend=xAxisData
echarts1Option.series=[]
xAxis.forEach(key=>{
echarts1Option.series.push({
name:key,
data:orderData.data.map(item=>item[key]),
type:"line"
})
})
console.log("echarts1Option",echarts1Option);
// 使用指定的配置项和数据显示图表
echarts1.setOption(echarts1Option)
// ============================================================
// 2.柱状图
const echarts2 = echarts.init(this.$refs.echarts2)
const eachrts2Option = {
legend: {
// 图例文字颜色
textStyle: {color: "blue"},
},
grid: {
left: "20%",
},
// 提示框
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category", // 类目轴
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: userData.map(item => item.new),
type: 'bar'
},
{
name: '活跃用户',
data: userData.map(item => item.active),
type: 'bar'
}
],
}
echarts2.setOption(eachrts2Option)
// ============================================================
// 3.饼状图
const echarts3 = echarts.init(this.$refs.echarts3)
const eachrts3Option = {
tooltip: {
trigger: "item",
},
color: [
"#0f78f4",
"#dd536b",
"#9462e5",
"#a6a6a6",
"#e1bb22",
"#39c362",
"#3ed1cf",
],
series: [
{
data: videoData,
type: 'pie'
}
],
}
echarts3.setOption(eachrts3Option)
})
}
},
mounted() {
this.getData()
},
}
</script>
<style>
.graph{
display: flex;
margin-top: 20px;
justify-content: space-between;
}
.graphl{
width: 1000px;
}
.graphr{
width: 1000px;
margin-left: 5px;
}
.linepic{
margin: 8px;
}
</style>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/126755.html