<template>
<div>
<h2>欢迎访问后台管理系统！</h2>
<el-row style="margin-top: 30px">
<el-col :span="12" style="z-index: -200px">
<el-card
style="
z-index: -100px;
padding: 25px;
margin-left: 10px;
height: 350px;
"
>
<div id="main" style="width: 500px; height: 300px"></div>
</el-card>
</el-col>
<el-col :span="12" style="z-index: -200px">
<el-card
style="
z-index: -100px;
padding: 25px;
margin-left: 10px;
height: 350px;
"
>
<div id="pie" style="width: 500px; height: 300px"></div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "Home",
data() {
return {};
},
mounted() {
//页面元素渲染完后触发
//折线图和柱状图
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
var option = {
title: {
text: "各季度用户注册数",
subtext: "趋势图",
left: "center",
},
xAxis: {
type: "category",
data: [],
},
yAxis: {
type: "value",
},
series: [
{
data: [],
type: "line",
},
{
data: [],
type: "bar",
},
],
};
//饼图
var pieDom = document.getElementById("pie");
var pieChart = echarts.init(pieDom);
var pieOption = {
title: {
text: "各季度用户注册数",
subtext: "比例图",
left: "center",
},
tooltip: {
trigger: "item",
},
legend: {
orient: "vertical",
left: "left",
},
series: [
{
type: "pie",
radius: "60%",
label: {
normal: {
show: true,
position: "inner",
textStyle: {
fontWeight: 300,
fontSize: 12,
color: "#fff",
},
formatter: "{d}%",
},
},
data: [],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
//请求数据
this.request.get("/echarts/member").then((res) => {
option.xAxis.data = res.data.x;
option.series[0].data = res.data.y;
option.series[1].data = res.data.y;
myChart.setOption(option);
pieOption.series[0].data = [
{ name: res.data.x[0], value: res.data.y[0] },
{ name: res.data.x[1], value: res.data.y[1] },
{ name: res.data.x[2], value: res.data.y[2] },
{ name: res.data.x[3], value: res.data.y[3] },
];
pieChart.setOption(pieOption);
});
},
};
</script>
|
