可视化大屏案例
可视化大屏
·
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<div class="homePage">
<div class="main-title">
<div class="main-icon"></div>
<h2>xxxxxxxxxxxxxx</h2>
</div>
<div class="center">
<!--左边 -->
<div class="el-aside">
<div class="aside1">
<div class="aside1-nr">
<div class="title-box">
<div class="title">
全国xxx
</div>
<div>
<span v-for="(n,index) in numdata" :key="n" class="tit-num">
{{n}}
</span>
<span style=" background-image: linear-gradient(to bottom, #39b4f1, #0a4f72);
-webkit-background-clip: text;
color: transparent;">
,
</span>
<span v-for="(v,index) in numdata2" class="tit-num">
{{v}}
</span>
<span style=" background-image: linear-gradient(to bottom, #39b4f1, #0a4f72);
-webkit-background-clip: text;
color: transparent;">间</span>
</div>
</div>
<div id="container" style="height:100%;width: 100%;"></div>
</div>
</div>
<div class="aside2">
<div class="aside2-nr">
<div class="aside2title">
当日xxxx排名
</div>
<div id="asideconfig" style="width: 100%;height:100%;"></div>
</div>
</div>
</div>
<!-- 中间 -->
<div class="center-center">
<div class="center-con">
<div class="center-cha">
<div style="width:100%;height: 100%;" id='chart'></div>
</div>
</div>
<div class="center-bom">
<div class="cenbom-box">
<div class="bomtitle">
xx线索
</div>
<div class="cenbom">
<div class="cenbom-left">
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="zj" label="商机线索总计" align="center" width="110">
</el-table-column>
<el-table-column prop="ypp" label="已匹配" align="center">
</el-table-column>
<el-table-column prop="yzx" label="已执行" align="center">
</el-table-column>
<el-table-column prop="zzpp" label="正在匹配中" align="center" width="100">
</el-table-column>
<el-table-column prop="ygq" label="已过期" align="center">
</el-table-column>
</el-table>
</div>
<div class="cenbom-rig">
<div id='consume_pie' style="width:100%;height:100%;"></div>
</div>
</div>
</div>
</div>
</div>
<!--右边 -->
<div class="center-right">
<div class="right-box1">
<div class="rightbox1-nr">
<div class="rightbox1tle">
全国xx预定量
</div>
<div id="main" style="width: 100%;height:100%; "></div>
</div>
</div>
<div class="right-box2">
<div class="rightbox2-nr">
<div class="rightbox2tle">
xxx预定
</div>
<div id="rigboxmain" style="width: 100%;
height: 100%;
"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<script src="./china.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
numdata: ['5', '1', '7'],
numdata2: ['2', '2', '3'],
tableData: [{
zj: '8765条',
ypp: '3545条',
yzx: '2345条',
zzpp: '6785条',
ygq: '567条',
}],
chartst: ''
}
},
created() {
},
mounted() {
var _this = this
setTimeout(function() {
_this.mgtmyChart()
_this.zztChart()
_this.contertain()
_this.loadRingChart()
_this.cateChart()
_this.rigboxChart()
}, 1000)
},
methods: {
// 玫瑰图
mgtmyChart() {
var dom = document.getElementById('container');
var myChart = echarts.init(dom);
var option = {
tooltip: {
trigger: 'item',
},
legend: {
top: 'bottom',
left: 'center',
textStyle: {
color: '#fff'
}
},
series: [{
name: '客房数',
type: 'pie',
radius: [20, 80],
roseType: 'area',
label: {
show: true,
formatter(param) {
return param.value;
}
},
data: [{
value: 40,
name: '浙江'
}, {
value: 38,
name: '上海'
}, {
value: 32,
name: '江苏'
}, {
value: 30,
name: '福建'
}, {
value: 28,
name: '广东'
}, {
value: 26,
name: '北京'
}, {
value: 22,
name: '四川'
}, {
value: 18,
name: '天津'
}]
}]
};
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
},
// 柱状图
zztChart() {
var newArr = {
citys: ['浙江', '上海', '北京', '天津', '福建', '广东', '四川', '江苏', '河南', '新疆'],
num: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', ],
data: [98, 80, 68, 48, 38, 30, 25, 22, 15, 10]
}
var aside2Chart = echarts.init(document.getElementById('asideconfig'));
var option = {
// 图标的上下左右边界
grid: {
top: "5%",
left: "5%",
right: "5%",
bottom: "5%",
containLabel: true, //是否包含坐标轴的文字
},
// x 轴相关
xAxis: {
type: 'value',
show: false,
},
// y 轴数据
yAxis: [{
type: 'category',
data: newArr.num,
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 16,
align: 'right',
padding: [0, 16, 0, 0]
},
},
}, {
type: 'category',
data: newArr.citys,
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 16,
align: 'left',
padding: [0, 0, 0, 10],
},
formatter: function(value, index) {
return value + ':' + '\xa0' + newArr.data[index] + '%'
}
},
}],
series: [{
name: '客房排名',
type: 'bar',
barWidth: 10,
data: newArr.data,
showBackground: true,
backgroundStyle: {
color: '#253048',
borderRadius: 5
},
itemStyle: {
normal: {
barBorderRadius: [5, 5, 5, 5],
color: function(params) {
let bottomColor = '#00B5FB'
if (params.dataIndex === 0) {
bottomColor = '#ff334f'
} else if (params.dataIndex === 1) {
bottomColor = '#ef6c77'
} else if (params.dataIndex === 2) {
bottomColor = '#ef6c77'
}
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#20c0ff',
}, {
offset: 0,
color: bottomColor
}])
}
},
},
}, ],
tooltip: {
trigger: "item",
axisPointer: {
type: "line",
z: 0,
},
},
};
aside2Chart.setOption(option);
window.addEventListener("resize", function() {
aside2Chart.resize();
});
},
// 地图
contertain() {
// 基于准备好的dom，初始化echarts实例
var chart = echarts.init(document.getElementById('chart'))
// 监听屏幕变化自动缩放图表
window.addEventListener('resize', function() {
chart.resize()
})
// 绘制图表
chart.setOption({
geo: {
map: 'china', // 地图类型
show: true, // 是否显示地理坐标系组件
// 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，
// 可以设置成 'scale' 或者 'move' 设置成 true 为都开启
roam: false,
// 图形上的文本标签
label: {
show: false // 是否显示对应地名
},
// 地图区域的多边形 图形样式
itemStyle: {
normal: {
borderColor: '#04bbff',
borderWidth: 2,
areaColor: {
type: 'linear-gradient',
x: 0,
y: 1500,
x2: 1000,
y2: 0,
colorStops: [{
offset: 0.5,
color: '#2066e0' // 0% 处的颜色
}, {
offset: 1,
color: '#092646' // 100% 处的颜色
}],
global: true // 缺省为 false
},
shadowColor: '#1456d1',
shadowOffsetX: 0,
shadowOffsetY: 8,
shadowBlur: 10
},
// 鼠标放上去高亮的样式
emphasis: {
areaColor: '#0c152f',
borderWidth: 0
}
},
// 高亮状态下的多边形和标签样式
emphasis: {
label: {
show: true, // 是否显示标签
color: '#fff' // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
},
itemStyle: {
areaColor: '#aeaeae' // 地图区域的颜色
}
}
},
tooltip: {
trigger: 'item',
},
series: [{
type: 'scatter', // 类型
coordinateSystem: 'geo', // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'
// 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',
// 'pin', 'arrow', 'none'
symbol: 'image://' + './img/111.png',
symbolSize: 20, // 标记的大小
// 图形的样式
itemStyle: {
color: '#d1a538'
},
// 系列中的数据内容数组, 数组项通常为具体的数据项
data: [{
name: '上海',
value: [121.472644, 31.231706, 2424]
}, {
name: '重庆',
value: [106.504962, 29.533155, 3102]
}, {
name: '江苏',
value: [118.767413, 32.041544, 8051]
}, {
name: '河北',
value: [114.502461, 38.045474, 7556]
}, {
name: '河南',
value: [113.665412, 34.757975, 9605]
}, {
name: '黑龙江',
value: [126.642464, 45.756967, 3773]
}, {
name: '新疆',
value: [87.617733, 43.792818, 2487]
}, {
name: '江西',
value: [115.892151, 28.676493, 4648]
}, {
name: '湖北',
value: [114.298572, 30.584355, 5917]
}, {
name: '甘肃',
value: [103.823557, 36.058039, 2637]
}, {
name: '内蒙古',
value: [111.670801, 40.818311, 2534]
}, {
name: '陕西',
value: [108.948024, 34.263161, 3864]
}, {
name: '吉林',
value: [125.3245, 43.886841, 2704]
}, {
name: '福建',
value: [119.306239, 26.075302, 3941]
}, {
name: '广东',
value: [113.280637, 23.125178, 11300]
}, {
name: '青海',
value: [101.778916, 36.623178, 603]
}, {
name: '四川',
value: [104.065735, 30.659462, 8341]
}, ]
}, {
type: 'effectScatter', // 类型
coordinateSystem: 'geo', // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'
// 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',
// 'pin', 'arrow', 'none'
symbol: 'pin',
// symbol: 'image://' + './img/111.png',
// 标记的大小, 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数
// (value: Array|number, params: Object) => number|Array
// 其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数
symbolSize: 20,
// 图形的样式
itemStyle: {
color: '#d1a538'
},
// 系列中的数据内容数组。数组项通常为具体的数据项
data: [{
name: '广东',
value: [113.280637, 23.125178, 11300]
}, {
name: '山东',
value: [117.000923, 36.675807, 10000]
}, {
name: '河南',
value: [113.665412, 34.757975, 9605]
}, {
name: '四川',
value: [104.065735, 30.659462, 8341]
}, {
name: '江苏',
value: [118.767413, 32.041544, 8051]
}, {
name: '河北',
value: [114.502461, 38.045474, 7556]
}]
}]
})
// 定时显示提示框和高亮效果
var index = -1
setInterval(function() {
// 隐藏提示框
chart.dispatchAction({
type: 'hideTip',
seriesIndex: 0,
dataIndex: index
})
// 显示提示框
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index + 1
})
// 取消高亮指定的数据图形
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: index
})
// 高亮指定的数据图形
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: index + 1
})
index++
if (index > 34) {
index = -1
}
}, 2000)
},
// 半园环形图
loadRingChart() {
var rigmyChart = echarts.init(document.getElementById('consume_pie'));
var option = {
tooltip: {
trigger: 'item',
},
"color": ["#5a6fc0", "#9dcb7f", "#f2ca6b", "#de6f6b", "transparent"],
"startAngle": 180,
series: [{
name: '商机线索总计',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
startAngle: 180,
center: ["50%", "70%"],
label: {
show: true,
formatter(param) {
return param.name + ' (' + param.percent * 2 + '%)';
}
},
data: [{
value: 1048,
name: '已匹配'
}, {
value: 735,
name: '已执行'
}, {
value: 580,
name: '正在匹配中'
}, {
value: 784,
name: '已过期'
}, {
value: 1048 + 735 + 580 + 784,
itemStyle: {
color: 'none',
decal: {
symbol: 'none'
}
},
label: {
show: false
}
}]
},
]
};
rigmyChart.setOption(option);
window.addEventListener('resize', function() {
rigmyChart.resize()
})
},
// 动态排序柱状图
cateChart() {
var newArr = [{
"cdate": "2023",
"cname": "上海,浙江,江苏,北京,广东,福建,山东,天津,四川",
"cut": "10.9,9.48,14,3.6,0.56,9.48,9.48,1.49,9.48"
}]
// 基于准备好的dom，初始化echarts实例
var catemyChart = echarts.init(document.getElementById('main'));
var updateFrequency = 300; // 数据更新速度
var years = [];
var startIndex = 0;
for (var i = 0; i < newArr.length; ++i) {
years.push(newArr[i])
}
// 获取第一个数据
var startYear = years[startIndex].cdate;
var startName = years[startIndex].cname.split(',');
var startCut = years[startIndex].cut.split(',');
var option = {
// 图标的上下左右边界
grid: {
top: "5%",
left: "5%",
right: "5%",
bottom: "5%",
containLabel: true, //是否包含坐标轴的文字
},
// x 轴相关
xAxis: {
max: 'dataMax',
splitLine: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
},
},
dataset: {
source: newArr
},
// y 轴数据
yAxis: {
type: 'category',
data: startName,
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
},
},
series: [{
type: 'bar',
barWidth: 10, // 柱的宽度
itemStyle: {
barBorderRadius: [0, 34, 34, 0], // 圆角
color: '#04bbff',
},
data: startCut,
}],
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
z: 0,
},
},
animationDuration: 0,
animationDurationUpdate: 1000,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
};
catemyChart.setOption(option);
window.addEventListener('resize', function() {
catemyChart.resize()
})
},
//坐标系中的柱状图
rigboxChart() {
var zztmyChart = echarts.init(document.getElementById('rigboxmain'));
var data = [
[5000, 10000, 6785.71],
[4000, 10000, 6825],
[3000, 6500, 4463.33],
[2500, 5600, 3793.83],
[2000, 4000, 3060],
[2000, 4000, 3222.33],
[2500, 4000, 3133.33],
[1800, 4000, 3100],
[1500, 1800, 1650]
];
var cities = ['河南', '浙江', '上海', '天津', '江苏', '福建', '广东', '四川', ];
var barHeight = 50;
var option = {
color: ['#5a6fc0'],
grid: {
top: "5%",
left: "5%",
right: "5%",
bottom: "5%",
containLabel: true, //是否包含坐标轴的文字
},
tooltip: {
trigger: 'item',
},
//径向轴的属性
angleAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#2462bd'
}
},
splitLine: {
lineStyle: {
color: '#2462bd'
}
},
axisLabel: {
color: '#fff'
},
data: cities
},
//极坐标系堆叠柱状
radiusAxis: {
axisLine: {
lineStyle: {
color: '#2462bd'
}
},
splitLine: {
lineStyle: {
color: '#2462bd'
}
},
axisLabel: {
color: '#fff'
}
},
//数据可视化polar极坐标系
polar: {},
series: [{
type: 'bar',
itemStyle: {
normal: {
color: 'transparent'
}
},
data: data.map(function(d) {
return d[0];
}),
//引入其他要素图层
coordinateSystem: 'polar',
stack: '最大最小值',
//坐标轴的标签是否响应和触发鼠标事件,默认不响应
silent: true
}, {
type: 'bar',
data: data.map(function(d) {
return d[1] - d[0];
}),
coordinateSystem: 'polar',
name: '会议室预定',
stack: '最大最小值'
}, {
type: 'bar',
itemStyle: {
normal: {
color: 'transparent'
}
},
data: data.map(function(d) {
return d[2] - barHeight;
}),
coordinateSystem: 'polar',
stack: '均值',
silent: true,
z: 10
}, {
type: 'bar',
data: data.map(function(d) {
return barHeight * 2
}),
coordinateSystem: 'polar',
name: '均值',
stack: '均值',
barGap: '-100%',
z: 10
}],
};
zztmyChart.setOption(option);
window.addEventListener('resize', function() {
zztmyChart.resize()
})
}
},
})
</script>
<style scoped>
body {
padding: 0;
margin: 0;
}
.homePage {
width: 100%;
background: url('./img/logobg-2/bj.png');
color: #fff;
display: flex;
background-size: 100% 100%;
flex-direction: column;
}
.main-title {
margin-top: 1.8rem;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
color: white;
}
.main-icon {
margin-right: 1rem;
background: url('./img/logobg-2/微信图片_20230626134942.png');
width: 3.5rem;
height: 3.5rem;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.center {
display: flex;
justify-content: space-between;
margin-top: 1rem;
margin-bottom: 1rem;
}
/* 左 */
.el-aside {
width: 30%;
}
.aside1 {
background: url('./img/logobg-2/业务数据汇总.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 1.5rem;
}
.aside1-nr {
height: 21.5rem;
width: 90%;
padding-top: 3rem;
padding-bottom: 4rem;
margin: auto;
}
.title-box {
display: flex;
align-items: center;
font-weight: bolder;
justify-content: space-between;
}
.tit-num {
display: inline-block;
width: 1.2rem;
background-image: linear-gradient(to bottom, #39b4f1, #0a4f72);
-webkit-background-clip: text;
color: transparent;
margin-right: 0.2rem;
text-align: center;
border: 2px solid #6b9ace;
border-image: linear-gradient(180deg, #39b4f1 0%, #127d9e 20%, #134863 99%) 2 2 2 2;
border-radius: 0.2rem;
}
.title {
margin-top: -0.5rem;
margin-left: 0.5rem;
}
.aside2 {
background: url('./img/logobg-2/客户信息统计.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 1.5rem;
}
.aside2-nr {
height: 22rem;
width: 90%;
margin: auto;
margin-bottom: 5rem;
}
.aside2title {
padding-top: 2.5rem;
font-weight: bolder;
}
/* 中 */
.center-center {
width: 40%;
}
.center-con {
background: url('./img/logobg-2/地图-1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 1.5rem;
}
.center-cha {
height: 41rem;
}
.center-bom {
background: url('./img/logobg-2/商机线索.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 1.5rem;
}
.cenbom-box {
width: 90%;
margin: auto;
}
.bomtitle {
margin-top: 1.4rem;
}
.cenbom {
display: flex;
align-items: center;
justify-content: space-between;
}
.cenbom-left {
width: 70%;
}
.el-table {
border-radius: 9px;
}
.el-table th {
background-color: #1746a6 !important;
color: #fff;
}
.el-table td {
background-color: #1746a6;
color: #fff;
}
.el-table th.el-table__cell {
border: 1px solid rgb(21, 184, 248);
}
.el-table td.el-table__cell {
border: 1px solid rgb(21, 184, 248);
}
.el-table tbody tr:hover>td {
background-color: #1746a6 !important
}
.el-table--border {
border: none;
}
.el-table th.el-table__cell.is-leaf {
border-bottom: none;
}
.el-table--border::after,
.el-table--group::after {
height: 0;
}
.el-table::before {
z-index: -1;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
background-color: #063570;
}
.el-table__body-wrapper::-webkit-scrollbar {
height: 6px;
opacity: 0.5;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: rgb(21, 184, 248);
}
.cenbom-rig {
width: 30%;
height: 10rem;
}
/* 右 */
.center-right {
width: 30%;
}
.right-box1 {
background: url('./img/logobg-2/新线索动态.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 1.5rem;
}
.rightbox1-nr {
height: 25rem;
width: 90%;
margin: auto;
margin-bottom: 4rem;
}
.rightbox1tle {
padding-top: 3.3rem;
margin-left: 1rem;
font-weight: bolder;
}
.right-box2 {
background: url('./img/logobg-2/会议.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 1.5rem;
}
.rightbox2-nr {
width: 90%;
margin: auto;
height: 23rem;
margin-bottom: 3rem;
}
.rightbox2tle {
font-weight: bolder;
padding-top: 1.2rem;
margin-left: 1.5rem;
}
</style>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<div class="homePage">
<div class="main-title">
<div class="main-icon"></div>
<h2>xxxxxxxxxx数据中心</h2>
</div>
<div class="center">
<!--左边 -->
<div class="el-aside">
<div class="aside1">
<div class="aside1-nr">
<div class="title">
业务数据汇总
</div>
<div class="yhlist">
<div class="yh-but">
<div class="yhbut-cha">
<div id="main" style="width: 100%;height: 100%;"></div>
</div>
<div class="yhbut-btn">
<el-button type="success" plain round size="small">线索数量</el-button>
</div>
</div>
<div class="yh-but">
<div class="yhbut-cha">
<div id="main1" style="width: 100%;height: 100%;"></div>
</div>
<div class="yhbut-btn">
<el-button type="success" plain round size="small">成交率</el-button>
</div>
</div>
<div class="yh-but">
<div class="yhbut-cha">
<div id="main2" style="width: 100%;height: 100%;"></div>
</div>
<div class="yhbut-btn">
<el-button type="success" plain round size="small">成交金额</el-button>
</div>
</div>
</div>
</div>
</div>
<div class="aside2">
<div class="aside2-nr">
<div class="aside2title">
客户信息统计
</div>
<div class="rig-tab">
<el-table :data="kuxxtjdata" style="width: 100%;" :row-class-name="tableRowClassName">
<el-table-column label="序号" type="index" align="center"></el-table-column>
<el-table-column label="姓名" prop="date" align="center"></el-table-column>
<el-table-column label="单位" prop="name" align="center"></el-table-column>
<el-table-column label="联系方式" prop="dh" align="center" width="120"></el-table-column>
</el-table>
</div>
</div>
</div>
</div>
<!-- 中间 -->
<div class="center-center">
<div class="center-con">
<div style="width:100%;
height: 44rem; " id='chart'></div>
<div class="center-bom">
<div>线索数量</div>
<div>成交率</div>
<div>成交金额</div>
</div>
</div>
</div>
<!--右边 -->
<div class="center-right">
<span style="color: rgb(199, 195, 195);position: absolute;top: 3rem;right: 3rem;">
<i class="el-icon-cloudy"></i>
{{ nowData }}
<span style="margin-left: 0.5rem;">{{nowTime}}</span></span>
<div class="right-box1">
<div class="rightbox1-nr">
<div class="rightbox1tle">
新线索动态
</div>
<div class="rig-tab">
<el-table :data="formdatalist" style="width: 100%;" :row-class-name="tableRowClassName">
<el-table-column label="序号" type="index" align="center"></el-table-column>
<el-table-column label="商机名称" prop="date" align="center"></el-table-column>
<el-table-column label="金额" prop="name" align="center"></el-table-column>
<el-table-column label="预计成交日期" prop="dh" align="center" width="120"></el-table-column>
<el-table-column label="状态" prop="rq" align="center"></el-table-column>
<el-table-column label="备注" prop="rnrs" align="center"></el-table-column>
</el-table>
</div>
</div>
</div>
<div class="right-box2">
<div class="rightbox2-nr">
<div class="rightbox2tle">
xxx预定
</div>
<div class="right2-lin">
<div class="riglin-box" v-for="(v,index) in lindata" :key="index">
<div class="linbox-left">
<div class="lin-r"></div>
<div> {{v.tit}}</div>
</div>
<div>{{v.time}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<script src="./china.js"></script>
<style>
.el-table .warning-row {
background: #092e75 !important;
}
.el-table,
.el-table__expanded-cell {
background-color: transparent;
}
.el-table tr {
background-color: transparent!important;
}
.el-table .cell {
background-color: transparent;
}
.cell {
color: #fff;
}
</style>
<script>
new Vue({
el: '#app',
data: function() {
return {
nowData: "", //时间
nowTime: "",
kuxxtjdata: [{
date: '小红',
name: '01',
dh: '13000000000',
}, {
date: '小红',
name: '01',
dh: '13000000000',
}, {
date: '小红',
name: '01',
dh: '13000000000',
}, {
date: '小红',
name: '01',
dh: '13000000000',
}, {
date: '小红',
name: '01',
dh: '13000000000',
}, {
date: '小红',
name: '01',
dh: '13000000000',
}, {
date: '小红',
name: '01',
dh: '13000000000',
}, {
date: '小红',
name: '01',
dh: '13000000000',
}],
formdatalist: [{
date: '001',
name: '40',
rnrs: '备注..',
dh: '2023.6.26',
rq: '正常',
}, {
date: '002',
name: '40',
rnrs: '备注..',
dh: '2023.6.26',
rq: '正常',
}, {
date: '003',
name: '40',
rnrs: '备注..',
dh: '2023.6.26',
rq: '正常',
}, {
date: '004',
name: '40',
rnrs: '备注..',
dh: '2023.6.26',
rq: '正常',
}, {
date: '005',
name: '40',
rnrs: '备注..',
dh: '2023.6.26',
rq: '正常',
}, {
date: '006',
name: '40',
rnrs: '备注..',
dh: '2023.6.26',
rq: '正常',
}, ],
lindata: [{
tit: '集团通知集团通知集团通知集团',
time: '2023-06-22'
}, {
tit: '集团通知集团通知集团通知集团',
time: '2023-06-22'
}, {
tit: '集团通知集团通知集团通知集团',
time: '2023-06-22'
}, {
tit: '集团通知集团通知集团通知集团',
time: '2023-06-22'
}, {
tit: '集团通知集团通知集团通知集团',
time: '2023-06-22'
}, {
tit: '集团通知集团通知集团通知集团',
time: '2023-06-22'
}, {
tit: '集团通知集团通知集团通知集团',
time: '2023-06-22'
}, {
tit: '集团通知集团通知集团通知集团',
time: '2023-06-22'
}, {
tit: '集团通知集团通知集团通知集团',
time: '2023-06-22'
}]
}
},
created() {
},
mounted() {
//时间
this.timer = setInterval(() => {
let date = new Date();
let year = date.getFullYear();
//使用三元表达式在小于10的前面加0，以达到格式统一：
let month =
date.getMonth() + 1 < 10 ?
"0" + (date.getMonth() + 1) :
date.getMonth() + 1;
let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
let hours =
date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
let minutes =
date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
let seconds =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
// 拼接
this.nowTime = hours + ":" + minutes + ":" + seconds;
this.nowData = year + "." + month + "." + day + " ";
}, 1000);
var _this = this
setTimeout(function() {
_this.contertain()
_this.yhmyChart()
_this.yhmyChart1()
_this.yhmyChart2()
}, 1000)
},
methods: {
tableRowClassName({
row,
rowIndex
}) {
if (rowIndex % 2 !== 0) {
return 'warning-row';
}
},
//圆环图
yhmyChart() {
var dom = document.getElementById('main');
var myChart = echarts.init(dom);
var option = {
tooltip: {
trigger: 'item',
},
color: ['#da1d3d', '#34c6a1', '#3e76ff', '#fe6bbb', '#fbb600'], //修改图表颜色
graphic: [{
type: 'text',
left: 'center',
top: 'center',
z: 10,
style: {
text: '8888条',
font: 'Microsoft YaHei',
fontSize: '14px',
lineHeight: 15,
fill: '#FFFFFF',
}
}],
series: [{
name: '线索数量',
type: 'pie',
radius: ['60%', '90%'],
avoidLabelOverlap: false,
label: {
show: false
},
itemStyle: {
borderRadius: 5,
borderColor: '#0b152e',
borderWidth: 4
},
data: [{
value: 200,
}, {
value: 300,
}, {
value: 400,
}, {
value: 100,
}, {
value: 500,
}, ]
}]
};
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
},
//圆环图
yhmyChart1() {
var dom1 = document.getElementById('main1');
var myChart1 = echarts.init(dom1);
var option = {
tooltip: {
trigger: 'item',
},
color: ['#da1d3d', '#34c6a1', '#3e76ff', '#fe6bbb', '#fbb600'], //修改图表颜色
graphic: [{
type: 'text',
left: 'center',
top: 'center',
z: 10,
style: {
text: '60%',
font: 'Microsoft YaHei',
fontSize: '14px',
lineHeight: 15,
fill: '#FFFFFF',
}
}],
series: [{
name: '成交率',
type: 'pie',
radius: ['60%', '90%'],
avoidLabelOverlap: false,
label: {
show: false,
},
itemStyle: {
borderRadius: 5,
borderColor: '#0b152e',
borderWidth: 4
},
data: [{
value: 20,
}, {
value: 30,
}, {
value: 40,
}, {
value: 10,
}, {
value: 50,
}, ]
}]
};
myChart1.setOption(option);
window.addEventListener("resize", function() {
myChart1.resize();
});
},
//圆环图2
yhmyChart2() {
var dom2 = document.getElementById('main2');
var myChart2 = echarts.init(dom2);
var option = {
tooltip: {
trigger: 'item',
},
color: ['#da1d3d', '#34c6a1', '#3e76ff', '#fe6bbb', '#fbb600'], //修改图表颜色
graphic: [{
type: 'text',
left: 'center',
top: 'center',
z: 10,
style: {
text: '5555元',
font: 'Microsoft YaHei',
fontSize: '14px',
lineHeight: 15,
fill: '#FFFFFF',
}
}],
series: [{
name: '成交金额',
type: 'pie',
radius: ['60%', '90%'],
avoidLabelOverlap: false,
label: {
show: false
},
itemStyle: {
borderRadius: 5,
borderColor: '#0b152e',
borderWidth: 4
},
data: [{
value: 200,
}, {
value: 300,
}, {
value: 400,
}, {
value: 100,
}, {
value: 500,
}, ]
}]
};
myChart2.setOption(option);
window.addEventListener("resize", function() {
myChart2.resize();
});
},
// 地图
contertain() {
// 基于准备好的dom，初始化echarts实例
var chart = echarts.init(document.getElementById('chart'))
// // 监听屏幕变化自动缩放图表
window.addEventListener('resize', function() {
chart.resize()
})
// 绘制图表
chart.setOption({
geo: {
map: 'china', // 地图类型
show: true, // 是否显示地理坐标系组件
// 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，
// 可以设置成 'scale' 或者 'move' 设置成 true 为都开启
roam: false,
// 图形上的文本标签
label: {
show: false // 是否显示对应地名
},
// 地图区域的多边形 图形样式
itemStyle: {
normal: {
borderColor: '#04bbff',
borderWidth: 2,
areaColor: {
type: 'linear-gradient',
x: 0,
y: 1500,
x2: 1000,
y2: 0,
colorStops: [{
offset: 0.5,
color: '#2066e0' // 0% 处的颜色
}, {
offset: 1,
color: '#092646' // 100% 处的颜色
}],
global: true // 缺省为 false
},
shadowColor: '#1456d1',
shadowOffsetX: 0,
shadowOffsetY: 8,
shadowBlur: 10
},
// 鼠标放上去高亮的样式
emphasis: {
areaColor: '#0c152f',
borderWidth: 0
}
},
// 高亮状态下的多边形和标签样式
emphasis: {
label: {
show: true, // 是否显示标签
color: '#fff' // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
},
itemStyle: {
areaColor: '#aeaeae' // 地图区域的颜色
}
},
},
tooltip: {
trigger: 'item',
},
series: [{
type: 'scatter', // 类型
coordinateSystem: 'geo', // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'
// 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',
// 'pin', 'arrow', 'none'
// symbol: 'none',
symbol: 'image://' + './img/111.png',
symbolSize: 20, // 标记的大小
// 图形的样式
itemStyle: {
color: '#d1a538'
},
// 系列中的数据内容数组, 数组项通常为具体的数据项
data: [{
name: '上海',
value: [121.472644, 31.231706, 2424]
}, {
name: '重庆',
value: [106.504962, 29.533155, 3102]
}, {
name: '江苏',
value: [118.767413, 32.041544, 8051]
}, {
name: '河北',
value: [114.502461, 38.045474, 7556]
}, {
name: '河南',
value: [113.665412, 34.757975, 9605]
}, {
name: '黑龙江',
value: [126.642464, 45.756967, 3773]
}, {
name: '新疆',
value: [87.617733, 43.792818, 2487]
}, {
name: '江西',
value: [115.892151, 28.676493, 4648]
}, {
name: '湖北',
value: [114.298572, 30.584355, 5917]
}, {
name: '甘肃',
value: [103.823557, 36.058039, 2637]
}, {
name: '内蒙古',
value: [111.670801, 40.818311, 2534]
}, {
name: '陕西',
value: [108.948024, 34.263161, 3864]
}, {
name: '吉林',
value: [125.3245, 43.886841, 2704]
}, {
name: '福建',
value: [119.306239, 26.075302, 3941]
}, {
name: '广东',
value: [113.280637, 23.125178, 11300]
}, {
name: '青海',
value: [101.778916, 36.623178, 603]
}, {
name: '四川',
value: [104.065735, 30.659462, 8341]
}, ]
}, {
type: 'effectScatter', // 类型
coordinateSystem: 'geo', // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'
// 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',
// 'pin', 'arrow', 'none'
symbol: 'pin',
// symbol: 'image://' + './img/111.png',
// 标记的大小, 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数
// (value: Array|number, params: Object) => number|Array
// 其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数
symbolSize: 20,
// 图形的样式
itemStyle: {
color: '#d1a538',
},
// 系列中的数据内容数组。数组项通常为具体的数据项
data: [{
name: '广东',
value: [113.280637, 23.125178, 11300]
}, {
name: '河南',
value: [113.665412, 34.757975, 9605]
}, {
name: '四川',
value: [104.065735, 30.659462, 8341]
}, {
name: '江苏',
value: [118.767413, 32.041544, 8051]
}, {
name: '河北',
value: [114.502461, 38.045474, 7556]
}]
}]
})
// 定时显示提示框和高亮效果
var index = -1
setInterval(function() {
// 隐藏提示框
chart.dispatchAction({
type: 'hideTip',
seriesIndex: 0,
dataIndex: index
})
// 显示提示框
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index + 1
})
// 取消高亮指定的数据图形
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: index
})
// 高亮指定的数据图形
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: index + 1
})
index++
if (index > 34) {
index = -1
}
}, 2000)
},
},
})
</script>
<style scoped>
body {
padding: 0;
margin: 0;
}
.homePage {
width: 100%;
background: url('./img/logobg-2/bj.png');
color: #fff;
background-size: 100% 100%;
display: flex;
flex-direction: column;
}
.main-title {
display: flex;
align-items: center;
justify-content: center;
padding-top: 0.6rem;
width: 100%;
color: white;
}
.main-icon {
margin-right: 1rem;
background: url('./img/logobg-2/微信图片_20230626134942.png');
width: 3.5rem;
height: 3.5rem;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.center {
display: flex;
justify-content: space-between;
margin-top: 1rem;
margin-bottom: 1rem;
}
/* 左 */
.el-aside {
width: 30%;
}
.aside1 {
background: url('./img/logobg-2/业务数据汇总.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 1.5rem;
}
.aside1-nr {
width: 90%;
margin: auto;
}
.yhlist {
margin-top: 0.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.title {
padding-top: 0.5rem;
margin-left: 0.5rem;
font-weight: bolder;
}
.yh-but {
width: 30%;
}
.yhbut-cha {
height: 7rem;
width: 100%;
}
.yhbut-btn {
text-align: center;
margin-bottom: 2rem;
}
.yhbut-btn>.el-button {
border: 1px solid #138b70;
box-shadow: 0 0 10px #138b70 inset;
background: none;
margin-top: 1rem;
color: white;
}
.aside2 {
background: url('./img/logobg-2/客户信息统计.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 1.5rem;
}
.aside2-nr {
width: 90%;
margin: auto;
}
.aside2title {
padding-top: 2.6rem;
font-weight: bolder;
}
/* 中 */
.center-center {
width: 40%;
}
.center-con {
background: url('./img/logobg-2/中间.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 1.5rem;
}
.center-bom {
width: 42%;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
/* 右 */
.center-right {
width: 30%;
}
.right-box1 {
background: url('./img/logobg-2/新线索动态.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 1.5rem;
}
.rightbox1-nr {
width: 90%;
margin: auto;
}
.rightbox1tle {
margin-left: 1rem;
margin-top: 2.2rem;
font-weight: bolder;
}
.rig-tab {
margin-top: 1rem;
margin-bottom: 1rem;
}
.el-table .el-table__cell {
padding: 8px 0;
}
.el-table th.el-table__cell {
background-color: #0f307e;
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border-bottom: none;
}
.el-table tbody tr:hover>td {
background-color: #1746a6 !important
}
.el-table--border::after,
.el-table--group::after {
height: 0;
}
.el-table::before {
z-index: -1;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
background-color: #063570;
}
.el-table__body-wrapper::-webkit-scrollbar {
height: 6px;
opacity: 0.5;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: rgb(21, 184, 248);
}
.right-box2 {
background: url('./img/logobg-2/会议.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 1.5rem;
}
.rightbox2-nr {
width: 90%;
margin: auto;
}
.right2-lin {
margin-top: 1rem;
font-size: 14px;
line-height: 1.8rem;
color: rgb(216, 213, 213);
}
.rightbox2tle {
margin-top: 0.3rem;
margin-left: 1rem;
font-weight: bolder;
}
.riglin-box {
overflow: hidden;
white-space: nowrap;
display: flex;
justify-content: space-between;
align-items: center;
}
.riglin-box:hover {
color: rgb(22, 202, 226);
}
.linbox-left {
width: 80%;
display: flex;
align-items: center;
}
.lin-r {
width: 0.4rem;
height: 0.4rem;
border-radius: 0.8rem;
background: rgb(22, 202, 226);
margin-right: 0.5rem;
}
</style>
</html>
永洪科技，致力于打造全球领先的数据技术厂商，具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)