@ -0,0 +1,17 @@ |
|||||
|
// 导入axios实例
|
||||
|
import request from '@/utils/request' |
||||
|
|
||||
|
// 定义接口的传参
|
||||
|
const api={ |
||||
|
// 日客流趋势
|
||||
|
daily_klqs:'index.php/allGroupTimeNum?granularity=daily' |
||||
|
} |
||||
|
|
||||
|
// 获取群组
|
||||
|
export function allGroupTimeNum(param) { |
||||
|
return request({ |
||||
|
url: api.daily_klqs, |
||||
|
method: 'get', |
||||
|
param, |
||||
|
}) |
||||
|
} |
||||
|
After Width: | Height: | Size: 68 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 8.8 KiB |
|
After Width: | Height: | Size: 8.4 KiB |
|
After Width: | Height: | Size: 127 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 790 B |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 822 B |
|
After Width: | Height: | Size: 792 B |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 792 B |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 116 B |
|
After Width: | Height: | Size: 220 B |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 789 B |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 794 B |
@ -0,0 +1,216 @@ |
|||||
|
|
||||
|
.content { |
||||
|
height: auto; |
||||
|
width: 100%; |
||||
|
margin-top: -3%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
// border: 1px solid red; |
||||
|
.qushi { |
||||
|
width: 32%; |
||||
|
// border: 1px solid red; |
||||
|
margin-left: 1%; |
||||
|
.keliu { |
||||
|
width: 100%; |
||||
|
height: 8vh; |
||||
|
background-image: url(../../assets/index/left_t1_bg.png); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
position: relative; |
||||
|
.keliuTxt { |
||||
|
color: #fff; |
||||
|
font-size: 18px; |
||||
|
color: #b5b7c5; |
||||
|
font-weight: bold; |
||||
|
line-height: 8vh; |
||||
|
padding-left: 22%; |
||||
|
} |
||||
|
// 年月日按钮 |
||||
|
.keliuBtn { |
||||
|
width: 20%; |
||||
|
height: 50%; |
||||
|
// border: 1px solid red; |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
bottom: 15%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
// align-items: center; |
||||
|
.btnItemD { |
||||
|
color: #006bff; |
||||
|
background-image: url("../../assets/index/年月日1.png"); |
||||
|
} |
||||
|
.btnItemS { |
||||
|
color: white; |
||||
|
background-image: url("../../assets/index/年月日2.png"); |
||||
|
} |
||||
|
.btnItem { |
||||
|
cursor: pointer; |
||||
|
width: 30%; |
||||
|
height: 95%; |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
text-align: center; |
||||
|
line-height: 200%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.keliuTu1 { |
||||
|
background-image: url("../../assets/index/left_t2_bg.png"); |
||||
|
} |
||||
|
.tongjitu { |
||||
|
width: 100%; |
||||
|
height: 16vh; |
||||
|
// border: 1px solid red; |
||||
|
} |
||||
|
.qushiBaifb { |
||||
|
width: 100%; |
||||
|
height: 30vh; |
||||
|
// border: 1px solid red; |
||||
|
background-image: url("../../assets/index/左1-2背景.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.baifbLeft { |
||||
|
width: 25%; |
||||
|
height: 30%; |
||||
|
// border: 1px solid red; |
||||
|
.baiFbitem { |
||||
|
width: 100%; |
||||
|
height: 30%; |
||||
|
color: #0096ff; |
||||
|
// border: 1px solid red; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
} |
||||
|
.baiFbRight { |
||||
|
width: 25%; |
||||
|
height: 30%; |
||||
|
// border: 1px solid red; |
||||
|
.baiFbitem { |
||||
|
width: 100%; |
||||
|
height: 30%; |
||||
|
color: #0096ff; |
||||
|
// border: 1px solid red; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.middle { |
||||
|
width: 30%; |
||||
|
height: 70vh; |
||||
|
background-image: url("../../assets/index/中间数据.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
margin-top: 4%; |
||||
|
position: relative; |
||||
|
.aimImg { |
||||
|
animation: firstdiv 2s linear 2s infinite alternate; |
||||
|
} |
||||
|
@keyframes firstdiv { |
||||
|
0% { |
||||
|
opacity: 1; |
||||
|
margin-top: 0%; |
||||
|
} |
||||
|
25% { |
||||
|
opacity: 0.7; |
||||
|
margin-top: 3%; |
||||
|
} |
||||
|
50% { |
||||
|
opacity: 0.5; |
||||
|
margin-top: 5%; |
||||
|
} |
||||
|
75% { |
||||
|
opacity: 0.7; |
||||
|
margin-top: 3%; |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
margin-top: 0%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.renshu { |
||||
|
width: 32%; |
||||
|
// height: 50vh; |
||||
|
margin-right: 1%; |
||||
|
// border: 1px solid red; |
||||
|
.keliu { |
||||
|
width: 100%; |
||||
|
height: 8vh; |
||||
|
background-image: url(../../assets/index/右1标题.png); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
position: relative; |
||||
|
.keliuTxt { |
||||
|
position: absolute; |
||||
|
right: 28%; |
||||
|
top: 25%; |
||||
|
color: white; |
||||
|
font-size: 18px; |
||||
|
color: #b5b7c5; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.renshuItme { |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
.renshuChild { |
||||
|
width: 45%; |
||||
|
height: 23vh; |
||||
|
background-image: url("../../assets/index/右1数据.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
margin-bottom: 2%; |
||||
|
position: relative; |
||||
|
.title { |
||||
|
color: #0095ff; |
||||
|
font-weight: bold; |
||||
|
position: absolute; |
||||
|
top: 19%; |
||||
|
right: 10%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.dangq { |
||||
|
position: absolute; |
||||
|
top: 31.5%; |
||||
|
left: 20%; |
||||
|
color: white; |
||||
|
font-weight: bold; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.number { |
||||
|
color: white; |
||||
|
position: absolute; |
||||
|
font-size: 22px; |
||||
|
font-weight: bold; |
||||
|
bottom: 18%; |
||||
|
left: 10%; |
||||
|
} |
||||
|
.bfb { |
||||
|
position: absolute; |
||||
|
bottom: 18%; |
||||
|
right: 15%; |
||||
|
color: #00d7ff; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,49 @@ |
|||||
|
import axios from 'axios' |
||||
|
|
||||
|
//https://www.jb51.net/article/246548.htm
|
||||
|
|
||||
|
// 创建一个 axios 实例
|
||||
|
const service = axios.create({ |
||||
|
//baseURL: '/api', // 所有的请求地址前缀部分
|
||||
|
//baseURL: publicConfig.BASE_API,
|
||||
|
//baseURL:ahost,
|
||||
|
timeout: 60000, // 请求超时时间毫秒
|
||||
|
withCredentials: true, // 异步请求携带cookie
|
||||
|
headers: { |
||||
|
// 设置后端需要的传参类型
|
||||
|
'Content-Type': 'application/json', |
||||
|
}, |
||||
|
}) |
||||
|
|
||||
|
// 添加请求拦截器
|
||||
|
service.interceptors.request.use( |
||||
|
function (config) { |
||||
|
// 在发送请求之前做些什么
|
||||
|
return config |
||||
|
}, |
||||
|
function (error) { |
||||
|
// 对请求错误做些什么
|
||||
|
return Promise.reject(error) |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
// 添加响应拦截器
|
||||
|
service.interceptors.response.use( |
||||
|
function (response) { |
||||
|
//console.log(response)
|
||||
|
// 2xx 范围内的状态码都会触发该函数。
|
||||
|
// 对响应数据做点什么
|
||||
|
// dataAxios 是 axios 返回数据中的 data
|
||||
|
const dataAxios = response.data |
||||
|
// 这个状态码是和后端约定的
|
||||
|
//const code = dataAxios.reset
|
||||
|
return dataAxios |
||||
|
}, |
||||
|
function (error) { |
||||
|
// 超出 2xx 范围的状态码都会触发该函数。
|
||||
|
// 对响应错误做点什么
|
||||
|
console.log(error) |
||||
|
return Promise.reject(error) |
||||
|
} |
||||
|
) |
||||
|
export default service |
||||
@ -0,0 +1,483 @@ |
|||||
|
<template> |
||||
|
|
||||
|
<!-- 系统总览 --> |
||||
|
<dv-full-screen-container> |
||||
|
<div class="hello" > |
||||
|
<div class="content"> |
||||
|
<div class="qushi"> |
||||
|
<div class="keliu"> |
||||
|
<div class="keliuTxt">客流趋势</div> |
||||
|
<div class="keliuBtn"> |
||||
|
<div v-for="(item, index) in keliuList" :key="index" class="btnItem" @click="clickQushi(item.unit)" |
||||
|
:class="item.unit == selectVal1 ? 'btnItemS' : 'btnItemD'"> |
||||
|
<div class="txt">{{ item.unit }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="tongjitu" id="homebar" style="height: 230px; width: 100%"></div> |
||||
|
|
||||
|
<div class="qushiBaifb"> |
||||
|
<div class="baifbLeft"> |
||||
|
<div class="baiFbitem"> |
||||
|
<div style="font-size: 14px">体育场</div> |
||||
|
<div |
||||
|
style=" |
||||
|
color: white; |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
margin-left: 10%; |
||||
|
" |
||||
|
> |
||||
|
20% |
||||
|
</div> |
||||
|
<img |
||||
|
style="width: 10%; height: 60%" |
||||
|
src="../../assets/index/体育场图例.png" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="baiFbitem"> |
||||
|
<div style="font-size: 14px">体育馆</div> |
||||
|
<div style=" color: white; font-size: 18px; font-weight: bold; margin-left: 10%; " > |
||||
|
12% |
||||
|
</div> |
||||
|
<img style="width: 10%; height: 60%" src="../../assets/index/体育馆图例.png"/> |
||||
|
</div> |
||||
|
<div class="baiFbitem"> |
||||
|
<div style="font-size: 14px">游泳场馆</div> |
||||
|
<div style="color: white; font-size: 18px; font-weight: bold"> |
||||
|
12% |
||||
|
</div> |
||||
|
<img style="width: 10%; height: 60%" src="../../assets/index/体育馆图例.png" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="baiFbRight"> |
||||
|
<div class="baiFbitem"> |
||||
|
<img style="width: 10%; height: 60%" src="../../assets/index/体育场图例.png" /> |
||||
|
<div style=" color: white; font-size: 18px; font-weight: bold; margin-right: 10%; " > |
||||
|
20% |
||||
|
</div> |
||||
|
<div style="font-size: 14px">图书馆</div> |
||||
|
</div> |
||||
|
<div class="baiFbitem"> |
||||
|
<img |
||||
|
style="width: 10%; height: 60%" |
||||
|
src="../../assets/index/体育馆图例.png" |
||||
|
/> |
||||
|
<div |
||||
|
style=" |
||||
|
color: white; |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
margin-right: 10%; |
||||
|
" |
||||
|
> |
||||
|
12% |
||||
|
</div> |
||||
|
<div style="font-size: 14px">文化馆</div> |
||||
|
</div> |
||||
|
<div class="baiFbitem"> |
||||
|
<img |
||||
|
style="width: 10%; height: 60%" |
||||
|
src="../../assets/index/体育馆图例.png" |
||||
|
/> |
||||
|
<div |
||||
|
style=" |
||||
|
color: white; |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
margin-right: 10%; |
||||
|
" |
||||
|
> |
||||
|
12% |
||||
|
</div> |
||||
|
<div style="font-size: 14px">博物馆</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 今日各场馆人数趋势 折线图 --> |
||||
|
<div class="keliu keliuTu1"> |
||||
|
<div class="keliuTxt">今日各场馆人数趋势</div> |
||||
|
<div id="kl-line" style="width: 100%; height: 180px;"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="middle"> |
||||
|
<div style=" position: absolute; color: white; top: 11%; left: 18%; font-weight: bold; " > |
||||
|
345,235 |
||||
|
</div> |
||||
|
<div |
||||
|
style=" |
||||
|
position: absolute; |
||||
|
color: white; |
||||
|
top: 11%; |
||||
|
left: 43.5%; |
||||
|
font-weight: bold; |
||||
|
" |
||||
|
> |
||||
|
2,345,235 |
||||
|
</div> |
||||
|
<div |
||||
|
style=" |
||||
|
position: absolute; |
||||
|
color: white; |
||||
|
top: 11%; |
||||
|
left: 71%; |
||||
|
font-weight: bold; |
||||
|
" |
||||
|
> |
||||
|
2,345万 |
||||
|
</div> |
||||
|
|
||||
|
<img |
||||
|
src="../../assets/index/zt.png" |
||||
|
class="aimImg" |
||||
|
style=" |
||||
|
width: 70%; |
||||
|
height: 50%; |
||||
|
position: absolute; |
||||
|
left: 15%; |
||||
|
top: 29%; |
||||
|
" |
||||
|
/> |
||||
|
|
||||
|
<div |
||||
|
style=" |
||||
|
position: absolute; |
||||
|
color: white; |
||||
|
left: 42%; |
||||
|
bottom: 15.5%; |
||||
|
font-weight: bold; |
||||
|
" |
||||
|
> |
||||
|
年度进馆人数 |
||||
|
</div> |
||||
|
<div |
||||
|
style=" |
||||
|
position: absolute; |
||||
|
color: white; |
||||
|
left: 39%; |
||||
|
bottom: 8%; |
||||
|
font-weight: bold; |
||||
|
font-size: 24px; |
||||
|
" |
||||
|
> |
||||
|
33,532,890 |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="renshu"> |
||||
|
<div class="keliu"> |
||||
|
<div class="keliuTxt">各场馆实施实时进馆人数</div> |
||||
|
<!-- <div> |
||||
|
<canvas |
||||
|
id="etELhoiEDSDBklnwaLybhInLlmnhnHuv" |
||||
|
:width="cWidth" |
||||
|
:height="cHeight" |
||||
|
class="charts" |
||||
|
@click="tap" |
||||
|
/> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
|
||||
|
<div class="renshuItme"> |
||||
|
<div style="margin-right: 2%" class="renshuChild"> |
||||
|
<div class="title">体育场</div> |
||||
|
<div class="dangq">当前人数</div> |
||||
|
|
||||
|
<div class="number">4,738</div> |
||||
|
<div class="bfb">40%</div> |
||||
|
</div> |
||||
|
<div class="renshuChild"> |
||||
|
<div class="title">图书馆</div> |
||||
|
<div class="dangq">当前人数</div> |
||||
|
|
||||
|
<div class="number">34,738</div> |
||||
|
<div class="bfb">50%</div> |
||||
|
</div> |
||||
|
<div style="margin-right: 2%" class="renshuChild"> |
||||
|
<div class="title">体育馆</div> |
||||
|
<div class="dangq">当前人数</div> |
||||
|
|
||||
|
<div class="number">899,738</div> |
||||
|
<div class="bfb">80%</div> |
||||
|
</div> |
||||
|
<div class="renshuChild"> |
||||
|
<div class="title">文化馆</div> |
||||
|
<div class="dangq">当前人数</div> |
||||
|
|
||||
|
<div class="number">240</div> |
||||
|
<div class="bfb">25%</div> |
||||
|
</div> |
||||
|
<div style="margin-right: 2%" class="renshuChild"> |
||||
|
<div class="title">游泳场馆</div> |
||||
|
<div class="dangq">当前人数</div> |
||||
|
|
||||
|
<div class="number">33,738</div> |
||||
|
<div class="bfb">75%</div> |
||||
|
</div> |
||||
|
<div class="renshuChild"> |
||||
|
<div class="title">博物馆</div> |
||||
|
<div class="dangq">当前人数</div> |
||||
|
|
||||
|
<div class="number">4,738</div> |
||||
|
<div class="bfb">40%</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</dv-full-screen-container> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// 引入echarts |
||||
|
import * as echarts from "echarts"; |
||||
|
// 引入api |
||||
|
import * as homeApi from '@/api/home' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
selectVal: 1, |
||||
|
keliuList: [ |
||||
|
{ |
||||
|
unit: "年", |
||||
|
}, |
||||
|
{ |
||||
|
unit: "月", |
||||
|
}, |
||||
|
{ |
||||
|
unit: "日", |
||||
|
}, |
||||
|
], |
||||
|
// 条线图 |
||||
|
bar_data:[], |
||||
|
// 柱子图x轴 |
||||
|
bar_tdata:[], |
||||
|
selectVal1: "年", |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
// 首页线图 |
||||
|
this.home_bar(); |
||||
|
// 折线图 |
||||
|
this.line_zone(); |
||||
|
|
||||
|
this.getStat(); |
||||
|
}, |
||||
|
methods: { |
||||
|
clickItme(val) { |
||||
|
this.selectVal = val; |
||||
|
}, |
||||
|
clickQushi(val) { |
||||
|
this.selectVal1 = val; |
||||
|
}, |
||||
|
|
||||
|
//获取统计数据 |
||||
|
getStat(){ |
||||
|
let that = this |
||||
|
homeApi.allGroupTimeNum().then(res=>{ |
||||
|
// get allTimeData |
||||
|
const tmpdata = res.data.allTimeData |
||||
|
that.bar_data =tmpdata |
||||
|
// let btdata = new Array(); |
||||
|
// let bvdata = new Array(); |
||||
|
tmpdata.foreach(function(item,key){ |
||||
|
console.log(key) |
||||
|
console.log(item); |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 透明背景柱状统计图 |
||||
|
home_bar() { |
||||
|
var chartDom = document.getElementById("homebar"); |
||||
|
var myChart = echarts.init(chartDom); |
||||
|
var option; |
||||
|
|
||||
|
// |
||||
|
let that = this |
||||
|
|
||||
|
option = { |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: that.bar_tdata, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: "value", |
||||
|
//网格线 |
||||
|
splitLine: { |
||||
|
lineStyle: { |
||||
|
type: "soild", |
||||
|
color: "#2F00FF", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
//data: [120, 200, 150, 80, 70, 110, 130, 630, 530, 460], |
||||
|
data: that.bar_data, |
||||
|
type: "bar", |
||||
|
showBackground: true, |
||||
|
// 设置顶部圆形 |
||||
|
symbolSize: function (d) { |
||||
|
console.log(d); |
||||
|
return d > 0 ? [10, 20] : [0, 0]; |
||||
|
}, |
||||
|
symbolPosition: "end", |
||||
|
|
||||
|
// symbolPosition:'end', |
||||
|
// 背景颜色 |
||||
|
backgroundStyle: { |
||||
|
symbolPosition: "end", |
||||
|
symbolSize: [20, 20], |
||||
|
symbolOffset: [0, "-20%"], |
||||
|
opacity: 0.75, |
||||
|
//color: 'rgba(180, 180, 180, 0.2)' |
||||
|
color: { |
||||
|
type: "linear", |
||||
|
x: 0, |
||||
|
y: 1, |
||||
|
x2: 1, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#2F00FF", // 0% 处的颜色 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.2, |
||||
|
color: "#000", // 50% 处的颜色 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.8, |
||||
|
color: "#000", // 50% 处的颜色 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#2F00FF", // 0% 处的颜色 |
||||
|
}, |
||||
|
], |
||||
|
global: false, // 缺省为 false |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
// |
||||
|
// itemStyle:{ |
||||
|
// normal:{ |
||||
|
// barBorderRadius:[2,2,0,0] |
||||
|
// } |
||||
|
//symbolOffset:[14,14], |
||||
|
//borderRadius:[15,15,0,0] |
||||
|
// }, |
||||
|
|
||||
|
// 条柱颜色 |
||||
|
color: { |
||||
|
type: "linear", |
||||
|
x: 0, |
||||
|
y: 1, |
||||
|
x2: 1, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#00B4FF", // 0% 处的颜色 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.6, |
||||
|
color: "#2f00ff", |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.8, |
||||
|
color: "#2f00ff", |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#00B4FF", // 100% 处的颜色 |
||||
|
}, |
||||
|
], |
||||
|
global: false, // 缺省为 false |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
option && myChart.setOption(option); |
||||
|
}, |
||||
|
|
||||
|
// 大面积折线图 |
||||
|
line_zone() { |
||||
|
var chartDom = document.getElementById("kl-line"); |
||||
|
var myChart = echarts.init(chartDom); |
||||
|
var option; |
||||
|
|
||||
|
let base = +new Date(2022, 9, 3); |
||||
|
let oneDay = 24 * 3600 * 1000; |
||||
|
let date = []; |
||||
|
let data = [Math.random() * 300]; |
||||
|
for (let i = 1; i < 20000; i++) { |
||||
|
var now = new Date((base += oneDay)); |
||||
|
date.push( |
||||
|
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/") |
||||
|
); |
||||
|
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1])); |
||||
|
} |
||||
|
option = { |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
boundaryGap: false, |
||||
|
data: date, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: "value", |
||||
|
boundaryGap: [0, "100%"], |
||||
|
//网格线 |
||||
|
splitLine: { |
||||
|
lineStyle: { |
||||
|
type: "soild", |
||||
|
color: "#2F00FF", |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
series: [ |
||||
|
{ |
||||
|
name: "Fake Data", |
||||
|
type: "line", |
||||
|
symbol: "none", |
||||
|
sampling: "lttb", |
||||
|
itemStyle: { |
||||
|
color: "rgb(255, 170, 131)", |
||||
|
}, |
||||
|
areaStyle: { |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "rgba(255, 158, 68,0.6)", |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "rgb(255, 70, 131,0.6)", |
||||
|
}, |
||||
|
]), |
||||
|
}, |
||||
|
data: data, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
option && myChart.setOption(option); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
@import "../../assets/less/dashboard.less"; |
||||
|
</style> |
||||
|
|
||||
@ -1,4 +1,7 @@ |
|||||
<template> |
<template> |
||||
|
<dv-full-screen-container> |
||||
<dv-full-screen-container>content</dv-full-screen-container> |
|
||||
|
<dv-border-box-10>dv-border-box-10</dv-border-box-10> |
||||
|
|
||||
|
</dv-full-screen-container> |
||||
</template> |
</template> |
||||