当前位置：网站首页>mock模拟数据显示折线图柱状图饼图
mock模拟数据显示折线图柱状图饼图
2022-08-11 11:52:00 【-加油】
效果图
1、安装mock
npm i mockjs
2、mock.js引入mock
import Mock from 'mockjs'
//模块的方式将回调函数引入
import homeApi from '@/api/mockServeData/home.js'
//拦截器规则 url地址 回调函数返回具体的数据
Mock.mock('/home/getData',homeApi.getStatisticalData)
3、模拟数据 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({
苹果: Mock.Random.float(100, 8000, 0, 0),
vivo: Mock.Random.float(100, 8000, 0, 0),
oppo: Mock.Random.float(100, 8000, 0, 0),
魅族: Mock.Random.float(100, 8000, 0, 0),
三星: Mock.Random.float(100, 8000, 0, 0),
小米: Mock.Random.float(100, 8000, 0, 0)
})
)
}
return {
code: 200,
data: {
// 饼图
videoData: [
{
name: '小米',
value: 2999
},
{
name: '苹果',
value: 5999
},
{
name: 'vivo',
value: 1500
},
{
name: 'oppo',
value: 1999
},
{
name: '魅族',
value: 2200
},
{
name: '三星',
value: 4500
}
],
// 柱状图
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: ['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007'],
data: List
},
tableData: [
{
name: 'oppo',
todayBuy: 500,
monthBuy: 3500,
totalBuy: 22000
},
{
name: 'vivo',
todayBuy: 300,
monthBuy: 2200,
totalBuy: 24000
},
{
name: '苹果',
todayBuy: 800,
monthBuy: 4500,
totalBuy: 65000
},
{
name: '小米',
todayBuy: 1200,
monthBuy: 6500,
totalBuy: 45000
},
{
name: '三星',
todayBuy: 300,
monthBuy: 2000,
totalBuy: 34000
},
{
name: '魅族',
todayBuy: 350,
monthBuy: 3000,
totalBuy: 22000
}
]
}
}
}
}
4、data.js
写接口请求
export const getData=()=>{
return axios.request({
url:'/home/getData',
methods:'get',
})
}
5、home.vue
<!-- 表格 -->
<el-card style="margin-top: 20px; height: 460px;">
<el-table :data="tableData">
<el-table-column v-for="(val,key) in tableLabel"
:key="key"
:prop="key"
:label="val">
</el-table-column>
</el-table>
</el-card>
<!-- 折线图 -->
<el-card style="height:280px">
<div style="height:280px" ref="echarts"></div>
</el-card>
<div class="graph">
<el-card style="height:260px">
<!-- 柱状图 -->
<div style="height:240px" ref="userEcharts"></div>
</el-card>
<el-card style="height:260px">
<!-- 饼图 -->
<div style="height:240px" ref="videoEcharts"></div>
</el-card>
</div>
<script>
// 请求方法
import {
getData} from "@/api/data.js"
//安装echarts并引入
import *as echarts from 'echarts'
export default {
data() {
return {
tableData:[],
tableLabel:{
name:'品牌',
todayBuy:'今日购买',
montBuy:'本月购买',
totalBuy:'总购买'
},
}
},
mounted(){
getData().then(res=>{
const{
code,data} =res.data;
if(code===20000){
//表格显示
this.tableData = data.tableData
//折线图显示
const order = data.orderData
const xData = order.date//x轴坐标的数据
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'
})
})
//折线图
const lineoption = {
//x轴
xAxis:{
data:xData
},
//y轴
yAxis:{
},
legend:{
data:keyArray
},
series
}
const E = echarts.init(this.$refs.echarts)
E.setOption(lineoption)
//柱状图
const barOption = {
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'
},
],
}
const U = echarts.init(this.$refs.userEcharts)
U.setOption(barOption)
//饼图
const pieOption = {
tooltip: {
trigger: "item",
},
color: [
"#0f78f4",
"#dd536b",
"#9462e5",
"#a6a6a6",
"#e1bb22",
"#39c362",
"#3ed1cf",
],
series: [
{
data:data.videoData,
type:'pie'
}
],
}
const V = echarts.init(this.$refs.videoEcharts)
V.setOption(pieOption)
}
})
}
}
</script>
echarts公共组件进行封装
home.vue中
<!-- 折线图 -->
<el-card style="height:280px">
<!-- <div style="height:280px" ref="echarts"></div> -->
<Echart :chartData="echartData.line" style="height:280px" ></Echart>
</el-card>
<div class="graph">
<el-card style="height:260px">
<!-- 柱状图 -->
<!-- <div style="height:240px" ref="userEcharts"></div> -->
<Echart :chartData="echartData.bar" style="height:240px" ></Echart>
</el-card>
<el-card style="height:260px">
<!-- 饼图 -->
<!-- <div style="height:240px" ref="videoEcharts"></div> -->
<Echart :chartData="echartData.pie" :isAxisChart="false" style="height:240px" ></Echart>
</el-card>
</div>
<script>
// 请求方法
import {
getData} from "@/api/data.js"
import Echart from "@/components/Echarts.vue"
export default {
components:{
Echart
},
data() {
return {
echartData:{
line:{
xData:[],
series:[]
},
bar:{
xData:[],
series:[],
},
pie:{
series:[]
}
}
}
},
mounted(){
getData().then(res=>{
const{
code,data} =res.data;
if(code===200){
const order = data.orderData
const xData = order.date//x轴坐标的数据
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.line.xData = xData;
this.echartData.line.series = series
//柱状图
this.echartData.bar.xData = data.userData.map(item=> item.date);
this.echartData.bar.series = [
{
name:'新增用户',
data:data.userData.map(item=>item.new),
//柱状图
type:'bar'
},
{
name:'活跃用户',
data:data.userData.map(item=>item.active),
//柱状图
type:'bar'
},
]
// 饼状图
this.echartData.pie.series = [
{
data:data.videoData,
type:'pie'
}
]
}
})
}
}
</script>
封装的Echarts.vue
<template>
<div ref="echart">
</div>
</template>
<script>
import *as echart from'echarts'
export default {
//父组件home.vue传来的数据
props:{
// 有x，y轴，默认有，当是饼状图时传来false
isAxisChart:{
type:Boolean,
default:true
},
//对于传来的数据 用计算属性computed 定义options 判读是哪种图
chartData:{
type:Object,
//不传属性时的容错性 比如饼图
default(){
return{
xData:[],
series:[]
}
}
}
},
data(){
return{
//会去用计算属性computed 定义options 判读是哪种图 柱状图、折线图/饼状图
//柱状图或者折线图 有x轴 y轴
axisOption:{
legend: {
// 图例文字颜色
textStyle: {
color: "#333",
},
},
grid: {
left: "20%",
},
// 提示框
tooltip: {
trigger: "axis",
},
//x轴
xAxis: {
type: "category", // 类目轴
data: [],
axisLine: {
lineStyle: {
color: "#17b3a3",
},
},
axisLabel: {
interval: 0,
color: "#333",
},
},
//y轴
yAxis: [
{
type: "value",
axisLine: {
lineStyle: {
color: "#17b3a3",
},
},
},
],
color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
series: [],
},
//饼状图
normalOption:{
tooltip: {
trigger: "item",
},
color: [
"#0f78f4",
"#dd536b",
"#9462e5",
"#a6a6a6",
"#e1bb22",
"#39c362",
"#3ed1cf",
],
series: [],
},
//如果已经渲染了 不需要再重新渲染
echart:null
}
},
methods:{
//初始化内容 而且还需要watch监听数据改变时要重新绘制
initChart(){
this.initChartData()//处理好数据
if(this.echart){
//如果已经渲染了 不需要再重新渲染
this.echart.setOption(this.options)
}
else{
//不存在 先初始化对象
this.echart = echart.init(this.$refs.echart)
// options在computed
this.echart.setOption(this.options)
}
},
initChartData(){
//折线图或者柱状图
if(this.isAxisChart){
this.axisOption.xAxis.data = this.chartData.xData
this.axisOption.series = this.chartData.series
}else{
//饼状图没有x轴 y轴
this.normalOption.series = this.chartData.series
}
}
},
//数据改变时，表格应该重新绘制
watch:{
chartData:{
handler:function(){
this.initChart()//重新显示
},
deep:true
}
},
computed:{
options(){
// 有x轴 或者y 就是axisOption
return this.isAxisChart?this.axisOption:this.normalOption
}
}
}
</script>
<style>
</style>
边栏推荐
猜你喜欢
随机推荐
陕西cas:2055042-71-0N-(炔-四聚乙二醇)-生物素价格
【五一特刊】FPGA零基础学习：VGA协议驱动设计
基本sql语句1--查询基础
乐观锁与悲观锁
17-响应式布局
Qt中的窗口单例不要用饿汉式
d包含区间
基于数据库实现通用异步缓存系统
Mybaits学习笔记（四）动态Sql
Codeforces Global Round 15 （A-F）
从零开始Blazor Server(10)--编辑角色
锂电池充电芯片IC
【黑马早报】抖音否认与头部主播签对赌协议；阿迪达斯CEO承认在中国犯了错；网易云社交App心遇被指涉黄；联通董事长称5G资费比点外卖还便宜
01-js书写位置、变量
2022 OceanBase 年度发布会：发布四大策略，迈入4.0时代
请求转发与重定向
[The sword refers to the offer-Nioke.com brush questions] The first article - Fibonacci sequence - C implementation
CSDN文章抓取
云原生（三十四） | Kubernetes篇之平台存储系统实战
Five minutes to teach you intranet penetration