大屏展示功能
parent
09017036ce
commit
3406c10a28
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 387 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -0,0 +1,65 @@
|
|||
@import '~iview/src/styles/index.less';
|
||||
|
||||
@primary-color: #75deef;
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
color: #6EDDF1;
|
||||
background: #14418E;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 15px;
|
||||
.title-gradient {
|
||||
display: inline-block;
|
||||
padding: 5px 14px;
|
||||
background: radial-gradient(55% 55% ellipse, rgba(7, 9, 34, .8) 60%, rgb(21, 67, 145));
|
||||
}
|
||||
}
|
||||
.angle1 {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-top: 1px solid #1C5AB3;
|
||||
border-left: 1px solid #1C5AB3;
|
||||
|
||||
}
|
||||
|
||||
.angle2 {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-top: 1px solid #1C5AB3;
|
||||
border-right: 1px solid #1C5AB3;
|
||||
|
||||
}
|
||||
|
||||
.angle3 {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-bottom: 1px solid #1C5AB3;
|
||||
border-left: 1px solid #1C5AB3;
|
||||
|
||||
}
|
||||
|
||||
.angle4 {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-bottom: 1px solid #1C5AB3;
|
||||
border-right: 1px solid #1C5AB3;
|
||||
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,7 @@
|
|||
export default {
|
||||
center:require('../assets/images/center.gif'),
|
||||
normal_bg:require('../assets/images/normal_bg.png'),
|
||||
normal_title:require('../assets/images/normal_title.png'),
|
||||
sensitive_bg:require('../assets/images/sensitive_bg.png'),
|
||||
sensitive_title:require('../assets/images/sensitive_title.png')
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
export default {
|
||||
install: function (Vue) {
|
||||
Vue.prototype.$debounce = function ( fn,delay){
|
||||
let timer = null //借助闭包
|
||||
return function() {
|
||||
if(timer){
|
||||
clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
|
||||
timer = setTimeout(fn,delay)
|
||||
}else{
|
||||
timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,234 @@
|
|||
<template>
|
||||
<div class="area"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "areaChart",
|
||||
props: [ 'config', 'selectRangeDate'],
|
||||
data() {
|
||||
return {
|
||||
myChart:null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setData(type) {
|
||||
let arr = [];
|
||||
switch (type) {
|
||||
case 'x':
|
||||
for (let i = 0; i < this.selectRangeDate.length; i++) {
|
||||
arr.push(this.selectRangeDate[i][1] + "." + this.selectRangeDate[i][2])
|
||||
}
|
||||
break;
|
||||
case 's' :
|
||||
for (let i = 0; i < this.selectRangeDate.length; i++) {
|
||||
arr.push((Math.random() * 250).toFixed(0))
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
return arr;
|
||||
},
|
||||
setSeriesData() {
|
||||
let arr = [];
|
||||
this.config.data.forEach(item=> {
|
||||
let obj = {
|
||||
name: item.name,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: "none",
|
||||
areaStyle: {
|
||||
opacity: 1,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: item.color[0] // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.4, color: item.color[0] // 40% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: item.color[1] // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
// offset: 0, color: item.color[0] // 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 0.4, color: item.color[0] // 0% 处的颜色
|
||||
// }, {
|
||||
// offset: 1, color: item.color[1] // 100% 处的颜色
|
||||
// }]), //背景渐变色
|
||||
// origin: 'start'
|
||||
},
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
},
|
||||
itemStyle: {
|
||||
color: item.color[0]
|
||||
},
|
||||
data: this.setData('s')
|
||||
}
|
||||
arr.push(obj)
|
||||
})
|
||||
return arr;
|
||||
},
|
||||
setChart() {
|
||||
let option = {
|
||||
title: {
|
||||
show: !!this.config.title,
|
||||
text: this.config.title,
|
||||
textStyle: {
|
||||
color: this.config.color,
|
||||
fontSize: 12,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
top: '12%',
|
||||
left: '38%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'none' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
backgroundColor: '#11367a',
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 10,
|
||||
},
|
||||
|
||||
formatter: function (params) {
|
||||
let str = params[0].name;
|
||||
params.forEach(item=> {
|
||||
str += `<br> ${item.seriesName}: ${item.value}`
|
||||
})
|
||||
return str
|
||||
}
|
||||
},
|
||||
legend:
|
||||
{
|
||||
top: this.config.title?'23%': '11%',
|
||||
left: 'center',
|
||||
itemWidth: 7,
|
||||
itemHeight:7,
|
||||
textStyle: {
|
||||
color: this.config.color,
|
||||
fontSize: 12
|
||||
},
|
||||
},
|
||||
grid:
|
||||
{
|
||||
top: this.config.title?'40%': '14%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis:
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: this.config.color,
|
||||
fontSize: 9,
|
||||
align: 'center'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1a3c58',
|
||||
width: 2,
|
||||
}
|
||||
},
|
||||
axisTick: {show: false},
|
||||
data: this.setData('x')
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 300,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: this.config.color,
|
||||
fontSize: 9,
|
||||
showMaxLabel: false,
|
||||
},
|
||||
axisTick: {
|
||||
length: 3
|
||||
},
|
||||
name: this.config.name[0],
|
||||
nameGap: -5,
|
||||
nameTextStyle: {
|
||||
color: this.config.color,
|
||||
fontSize: 9,
|
||||
align: 'right'
|
||||
},
|
||||
splitLine: {show: false}
|
||||
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 300,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
length: 3
|
||||
},
|
||||
axisLabel: {
|
||||
color: this.config.color,
|
||||
fontSize: 9,
|
||||
showMaxLabel: false,
|
||||
},
|
||||
name: this.config.name[1],
|
||||
nameTextStyle: {
|
||||
color: this.config.color,
|
||||
fontSize: 9,
|
||||
align: 'left'
|
||||
},
|
||||
nameGap: -5,
|
||||
splitLine: {show: false}
|
||||
},
|
||||
],
|
||||
series: this.setSeriesData()
|
||||
};
|
||||
if (this.selectRangeDate.length > 7) {
|
||||
option.xAxis.axisLabel.interval = 3;
|
||||
option.xAxis.axisLabel.showMaxLabel = false;
|
||||
option.xAxis.axisLabel.align = 'left';
|
||||
}
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.area {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,448 @@
|
|||
<template>
|
||||
<div class="main">
|
||||
<svg class="guideLine" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 783 500">
|
||||
<image x="5%" y="20" :xlink:href="$images.center" width="90%" height="100%"/>
|
||||
<image v-if='!status' x="250" y="320" :style="{opacity: number}" :xlink:href="$images.normal_bg" width="250"
|
||||
height="170"/>
|
||||
<image v-else id="textBox_1" x="220" y="110" :xlink:href="$images.sensitive_bg" width="300" height="170"/>
|
||||
<template>
|
||||
<g v-for="(item, index) in swiperData" :key="item.title">
|
||||
<image class="bg_img" :x="item.image.x" :y="item.image.y"
|
||||
:xlink:href="item.status?$images.sensitive_title:$images.normal_title" width="130"
|
||||
height="50"/>
|
||||
<foreignObject class="title_1" @mouseenter="onmouseenter" @mouseleave="onmouseleave" :x="item.pos.x" :y="item.pos.y" :id="'title_'+ (index + 1)" width="100" height="40">
|
||||
<div class="title-text-box" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<p :style="{color:item.status?'#FFDBDB':''}">
|
||||
<span class="titleText">{{ item.title }}</span>
|
||||
<Rate :show-text="false" disabled v-model="item.rate"></Rate>
|
||||
</p>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<foreignObject class="text" x="250" y="320" ref="textBox" width="250" height="170">
|
||||
<div class="text-box" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<div class="promptBox">
|
||||
<div class="promptTitle">{{item.title}}</div>
|
||||
<div class="psychologyContent">
|
||||
对当前模块的一些描述...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<path :id="'line_'+ (index + 1)" :class='item.path.className' :d="item.path.d" stroke="#AFE5FB" stroke-width="2"
|
||||
fill="none"/>
|
||||
</g>
|
||||
</template>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
selectRangeDate: Array,
|
||||
_width: Number
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer1: null,
|
||||
status: false,
|
||||
timer: null,
|
||||
rid: null,
|
||||
index: 0,
|
||||
number: 0,
|
||||
length: 0,
|
||||
frames: 0,
|
||||
isIE: false,
|
||||
swiperData: [
|
||||
{
|
||||
image: {
|
||||
x: 85,
|
||||
y: 354
|
||||
},
|
||||
status: false,
|
||||
rate:0,
|
||||
title: '标题一',
|
||||
pos: {
|
||||
x: 102,
|
||||
y:364
|
||||
},
|
||||
path: {
|
||||
d: 'M150,402 L150,432 250,432',
|
||||
className: 'swap1'
|
||||
}
|
||||
},
|
||||
{
|
||||
image: {
|
||||
x: 58,
|
||||
y: 224
|
||||
},
|
||||
status: false,
|
||||
rate:0,
|
||||
title: '标题二',
|
||||
pos: {
|
||||
x: 76,
|
||||
y:232
|
||||
},
|
||||
path: {
|
||||
d: 'M125,272 L125,337 250,337',
|
||||
className: 'swap2'
|
||||
}
|
||||
},
|
||||
{
|
||||
image: {
|
||||
x: 87,
|
||||
y: 110
|
||||
},
|
||||
status: false,
|
||||
rate:0,
|
||||
title: '标题三',
|
||||
pos: {
|
||||
x: 105,
|
||||
y:118
|
||||
},
|
||||
path: {
|
||||
d: 'M207,135 L260,135 260,322',
|
||||
className: 'swap3'
|
||||
}
|
||||
},
|
||||
{
|
||||
image: {
|
||||
x: 310,
|
||||
y: 40
|
||||
},
|
||||
status: false,
|
||||
rate:0,
|
||||
title: '标题四',
|
||||
pos: {
|
||||
x: 328,
|
||||
y: 49
|
||||
},
|
||||
path: {
|
||||
d: 'M319,66 L279,66 279,321',
|
||||
className: 'swap4'
|
||||
}
|
||||
},
|
||||
{
|
||||
image: {
|
||||
x: 522,
|
||||
y: 110
|
||||
},
|
||||
status: false,
|
||||
rate:0,
|
||||
title: '标题五',
|
||||
pos: {
|
||||
x: 538,
|
||||
y: 118
|
||||
},
|
||||
path: {
|
||||
d: 'M538,135 L485,135 485,322',
|
||||
className: 'swap3'
|
||||
}
|
||||
},
|
||||
{
|
||||
image: {
|
||||
x: 560,
|
||||
y: 224
|
||||
},
|
||||
status: false,
|
||||
rate:0,
|
||||
title: '标题六',
|
||||
pos: {
|
||||
x: 578,
|
||||
y: 230
|
||||
},
|
||||
path: {
|
||||
d: 'M625,272 L625,337 500,337',
|
||||
className: 'swap2'
|
||||
}
|
||||
},
|
||||
{
|
||||
image: {
|
||||
x: 538,
|
||||
y: 354
|
||||
},
|
||||
status: false,
|
||||
rate:0,
|
||||
title: '标题七',
|
||||
pos: {
|
||||
x: 555,
|
||||
y: 364
|
||||
},
|
||||
path: {
|
||||
d: 'M600,402 L600,432 500,432',
|
||||
className: 'swap1'
|
||||
}
|
||||
}
|
||||
],
|
||||
psychologicalRate: 0,
|
||||
speechRate: 0,
|
||||
internetPreferenceRate: 0,
|
||||
riskRate: 0,
|
||||
makeFriendRate: 0,
|
||||
entertainmentPreferenceRate: 0,
|
||||
consumptionCharacteristicsRate: 0,
|
||||
psychologicalStatus: false,
|
||||
speechStatus: false,
|
||||
internetPreferenceStatus: false,
|
||||
riskStatus: false,
|
||||
entertainmentPreferenceStatus: false,
|
||||
makeFriendStatus: false,
|
||||
consumptionCharacteristicsStatus: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// mouseenter
|
||||
onmouseenter(e) {
|
||||
document.querySelectorAll('.text').forEach(item=>item.style.opacity = 0);
|
||||
document.querySelectorAll('.swap1').forEach(item=>item.style.strokeDashoffset = 130);
|
||||
document.querySelectorAll('.swap2').forEach(item=>item.style.strokeDashoffset = 190);
|
||||
document.querySelectorAll('.swap3').forEach(item=>item.style.strokeDashoffset = 240);
|
||||
document.querySelectorAll('.swap4').forEach(item=>item.style.strokeDashoffset = 295);
|
||||
cancelAnimationFrame(this.rid);
|
||||
this.rid = null;
|
||||
clearTimeout(this.timer)
|
||||
this.timer = null;
|
||||
this.animation(Number(e.currentTarget.id.substr(e.currentTarget.id.length - 1, 1)), true);
|
||||
},
|
||||
//mouseleave
|
||||
onmouseleave() {
|
||||
this.animation(1, false);
|
||||
},
|
||||
frame() {
|
||||
cancelAnimationFrame(this.rid);
|
||||
this.rid = null;
|
||||
this.rid = requestAnimationFrame(this.frame);
|
||||
let line = document.querySelector("#line_" + this.index);
|
||||
line.style.strokeDashoffset = this.frames;
|
||||
line.getPointAtLength(this.length - this.frames);
|
||||
line.getPointAtLength((this.length - this.frames + 2) % this.length);
|
||||
if (this.index > 1) {
|
||||
line = document.querySelector("#line_" + (this.index - 1));
|
||||
this.$refs.textBox[this.index - 2].style.opacity = 0;
|
||||
line.style.strokeDashoffset = line.style.strokeDasharray;
|
||||
}
|
||||
if (this.index === 1) {
|
||||
for (let i = 2; i < 8; i++) {
|
||||
line = document.querySelector("#line_" + i);
|
||||
this.$refs.textBox[i - 1].style.opacity = 0;
|
||||
line.style.strokeDashoffset = line.style.strokeDasharray;
|
||||
}
|
||||
}
|
||||
this.$refs.textBox[this.index - 1].style.opacity = this.number;
|
||||
this.number += 5 / this.length;
|
||||
this.frames -= 5;
|
||||
if (this.frames <= -5) {
|
||||
cancelAnimationFrame(this.rid);
|
||||
this.rid = null;
|
||||
}
|
||||
},
|
||||
animation(i, boolean) {
|
||||
clearTimeout(this.timer);
|
||||
cancelAnimationFrame(this.rid);
|
||||
this.rid = null;
|
||||
this.timer = null;
|
||||
if (i > 7) {
|
||||
i = 1;
|
||||
}
|
||||
this.swiperData.forEach(item=>item.status = false);
|
||||
this.swiperData[i-1].status = true;
|
||||
const line = document.querySelector("#line_" + i);
|
||||
this.length = line.getTotalLength();
|
||||
line.style.strokeDasharray = this.length;
|
||||
line.style.strokeDashoffset = this.length;
|
||||
this.frames = this.length;
|
||||
this.index = i;
|
||||
this.number = 0;
|
||||
this.frame();
|
||||
if (!boolean) {
|
||||
clearTimeout(this.timer);
|
||||
this.timer = null;
|
||||
this.timer = setTimeout(() => {
|
||||
this.animation(i + 1, boolean);
|
||||
}, 5000);
|
||||
}
|
||||
},
|
||||
// 中心图
|
||||
setChart() {
|
||||
clearTimeout(this.timer1);
|
||||
clearTimeout(this.timer);
|
||||
cancelAnimationFrame(this.rid);
|
||||
this.frames = 0;
|
||||
this.rid = null;
|
||||
this.timer = null;
|
||||
this.timer1 = null
|
||||
this.timer1 = setTimeout(() => {
|
||||
this.animation(1, false);
|
||||
}, 5000);
|
||||
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectRangeDate: function () {
|
||||
this.setChart()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!window.SVGForeignObjectElement) {
|
||||
this.isIE = true;
|
||||
}
|
||||
},
|
||||
beforeDestroy() { // 离开页面动画初始化
|
||||
document.querySelectorAll('.text').forEach(item=>item.style.opacity = 0);
|
||||
document.querySelectorAll('.swap1').forEach(item=>item.style.strokeDashoffset = 130);
|
||||
document.querySelectorAll('.swap2').forEach(item=>item.style.strokeDashoffset = 190);
|
||||
document.querySelectorAll('.swap3').forEach(item=>item.style.strokeDashoffset = 240);
|
||||
document.querySelectorAll('.swap4').forEach(item=>item.style.strokeDashoffset = 295);
|
||||
cancelAnimationFrame(this.rid);
|
||||
this.rid = null;
|
||||
clearTimeout(this.timer)
|
||||
clearTimeout(this.timer1)
|
||||
this.timer = null;
|
||||
this.timer1 = null;
|
||||
this.swiperData.forEach(item=>item.status = false);
|
||||
},
|
||||
mounted() {
|
||||
this.setChart();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less" scoped>
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.guideLine {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
#textBox_1 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.title_1 {
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
.title-text-box {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
justify-content: center; //子元素水平居中
|
||||
align-items: center; //子元素垂直居中
|
||||
display: -webkit-flex;
|
||||
height: 100%;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
color: #A0E8FF;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
|
||||
.titleText {
|
||||
margin-left: -5px;
|
||||
font-size: 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/deep/ .ivu-rate {
|
||||
font-size: 14px;
|
||||
|
||||
.ivu-rate-star {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
opacity: 0;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
|
||||
.text-box {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
justify-content: center; //子元素水平居中
|
||||
align-items: center; //子元素垂直居中
|
||||
display: -webkit-flex;
|
||||
|
||||
.promptBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px 20px;
|
||||
|
||||
.promptTitle {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
color: #A0E8FF;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.psychologyContent {
|
||||
color: #AFE5FB;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
|
||||
div {
|
||||
line-height: 2em;
|
||||
|
||||
span {
|
||||
&:first-child {
|
||||
color: #FED723;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.swap1 {
|
||||
stroke-dasharray: 130;
|
||||
stroke-dashoffset: 130;
|
||||
}
|
||||
|
||||
.swap2 {
|
||||
stroke-dasharray: 190;
|
||||
stroke-dashoffset: 190;
|
||||
}
|
||||
|
||||
.swap3 {
|
||||
stroke-dasharray: 240;
|
||||
stroke-dashoffset: 240;
|
||||
}
|
||||
|
||||
.swap4 {
|
||||
stroke-dasharray: 295;
|
||||
stroke-dashoffset: 295;
|
||||
}
|
||||
|
||||
.circle-point {
|
||||
&:hover {
|
||||
fill: #000;
|
||||
}
|
||||
}
|
||||
|
||||
// .swap4{
|
||||
// stroke-dasharray: 110;
|
||||
// stroke-dashoffset: 110;
|
||||
// }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,477 @@
|
|||
<template>
|
||||
<div class="doubleArea"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
selectRangeDate: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setData(type) { // 数据模拟
|
||||
let arr = [];
|
||||
switch (type) {
|
||||
case 'x': // 设置横坐标 时间数据
|
||||
for (let i = 0; i < this.selectRangeDate.length; i++) {
|
||||
arr.push(this.selectRangeDate[i][0] + '.' + this.selectRangeDate[i][1] + '.' + this.selectRangeDate[i][2])
|
||||
}
|
||||
break;
|
||||
case 's':// 访问次数数据模拟
|
||||
for (let i = 0; i < this.selectRangeDate.length; i++) {
|
||||
arr.push((Math.random() * 6).toFixed(0))
|
||||
}
|
||||
break;
|
||||
case 'n': // 访问人数数据
|
||||
for (let i = 0; i < this.selectRangeDate.length; i++) {
|
||||
arr.push((Math.random() * 600).toFixed(0))
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return arr;
|
||||
|
||||
},
|
||||
// 上网行为分析
|
||||
setChart() {
|
||||
let option = {
|
||||
|
||||
legend: { // 图例信息
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 12,
|
||||
},
|
||||
right: '5%',
|
||||
top: '5%',
|
||||
},
|
||||
grid: [
|
||||
{ // 上区域图
|
||||
top: '20%',
|
||||
bottom: '45%',
|
||||
left: "8%",
|
||||
right: '5%',
|
||||
containLabel: false
|
||||
},
|
||||
{ // 下区域图
|
||||
top: '55%',
|
||||
bottom: '10%',
|
||||
left: "8%",
|
||||
right: '5%',
|
||||
containLabel: false
|
||||
|
||||
},
|
||||
],
|
||||
yAxis: [{ // 上区域图 y轴
|
||||
type: 'value',
|
||||
inverse: false,
|
||||
splitNumber: 3,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
name: "(次)",
|
||||
nameTextStyle: {
|
||||
color: "#75deef",
|
||||
fontSize: 10,
|
||||
padding: [0, 15, -10, 0]
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
|
||||
},
|
||||
axisLabel: {
|
||||
showMaxLabel: true,
|
||||
color: '#75deef',
|
||||
fontSize: 9,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
{ // 下区域图 y轴
|
||||
gridIndex: 1,
|
||||
splitNumber: 3,
|
||||
inverse: true,
|
||||
type: 'value',
|
||||
name: "(人)",
|
||||
nameLocation: 'end',
|
||||
nameTextStyle: {
|
||||
color: "#75deef",
|
||||
fontSize: 10,
|
||||
padding: [-10, 25, 0, 0]
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
position: 'bottom',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#75deef',
|
||||
fontSize: 9,
|
||||
fontWeight: 'normal',
|
||||
showMaxLabel: true,
|
||||
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{ // 上图x轴
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
z: 2,
|
||||
nameGap: 0,
|
||||
axisLine: {
|
||||
show: false,
|
||||
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
data: this.setData('x')
|
||||
|
||||
},
|
||||
{ // 下图x轴
|
||||
gridIndex: 1,
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
show: true,
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolSize: [4, 8],
|
||||
symbolOffset: [0, 8],
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
z: 2,
|
||||
axisTick: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
data: this.setData('x')
|
||||
},
|
||||
{ // 最下刻度轴
|
||||
gridIndex: 1,
|
||||
position: 'bottom',
|
||||
type: 'category',
|
||||
name: "日",
|
||||
nameLocation: 'end',
|
||||
nameTextStyle: {
|
||||
color: "#75deef",
|
||||
fontSize: 9,
|
||||
padding: [25, 0, 0, -25]
|
||||
},
|
||||
boundaryGap: false,
|
||||
axisLine: { // 轴线
|
||||
show: true,
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolSize: [4, 8],
|
||||
symbolOffset: [0, 8],
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
z: 2,
|
||||
axisTick: { // 刻度
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
axisLabel: { // 标签
|
||||
show: true,
|
||||
interval: 0,
|
||||
showMaxLabel: false,
|
||||
align: "left",
|
||||
color: '#75deef',
|
||||
fontSize: 9,
|
||||
fontWeight: 'normal',
|
||||
|
||||
},
|
||||
data: this.setData('x')
|
||||
|
||||
}
|
||||
],
|
||||
tooltip: { // hover 提示框
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
},
|
||||
backgroundColor: '#11367a',
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 10,
|
||||
},
|
||||
formatter: (data) => {
|
||||
if (data[0].componentIndex == 0) { // hover 到上图的时候
|
||||
return data[0].name + '<br>' + data[0].seriesName + ":" + data[0].value + "次" + '<br>' + data[1].seriesName + ":" + data[1].value + "次"
|
||||
} else {
|
||||
return data[0].name + '<br>' + data[0].seriesName + ":" + data[0].value + "人" + '<br>' + data[1].seriesName + ":" + data[1].value + "人"
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [ // 面积图
|
||||
{
|
||||
name: '数据1',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: 'rgba(250, 206, 21, 1)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1, color: 'rgba(253, 116, 48, 1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: .18,
|
||||
color: 'rgba(243, 121, 46, 1)'
|
||||
},
|
||||
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: 'rgba(250, 206, 21, 1)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1, color: 'rgba(253, 116, 48, 1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
data: this.setData('s')
|
||||
},
|
||||
{
|
||||
name: '数据2',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: 'rgba(51, 231, 252, 1)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1, color: 'rgba(11, 120, 227, 1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: .5,
|
||||
color: 'rgba(19, 34, 96, 1)'
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: 'rgba(51, 231, 252, 1)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1, color: 'rgba(11, 120, 227, 1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
data: this.setData('s')
|
||||
},
|
||||
{
|
||||
name: '数据1',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: 'rgba(250, 206, 21, 1)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1, color: 'rgba(253, 116, 48, 1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: .18,
|
||||
color: 'rgba(243, 121, 46, 1)'
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: 'rgba(250, 206, 21, 1)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1, color: 'rgba(253, 116, 48, 1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
data: this.setData('n')
|
||||
},
|
||||
|
||||
{
|
||||
name: '数据2',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: 'rgba(51, 231, 252, 1)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1, color: 'rgba(11, 120, 227, 1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: .5,
|
||||
color: 'rgba(19, 34, 96, 1)'
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: 'rgba(51, 231, 252, 1)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1, color: 'rgba(11, 120, 227, 1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
data: this.setData('n')
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
if (this.selectRangeDate.length > 7) { // 当x轴数据超过7个的时候 x轴刻度显示
|
||||
option.xAxis[2].axisLabel.interval = 3; // x轴刻度隔3个显示
|
||||
option.xAxis[2].axisLabel.showMaxLabel = false;
|
||||
|
||||
}
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectRangeDate: function () { // 检测selectRangeDate 数据变化
|
||||
this.setChart()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.doubleArea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<div class="webBar"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
data: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setData() {
|
||||
var max = Math.max.apply(null, this.data.value);
|
||||
var arr = []
|
||||
for (let i = 0; i < 6; i++) {
|
||||
arr.push(max / 10)
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
// 网站
|
||||
setChart() {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'none' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
backgroundColor: '#11367a',
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 10,
|
||||
},
|
||||
formatter: (params) => {
|
||||
params[1].number = this.data.number
|
||||
return params[1].name + "<br>" + params[1].seriesName + ":" + params[1].number + "/" + params[1].value + "人"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '4%',
|
||||
top: '5%',
|
||||
bottom: 10,
|
||||
|
||||
containLabel: true,
|
||||
},
|
||||
yAxis:
|
||||
{
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
position: 'left',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
margin: 13,
|
||||
fontSize: 10,
|
||||
color: '#75deef'
|
||||
},
|
||||
data: this.data.data
|
||||
},
|
||||
xAxis:
|
||||
{
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
}
|
||||
}
|
||||
,
|
||||
series: [
|
||||
{
|
||||
name: '辅助',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
barCategoryGap: 20,
|
||||
barWidth: 8,
|
||||
itemStyle: {
|
||||
color: 'rgba(0,0,0,0)'
|
||||
},
|
||||
data: this.setData()
|
||||
},
|
||||
{
|
||||
name: this.data.name,
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
barCategoryGap: 20,
|
||||
barWidth: 8,
|
||||
itemStyle: {
|
||||
color: { // 颜色线性渐变
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgb(' + this.data.color + ',0.1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgb(' + this.data.color + ',1)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
borderRadius: 5,
|
||||
},
|
||||
data: this.data.value
|
||||
},
|
||||
]
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
this.myChart.clear();
|
||||
this.myChart.resize();
|
||||
this.myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.setChart()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.webBar {
|
||||
float: left;
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,357 @@
|
|||
<template>
|
||||
<div class="popularBar"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'popularBar',
|
||||
data() {
|
||||
return {
|
||||
myChart:null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setOptionData() {
|
||||
let nameData = ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '其他'];
|
||||
let data = [45, 33, 13, 25, 30, 35, 45];
|
||||
let colorList = ['#2871ea', '#fbe831', '#2ea5fe', '#fc662f', '#9f56f0', '#bf232c', '#64cef2'];
|
||||
let arr = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let obj = {
|
||||
name: nameData[i],
|
||||
value: data[i],
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: colorList[i] // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#922aea' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
}
|
||||
arr.push(obj)
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
setChart() {
|
||||
let option = {
|
||||
grid: [{
|
||||
top: '10%',
|
||||
bottom: '15%',
|
||||
right: '5%',
|
||||
left: '55.5%'
|
||||
},
|
||||
{
|
||||
top: '10%',
|
||||
bottom: '15%',
|
||||
right: '52.5%',
|
||||
left: '8%'
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'none' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
backgroundColor: '#11367a',
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 10,
|
||||
},
|
||||
formatter: (params) => {
|
||||
if (params[5].seriesName == '人数') {
|
||||
return params[5].name + ':' + params[5].value + '人'
|
||||
} else {
|
||||
return params[5].name + ':' + params[5].value + '次'
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
data: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '其他'],
|
||||
axisTick: {
|
||||
show: true,
|
||||
inside: true,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
fontSize: 10,
|
||||
margin: 4,
|
||||
inside: true,
|
||||
color: 'rgb(113,227,247)'
|
||||
}
|
||||
},
|
||||
{
|
||||
data: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '其他'],
|
||||
gridIndex: 1,
|
||||
position: 'right',
|
||||
axisTick: {
|
||||
show: true,
|
||||
inside: true,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
fontSize: 10,
|
||||
margin: 4,
|
||||
inside: true,
|
||||
color: 'rgb(113,227,247)'
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxis: [{
|
||||
type: 'value',
|
||||
|
||||
splitLine: {show: false},
|
||||
axisTick: {show: true},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#75deef',
|
||||
fontSize: 9,
|
||||
showMaxLabel: false,
|
||||
},
|
||||
name: '(人)',
|
||||
nameGap: -5,
|
||||
nameTextStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 9,
|
||||
align: 'left',
|
||||
padding: [0, 0, -24, 0]
|
||||
},
|
||||
max: 60,
|
||||
splitNumber: 6,
|
||||
min: 10,
|
||||
scale: true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
inverse: true,
|
||||
splitLine: {show: false},
|
||||
axisTick: {show: true},
|
||||
gridIndex: 1,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#75deef',
|
||||
fontSize: 9,
|
||||
showMaxLabel: false,
|
||||
},
|
||||
name: '(次)',
|
||||
nameGap: -10,
|
||||
nameTextStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 9,
|
||||
align: 'right',
|
||||
padding: [0, 0, -24, 0]
|
||||
},
|
||||
max: 60,
|
||||
splitNumber: 7,
|
||||
min: 10,
|
||||
scale: true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '辅助',
|
||||
type: 'bar',
|
||||
stack: 'a',
|
||||
barWidth: 5,
|
||||
itemStyle: {
|
||||
color: 'rgba(0,0,0,0)'
|
||||
},
|
||||
data: [15, 15, 15, 15, 15, 15, 15]
|
||||
},
|
||||
{
|
||||
name: '辅助',
|
||||
type: 'bar',
|
||||
stack: 'a',
|
||||
barWidth: 5,
|
||||
itemStyle: {
|
||||
color: 'rgba(0,0,0,0)'
|
||||
},
|
||||
data: [13, 13, 13, 13, 13, 13, 13]
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
stack: 'a',
|
||||
silent: true,
|
||||
barWidth: 5,
|
||||
barGap: '-100%', // Make series be overlap
|
||||
data: [50, 50, 50, 50, 50, 50, 50],
|
||||
itemStyle: {
|
||||
color: '#242346'
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
name: '辅助',
|
||||
type: 'bar',
|
||||
stack: 'b',
|
||||
barWidth: 5,
|
||||
itemStyle: {
|
||||
color: 'rgba(0,0,0,0)'
|
||||
},
|
||||
data: [15, 15, 15, 15, 15, 15, 15]
|
||||
},
|
||||
{
|
||||
name: '辅助',
|
||||
type: 'bar',
|
||||
stack: 'b',
|
||||
barWidth: 5,
|
||||
itemStyle: {
|
||||
color: '#c0232a'
|
||||
},
|
||||
data: [13, 13, 13, 13, 13, 13, 13]
|
||||
},
|
||||
{
|
||||
name: '人数',
|
||||
type: 'bar',
|
||||
barWidth: 5,
|
||||
stack: 'b',
|
||||
barCategoryGap: 20,
|
||||
z: 10,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}',
|
||||
position: 'insideBottomLeft',
|
||||
offset: [-10, 0],
|
||||
fontSize: 12,
|
||||
color: '#75deef'
|
||||
},
|
||||
data: this.setOptionData(),
|
||||
|
||||
},
|
||||
{
|
||||
name: '辅助',
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
type: 'bar',
|
||||
stack: 'c',
|
||||
barWidth: 5,
|
||||
itemStyle: {
|
||||
color: 'rgba(0,0,0,0)'
|
||||
},
|
||||
data: [15, 15, 15, 15, 15, 15, 15]
|
||||
},
|
||||
{
|
||||
name: '辅助',
|
||||
type: 'bar',
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
stack: 'c',
|
||||
barWidth: 5,
|
||||
itemStyle: {
|
||||
color: 'rgba(0,0,0,0)'
|
||||
},
|
||||
data: [13, 13, 13, 13, 13, 13, 13]
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
stack: 'c',
|
||||
silent: true,
|
||||
barWidth: 5,
|
||||
barGap: '-100%', // Make series be overlap
|
||||
data: [50, 50, 50, 50, 50, 50, 50],
|
||||
itemStyle: {
|
||||
color: '#242346'
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
name: '辅助',
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
type: 'bar',
|
||||
stack: 'd',
|
||||
barWidth: 5,
|
||||
itemStyle: {
|
||||
color: 'rgba(0,0,0,0)'
|
||||
},
|
||||
data: [15, 15, 15, 15, 15, 15, 15]
|
||||
},
|
||||
{
|
||||
name: '辅助',
|
||||
type: 'bar',
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
stack: 'd',
|
||||
barWidth: 5,
|
||||
itemStyle: {
|
||||
color: '#c0232a'
|
||||
},
|
||||
data: [13, 13, 13, 13, 13, 13, 13]
|
||||
},
|
||||
{
|
||||
name: '次数',
|
||||
type: 'bar',
|
||||
barWidth: 5,
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
stack: 'd',
|
||||
barCategoryGap:20,
|
||||
z: 10,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}',
|
||||
position: 'insideBottomRight',
|
||||
offset: [10, 0],
|
||||
fontSize: 12,
|
||||
color: '#75deef'
|
||||
},
|
||||
data: this.setOptionData(),
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.popularBar {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<div class="ring"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
data: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setChart() {
|
||||
let option = {
|
||||
title: {
|
||||
text: '【' + this.data.title + '】',
|
||||
top: 20,
|
||||
x: 'center',
|
||||
textStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 14,
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{b}: {c} ({d}%)",
|
||||
backgroundColor: '#11367a',
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.data.title,
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center: ['50%', '55%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
fontSize: 10,
|
||||
color: '#75deef'
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 8,
|
||||
length2: 5,
|
||||
lineStyle: {
|
||||
color: '#303851'
|
||||
}
|
||||
},
|
||||
data: this.data.data
|
||||
}
|
||||
]
|
||||
};
|
||||
if (!this.myChart) this.myChart= this.$echarts(this.$el);
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ring {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,438 @@
|
|||
<template>
|
||||
<div class="lines">
|
||||
<div class="switchButton">
|
||||
<a :class="{'active':value==1}" @click="handleSelect(1)">月</a><a :class="{'active':value==2}"
|
||||
@click="handleSelect(2)">日</a>
|
||||
</div>
|
||||
<div id="bottom_1">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
data() {
|
||||
return {
|
||||
value: 2,
|
||||
xAxisData: [],
|
||||
seriesData: [],
|
||||
selected: {},
|
||||
legendData: [],
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelect(val) {
|
||||
this.xAxisData = [];
|
||||
this.seriesData = [];
|
||||
this.legendData = [];
|
||||
this.selected = {};
|
||||
this.value = val;
|
||||
let curYear = new Date().getFullYear();
|
||||
let curMonth = new Date().getMonth();
|
||||
|
||||
let colorList = ['#bf232a', '#feed2c', '#2c7bfe', '#feac2c', '#ff7b7e', '#2cd9fe', '#a262f2', '#2ca8fe'];
|
||||
if (val == 1) {
|
||||
let year = [curYear - 1, curYear];
|
||||
for (let i = 0; i < 12; i++) {
|
||||
this.xAxisData.push((i + 1) + '月');
|
||||
}
|
||||
for (let i = 0; i < year.length; i++) {
|
||||
this.legendData.push(year[i] + '年');
|
||||
let obj = {
|
||||
name: year[i] + '年',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
smooth: false,
|
||||
itemStyle: {
|
||||
color: colorList[i % 8]
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: colorList[i % 8],
|
||||
},
|
||||
data: []
|
||||
}
|
||||
for (let j = 0; j < 12; j++) {
|
||||
obj.data.push((Math.random() * 300).toFixed(0));
|
||||
}
|
||||
let obj1 = {
|
||||
name: year[i] + '年',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
smooth: false,
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: colorList[i % 8]
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: colorList[i % 8],
|
||||
},
|
||||
data: []
|
||||
}
|
||||
for (let j = 0; j < 12; j++) {
|
||||
obj1.data.push((Math.random() * 300).toFixed(0));
|
||||
}
|
||||
this.seriesData.push(obj);
|
||||
this.seriesData.push(obj1);
|
||||
}
|
||||
|
||||
} else {
|
||||
let dateLength = new Date(curYear, curMonth, 0).getDate();
|
||||
for (let i = 0; i < dateLength; i++) {
|
||||
this.xAxisData.push((i + 1) + '号');
|
||||
|
||||
}
|
||||
for (let i = 0; i < 12; i++) {
|
||||
this.legendData.push((i + 1) + '月');
|
||||
this.selected[(i + 1) + '月'] = false;
|
||||
if (i < 4) {
|
||||
this.selected[(i + 1) + '月'] = true;
|
||||
}
|
||||
let obj = {
|
||||
name: (i + 1) + '月',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
smooth: false,
|
||||
itemStyle: {
|
||||
color: colorList[i % 8]
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: colorList[i % 8],
|
||||
},
|
||||
data: []
|
||||
}
|
||||
for (let j = 0; j < dateLength; j++) {
|
||||
obj.data.push((Math.random() * 300).toFixed(0));
|
||||
}
|
||||
let obj1 = {
|
||||
name: (i + 1) + '月',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
smooth: false,
|
||||
itemStyle: {
|
||||
color: colorList[i % 8]
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: colorList[i % 8],
|
||||
},
|
||||
data: []
|
||||
}
|
||||
for (let j = 0; j < dateLength; j++) {
|
||||
obj1.data.push((Math.random() * 300).toFixed(0));
|
||||
}
|
||||
|
||||
this.seriesData.push(obj);
|
||||
this.seriesData.push(obj1);
|
||||
}
|
||||
|
||||
}
|
||||
this.setChart()
|
||||
},
|
||||
// 金钱交易分析
|
||||
setChart() {
|
||||
let option = {
|
||||
title: [
|
||||
{
|
||||
text: '【交易笔数分析】',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#75deef',
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
top: '24%',
|
||||
left: '20%'
|
||||
},
|
||||
{
|
||||
text: '【交易金额分析】',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#75deef',
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
top: '24%',
|
||||
right: '12%'
|
||||
},
|
||||
],
|
||||
grid: [
|
||||
{
|
||||
show: false,
|
||||
left: '2%',
|
||||
top: '38%',
|
||||
right: '51%',
|
||||
bottom: 0,
|
||||
containLabel: true,
|
||||
},
|
||||
{
|
||||
show: false,
|
||||
left: '51%',
|
||||
top: "38%",
|
||||
bottom: 0,
|
||||
right: '2%',
|
||||
containLabel: true,
|
||||
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'none',
|
||||
|
||||
},
|
||||
backgroundColor: '#11367a',
|
||||
formatter: (params) => {
|
||||
let seriesId = params.seriesId.substr(params.seriesId.length - 1, 1)
|
||||
if (seriesId == 0) {
|
||||
return params.seriesName + "/" + params.name + "<br>" + "交易笔数:" + params.value + '笔'
|
||||
} else {
|
||||
return params.seriesName + "/" + params.name + "<br>" + "交易金额:" + params.value + '元'
|
||||
}
|
||||
|
||||
},
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
top: '10%',
|
||||
textStyle: {
|
||||
color: '#75deef',
|
||||
padding: [3, 0, 0, 0],
|
||||
fontSize: 12
|
||||
},
|
||||
pageTextStyle: {
|
||||
color: '#75deef'
|
||||
},
|
||||
pageIconSize: 10,
|
||||
pageIconColor: '#75deef',
|
||||
itemWidth: 12,
|
||||
itemHeight: 7,
|
||||
right: "15%",
|
||||
left: '15%',
|
||||
selected: this.selected,
|
||||
data: this.legendData
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: this.xAxisData,
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
fontSize: 9,
|
||||
color: '#75deef',
|
||||
interval: 0,
|
||||
showMaxLabel: true,
|
||||
showMinLabel: true,
|
||||
formatter: (value, index) => {
|
||||
if (this.value == 1) {
|
||||
if (index % 2 == 1) {
|
||||
return value
|
||||
}
|
||||
} else {
|
||||
if ((index + 1) % 5 == 0) {
|
||||
return value
|
||||
}
|
||||
}
|
||||
if (index == 0) {
|
||||
return value
|
||||
}
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
inside: true
|
||||
}
|
||||
},
|
||||
{
|
||||
gridIndex: 1,
|
||||
type: 'category',
|
||||
data: this.xAxisData,
|
||||
axisLabel: {
|
||||
fontSize: 9,
|
||||
color: '#75deef',
|
||||
interval: 0,
|
||||
showMaxLabel: true,
|
||||
showMinLabel: true,
|
||||
formatter: (value, index) => {
|
||||
if (this.value == 1) {
|
||||
if (index % 2 == 1) {
|
||||
return value
|
||||
}
|
||||
} else {
|
||||
if ((index + 1) % 5 == 0) {
|
||||
return value
|
||||
}
|
||||
}
|
||||
if (index == 0) {
|
||||
return value
|
||||
}
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
inside: true
|
||||
}
|
||||
},
|
||||
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: 300,
|
||||
splitNumber: 5,
|
||||
axisLabel: {
|
||||
showMaxLabel: false,
|
||||
fontSize: 9,
|
||||
color: '#75deef'
|
||||
},
|
||||
name: '(笔)',
|
||||
nameGap: -5,
|
||||
nameTextStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 9,
|
||||
align: 'right',
|
||||
padding: [0, 6, 0, 0]
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
length: 3,
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
gridIndex: 1,
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 300,
|
||||
interval: 50,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
showMaxLabel: false,
|
||||
fontSize: 9,
|
||||
color: '#75deef'
|
||||
},
|
||||
name: '(元)',
|
||||
nameGap: -5,
|
||||
nameTextStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 9,
|
||||
align: 'right',
|
||||
padding: [0, 6, 0, 0]
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
length: 3,
|
||||
}
|
||||
},
|
||||
],
|
||||
series: this.seriesData
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(document.getElementById('bottom_1'));
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
this.myChart.on('legendselectchanged', (params) => {
|
||||
let arr = [];
|
||||
for (let i in params.selected) {
|
||||
if (params.selected[i] == true) {
|
||||
arr.push(params.selected[i])
|
||||
}
|
||||
}
|
||||
if (arr.length > 4) {
|
||||
this.$Modal.error({
|
||||
content: "<p>当前最多显示4个图例</p>"
|
||||
});
|
||||
this.myChart.dispatchAction({
|
||||
type: 'legendUnSelect',
|
||||
// 图例名称
|
||||
name: params.name
|
||||
})
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.handleSelect(this.value);
|
||||
// this.setChart ();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.lines {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
#bottom_1 {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
|
||||
.switchButton {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
right: 10px;
|
||||
top: 15px;
|
||||
border: 1px solid #028bff;
|
||||
border-radius: 5px;
|
||||
padding: 0;
|
||||
|
||||
.active {
|
||||
background: #0454a1;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
padding: 1px 8px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<template>
|
||||
<div class="pieMain"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
data: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 交易支出 饼图
|
||||
setChart() {
|
||||
let option = {
|
||||
title: {
|
||||
text: '【' + this.data.title + '】',
|
||||
x: 'center',
|
||||
top: 0,
|
||||
textStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 12,
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{b} : {c} ({d}%)",
|
||||
backgroundColor: '#11367a',
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
startAngle: 160,
|
||||
radius: [0, '30%'],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
fontSize: 10,
|
||||
},
|
||||
center: ['50%', '60%'],
|
||||
data: this.data.data,
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
startAngle: 160,
|
||||
radius: ['52%', '72%'],
|
||||
labelLine: {
|
||||
lineStyle: {
|
||||
color: '#444b62',
|
||||
|
||||
},
|
||||
length: 5,
|
||||
length2: 5,
|
||||
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
color: '#fff',
|
||||
show: true,
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
position: 'outside',
|
||||
borderRadius: 4,
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
padding: 0,
|
||||
backgroundColor: '#183566',
|
||||
formatter: "{b}{c}笔/{d}%"
|
||||
},
|
||||
center: ['50%', '60%'],
|
||||
data: this.data.data1
|
||||
}
|
||||
]
|
||||
};
|
||||
if(!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
|
||||
this.myChart.setOption(option);
|
||||
let obj = {
|
||||
type: 'highlight',
|
||||
name: []
|
||||
};
|
||||
for (let i = 0; i < this.data.data.length - 1; i++) {
|
||||
obj.name.push(this.data.data[i].name)
|
||||
}
|
||||
this.myChart.dispatchAction(obj);
|
||||
this.myChart.on('mouseout', function () {
|
||||
this.myChart.dispatchAction(obj);
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.setChart();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.pieMain {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<div class="behaviorBar"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
data: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setChart() {
|
||||
let option = {
|
||||
title: {
|
||||
text: '【柱图数据标题】',
|
||||
textStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 12,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
top: '5%',
|
||||
left: '31%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'none' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
backgroundColor: '#11367a',
|
||||
formatter: "{b}:{c1}",
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
grid:
|
||||
{
|
||||
top: '25%',
|
||||
left: '1%',
|
||||
right: '4%',
|
||||
bottom: '4%',
|
||||
containLabel: true,
|
||||
|
||||
},
|
||||
xAxis:
|
||||
{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: '#75deef',
|
||||
fontSize: 9,
|
||||
showMinLabel: true
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#1a3c58',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
axisTick: {show: false},
|
||||
|
||||
data: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7', '数据8']
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 300,
|
||||
axisLabel: {
|
||||
color: '#75deef',
|
||||
fontSize: 9,
|
||||
showMaxLabel: false,
|
||||
},
|
||||
name: '(个)',
|
||||
nameGap: -5,
|
||||
nameTextStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 9,
|
||||
align: 'right',
|
||||
padding: [0, 6, 0, 0]
|
||||
},
|
||||
axisTick: {
|
||||
length: 3
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: {show: false}
|
||||
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '辅助',
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
color: "#252448",
|
||||
},
|
||||
data: [300, 300, 300, 300, 300, 300, 300, 300]
|
||||
},
|
||||
{
|
||||
name: '数据',
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
barGap: '-100%',
|
||||
|
||||
data: this.data
|
||||
},
|
||||
]
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart()
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.behaviorBar {
|
||||
height: 45%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<div class="funnel"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 手机安全分析
|
||||
setChart() {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{b} : {c}",
|
||||
backgroundColor: '#11367a',
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
|
||||
legend: {
|
||||
top: '25%',
|
||||
right: "7%",
|
||||
orient: "vertical",
|
||||
itemWidth: 0,
|
||||
itemGap: 27,
|
||||
textStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 14
|
||||
},
|
||||
data: ['数据1', '数据2', '数据3', '数据4', '数据5']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '预期',
|
||||
type: 'funnel',
|
||||
left: '6%',
|
||||
width: '60%',
|
||||
height: '75%',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 0,
|
||||
opacity: .7,
|
||||
color: function (params) {
|
||||
|
||||
var colorList = [
|
||||
'#2c7afc', '#bd2229', '#a262f2', '#fe672c', '#27fcfe'
|
||||
];
|
||||
return colorList[params.dataIndex];
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 100, name: '数据1'},
|
||||
{value: 80, name: '数据2'},
|
||||
{value: 60, name: '数据3'},
|
||||
{value: 40, name: '数据4'},
|
||||
{value: 20, name: '数据5'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
type: 'funnel',
|
||||
left: '6%',
|
||||
height: '75%',
|
||||
width: '60%',
|
||||
maxSize: '60%',
|
||||
z: 3,
|
||||
label: {
|
||||
position: 'inside',
|
||||
formatter: '{c}个',
|
||||
color: '#fff'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
position: 'inside',
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: .5,
|
||||
borderWidth: 0,
|
||||
color: function (params) {
|
||||
var colorList = [
|
||||
'rgb(44,123,254)', 'rgb(194,35,42)', 'rgb(162,98,242)', 'rgb(254,103,44)', 'rgb(44,252,254)'
|
||||
];
|
||||
return colorList[params.dataIndex];
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 100, name: '数据1'},
|
||||
{value: 80, name: '数据2'},
|
||||
{value: 60, name: '数据3'},
|
||||
{value: 40, name: '数据4'},
|
||||
{value: 20, name: '数据5'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
if(!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.setChart()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.funnel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,438 @@
|
|||
<template>
|
||||
<div style="height:100%;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
data() {
|
||||
return {
|
||||
myChart: null,
|
||||
seriesData: [
|
||||
{name: '分类1', value: 380, data: [3600, 7200, 4800, 9000, 5200, 1800, 2400, 600]},
|
||||
{name: '分类2', value: 300, data: [2800, 5800, 3600, 7000, 6400, 3600, 5400, 4600]},
|
||||
{name: '分类3', value: 240, data: [2600, 3200, 5800, 2000, 3200, 5800, 7400, 2600]},
|
||||
{name: '分类4', value: 200, data: [1600, 4200, 2800, 1000, 7200, 5800, 3400, 5600]},
|
||||
{name: '分类5', value: 150, data: [5600, 6200, 6800, 3000, 1200, 5800, 4400, 2500]},
|
||||
{name: '分类6', value: 100, data: [6600, 8200, 5800, 4000, 2200, 3800, 7400, 3600]},
|
||||
{name: '分类7', value: 100, data: [7600, 1200, 3800, 7000, 1200, 3800, 5400, 2600]},
|
||||
{name: '分类8', value: 50, data: [6600, 1200, 2800, 3000, 6200, 5800, 4400, 1600]}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setOptionData() {
|
||||
let colorList = ['#2c7bfe', '#c2232a', '#feed2c', '#a262f2', '#62d5f2', '#fe672c', '#2c7bfe', '#69f262'];
|
||||
let arr = [];
|
||||
for (let i = 0; i < this.seriesData.length; i++) {
|
||||
let values = [0, 0, 0, 0, 0, 0, 0, 0];
|
||||
values.splice(i, 1, this.seriesData[i].value);
|
||||
let obj = {
|
||||
name: this.seriesData[i].name,
|
||||
type: 'bar',
|
||||
z: 3,
|
||||
barWidth: 10,
|
||||
barGap: '-100%',
|
||||
itemStyle: {
|
||||
color: colorList[i]
|
||||
},
|
||||
data: values
|
||||
}
|
||||
|
||||
arr.push(obj);
|
||||
}
|
||||
for (let i = 0; i < this.seriesData.length; i++) {
|
||||
let obj = {
|
||||
type: 'line',
|
||||
name: this.seriesData[i].name,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
symbolSize: 4,
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 3,
|
||||
data: this.seriesData[i].data,
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
itemStyle: {
|
||||
color: colorList[i]
|
||||
}
|
||||
};
|
||||
let obj1 = {
|
||||
type: 'line',
|
||||
name: this.seriesData[i].name,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
smooth: true,
|
||||
xAxisIndex: 3,
|
||||
yAxisIndex: 5,
|
||||
data: this.seriesData[i].data,
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
itemStyle: {
|
||||
color: colorList[i]
|
||||
}
|
||||
};
|
||||
|
||||
arr.push(obj);
|
||||
arr.push(obj1);
|
||||
}
|
||||
let arr1 = [
|
||||
{
|
||||
name: '辅助',
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
barGap: '-100%',
|
||||
itemStyle: {
|
||||
color: '#252448'
|
||||
},
|
||||
data: [500, 500, 500, 500, 500, 500, 500, 500]
|
||||
},
|
||||
{
|
||||
name: '辅助',
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
barGap: '-100%',
|
||||
itemStyle: {
|
||||
color: '#252448'
|
||||
},
|
||||
data: [500, 500, 500, 500, 500, 500, 500]
|
||||
},
|
||||
{
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
type: 'bar',
|
||||
z: 3,
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
color: '#2c7bfe'
|
||||
},
|
||||
data: [390, 330, 280, 220, 160, 100, 40]
|
||||
},
|
||||
]
|
||||
arr = arr.concat(arr1);
|
||||
|
||||
return arr;
|
||||
},
|
||||
/**
|
||||
* 时间秒数格式化
|
||||
* @param s 时间戳（单位：秒）
|
||||
* @returns {*} 格式化后的时分秒
|
||||
*/
|
||||
formateData(s) {
|
||||
var t;
|
||||
if (s > -1) {
|
||||
var hour = Math.floor(s / 3600);
|
||||
var min = Math.floor(s / 60) % 60;
|
||||
var sec = s % 60;
|
||||
if (hour != 0) {
|
||||
t = hour + "时";
|
||||
} else {
|
||||
t = "";
|
||||
}
|
||||
t += min + "分";
|
||||
t += sec + "秒";
|
||||
}
|
||||
return t;
|
||||
},
|
||||
// 应用使用行为
|
||||
setChart() {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'none' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
backgroundColor: '#11367a',
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 10,
|
||||
},
|
||||
formatter: (data) => {
|
||||
if (data.componentSubType == 'bar' && data.seriesName != '辅助') {
|
||||
return data.name + ":" + data.value
|
||||
} else if (data.componentSubType == 'line') {
|
||||
return data.name + "<br>" + data.seriesName + ":" + this.formateData(data.value)
|
||||
}
|
||||
}
|
||||
},
|
||||
title: [
|
||||
{
|
||||
text: '【类型统计】',
|
||||
textStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 12,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
top: '12%',
|
||||
left: '15%'
|
||||
},
|
||||
{
|
||||
text: '【时长TOP10】',
|
||||
textStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 12,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
top: '12%',
|
||||
right: '14%'
|
||||
},
|
||||
{
|
||||
text: '【使用时长日分布】',
|
||||
textStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 12,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
top: '53%',
|
||||
left: '14%'
|
||||
},
|
||||
{
|
||||
text: '【使用时长时段分布】',
|
||||
textStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 12,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
top: '53%',
|
||||
right: '12%'
|
||||
}
|
||||
],
|
||||
legend: [
|
||||
{
|
||||
top: '6%',
|
||||
left: 'center',
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 12,
|
||||
},
|
||||
z: 2,
|
||||
data: this.seriesData.map(item=>({name: item.name, icon: 'circle'}))
|
||||
}
|
||||
],
|
||||
grid: [
|
||||
{
|
||||
left: '5%',
|
||||
top: '20%',
|
||||
right: '52%',
|
||||
bottom: '53%',
|
||||
containLabel: false
|
||||
},
|
||||
{
|
||||
left: '52%',
|
||||
top: "20%",
|
||||
right: '3%',
|
||||
bottom: "53%",
|
||||
containLabel: false
|
||||
},
|
||||
{
|
||||
left: '8%',
|
||||
top: '62%',
|
||||
right: '52%',
|
||||
bottom: '8%',
|
||||
containLabel: false
|
||||
},
|
||||
{
|
||||
left: '55%',
|
||||
top: "62%",
|
||||
right: '5%',
|
||||
bottom: "8%",
|
||||
containLabel: false
|
||||
},
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: this.seriesData.map(item => item.name),
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
fontSize: 9,
|
||||
color: '#75deef'
|
||||
},
|
||||
axisLine: {show: false},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
gridIndex: 1,
|
||||
data: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7'],
|
||||
axisLine: {show: false},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
fontSize: 9,
|
||||
color: '#75deef'
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
gridIndex: 2,
|
||||
boundaryGap: false,
|
||||
data: ['8.1', '8.2', '8.3', '8.4', '8.5', '8.6', '8.7'],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
fontSize: 9,
|
||||
color: '#75deef'
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
gridIndex: 3,
|
||||
boundaryGap: false,
|
||||
data: ['0.00', '4.00', '8.00', '12.00', '16.00', '20.00', '24.00'],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
fontSize: 9,
|
||||
color: '#75deef'
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {show: false},
|
||||
axisLabel: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
gridIndex: 1,
|
||||
axisLabel: {show: false},
|
||||
splitLine: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
gridIndex: 2,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
fontSize: 9,
|
||||
color: '#75deef',
|
||||
showMaxLabel: false
|
||||
},
|
||||
name: '(小时)',
|
||||
nameGap: -5,
|
||||
nameTextStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 9,
|
||||
align: 'right',
|
||||
padding: [0, 4, 0, 0]
|
||||
},
|
||||
min: 0,
|
||||
max: 6,
|
||||
splitLine: {show: false},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
gridIndex: 2,
|
||||
axisLabel: {show: false},
|
||||
splitLine: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
gridIndex: 3,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
fontSize: 9,
|
||||
color: '#75deef',
|
||||
showMaxLabel: false
|
||||
},
|
||||
name: '(小时)',
|
||||
nameGap: -5,
|
||||
nameTextStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 9,
|
||||
align: 'right',
|
||||
padding: [0, 4, 0, 0]
|
||||
},
|
||||
min: 0,
|
||||
max: 6,
|
||||
splitLine: {
|
||||
show: false,
|
||||
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1a3c58'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
gridIndex: 3,
|
||||
axisLabel: {show: false},
|
||||
splitLine: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
],
|
||||
series: this.setOptionData()
|
||||
};
|
||||
if(!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,623 @@
|
|||
<template>
|
||||
<div class="worldMap"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "@/lib/world.js"
|
||||
|
||||
export default {
|
||||
name: 'worldMap',
|
||||
data() {
|
||||
return {
|
||||
myChart:null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 通讯行为分析
|
||||
setChart() {
|
||||
var geoCoordMap = {
|
||||
"海门": [121.15, 31.89],
|
||||
"鄂尔多斯": [109.781327, 39.608266],
|
||||
"招远": [120.38, 37.35],
|
||||
"舟山": [122.207216, 29.985295],
|
||||
"齐齐哈尔": [123.97, 47.33],
|
||||
"盐城": [120.13, 33.38],
|
||||
"赤峰": [118.87, 42.28],
|
||||
"青岛": [120.33, 36.07],
|
||||
"乳山": [121.52, 36.89],
|
||||
"金昌": [102.188043, 38.520089],
|
||||
"泉州": [118.58, 24.93],
|
||||
"莱西": [120.53, 36.86],
|
||||
"日照": [119.46, 35.42],
|
||||
"胶南": [119.97, 35.88],
|
||||
"南通": [121.05, 32.08],
|
||||
"拉萨": [91.11, 29.97],
|
||||
"云浮": [112.02, 22.93],
|
||||
"梅州": [116.1, 24.55],
|
||||
"文登": [122.05, 37.2],
|
||||
"上海": [121.48, 31.22],
|
||||
"攀枝花": [101.718637, 26.582347],
|
||||
"威海": [122.1, 37.5],
|
||||
"承德": [117.93, 40.97],
|
||||
"厦门": [118.1, 24.46],
|
||||
"汕尾": [115.375279, 22.786211],
|
||||
"潮州": [116.63, 23.68],
|
||||
"丹东": [124.37, 40.13],
|
||||
"太仓": [121.1, 31.45],
|
||||
"曲靖": [103.79, 25.51],
|
||||
"烟台": [121.39, 37.52],
|
||||
"福州": [119.3, 26.08],
|
||||
"瓦房店": [121.979603, 39.627114],
|
||||
"即墨": [120.45, 36.38],
|
||||
"抚顺": [123.97, 41.97],
|
||||
"玉溪": [102.52, 24.35],
|
||||
"张家口": [114.87, 40.82],
|
||||
"阳泉": [113.57, 37.85],
|
||||
"莱州": [119.942327, 37.177017],
|
||||
"湖州": [120.1, 30.86],
|
||||
"汕头": [116.69, 23.39],
|
||||
"昆山": [120.95, 31.39],
|
||||
"宁波": [121.56, 29.86],
|
||||
"湛江": [110.359377, 21.270708],
|
||||
"揭阳": [116.35, 23.55],
|
||||
"荣成": [122.41, 37.16],
|
||||
"连云港": [119.16, 34.59],
|
||||
"葫芦岛": [120.836932, 40.711052],
|
||||
"常熟": [120.74, 31.64],
|
||||
"东莞": [113.75, 23.04],
|
||||
"河源": [114.68, 23.73],
|
||||
"淮安": [119.15, 33.5],
|
||||
"泰州": [119.9, 32.49],
|
||||
"南宁": [108.33, 22.84],
|
||||
"营口": [122.18, 40.65],
|
||||
"惠州": [114.4, 23.09],
|
||||
"江阴": [120.26, 31.91],
|
||||
"蓬莱": [120.75, 37.8],
|
||||
"韶关": [113.62, 24.84],
|
||||
"嘉峪关": [98.289152, 39.77313],
|
||||
"广州": [113.23, 23.16],
|
||||
"延安": [109.47, 36.6],
|
||||
"太原": [112.53, 37.87],
|
||||
"清远": [113.01, 23.7],
|
||||
"中山": [113.38, 22.52],
|
||||
"昆明": [102.73, 25.04],
|
||||
"寿光": [118.73, 36.86],
|
||||
"盘锦": [122.070714, 41.119997],
|
||||
"长治": [113.08, 36.18],
|
||||
"深圳": [114.07, 22.62],
|
||||
"珠海": [113.52, 22.3],
|
||||
"宿迁": [118.3, 33.96],
|
||||
"咸阳": [108.72, 34.36],
|
||||
"铜川": [109.11, 35.09],
|
||||
"平度": [119.97, 36.77],
|
||||
"佛山": [113.11, 23.05],
|
||||
"海口": [110.35, 20.02],
|
||||
"江门": [113.06, 22.61],
|
||||
"章丘": [117.53, 36.72],
|
||||
"肇庆": [112.44, 23.05],
|
||||
"大连": [121.62, 38.92],
|
||||
"临汾": [111.5, 36.08],
|
||||
"吴江": [120.63, 31.16],
|
||||
"石嘴山": [106.39, 39.04],
|
||||
"沈阳": [123.38, 41.8],
|
||||
"苏州": [120.62, 31.32],
|
||||
"茂名": [110.88, 21.68],
|
||||
"嘉兴": [120.76, 30.77],
|
||||
"长春": [125.35, 43.88],
|
||||
"胶州": [120.03336, 36.264622],
|
||||
"银川": [106.27, 38.47],
|
||||
"张家港": [120.555821, 31.875428],
|
||||
"三门峡": [111.19, 34.76],
|
||||
"锦州": [121.15, 41.13],
|
||||
"南昌": [115.89, 28.68],
|
||||
"柳州": [109.4, 24.33],
|
||||
"三亚": [109.511909, 18.252847],
|
||||
"自贡": [104.778442, 29.33903],
|
||||
"吉林": [126.57, 43.87],
|
||||
"阳江": [111.95, 21.85],
|
||||
"泸州": [105.39, 28.91],
|
||||
"西宁": [101.74, 36.56],
|
||||
"宜宾": [104.56, 29.77],
|
||||
"呼和浩特": [111.65, 40.82],
|
||||
"成都": [104.06, 30.67],
|
||||
"大同": [113.3, 40.12],
|
||||
"镇江": [119.44, 32.2],
|
||||
"桂林": [110.28, 25.29],
|
||||
"张家界": [110.479191, 29.117096],
|
||||
"宜兴": [119.82, 31.36],
|
||||
"北海": [109.12, 21.49],
|
||||
"西安": [108.95, 34.27],
|
||||
"金坛": [119.56, 31.74],
|
||||
"东营": [118.49, 37.46],
|
||||
"牡丹江": [129.58, 44.6],
|
||||
"遵义": [106.9, 27.7],
|
||||
"绍兴": [120.58, 30.01],
|
||||
"扬州": [119.42, 32.39],
|
||||
"常州": [119.95, 31.79],
|
||||
"潍坊": [119.1, 36.62],
|
||||
"重庆": [106.54, 29.59],
|
||||
"台州": [121.420757, 28.656386],
|
||||
"南京": [118.78, 32.04],
|
||||
"滨州": [118.03, 37.36],
|
||||
"贵阳": [106.71, 26.57],
|
||||
"无锡": [120.29, 31.59],
|
||||
"本溪": [123.73, 41.3],
|
||||
"克拉玛依": [84.77, 45.59],
|
||||
"渭南": [109.5, 34.52],
|
||||
"马鞍山": [118.48, 31.56],
|
||||
"宝鸡": [107.15, 34.38],
|
||||
"焦作": [113.21, 35.24],
|
||||
"句容": [119.16, 31.95],
|
||||
"北京": [116.46, 39.92],
|
||||
"徐州": [117.2, 34.26],
|
||||
"衡水": [115.72, 37.72],
|
||||
"包头": [110, 40.58],
|
||||
"绵阳": [104.73, 31.48],
|
||||
"乌鲁木齐": [87.68, 43.77],
|
||||
"枣庄": [117.57, 34.86],
|
||||
"杭州": [120.19, 30.26],
|
||||
"淄博": [118.05, 36.78],
|
||||
"鞍山": [122.85, 41.12],
|
||||
"溧阳": [119.48, 31.43],
|
||||
"库尔勒": [86.06, 41.68],
|
||||
"安阳": [114.35, 36.1],
|
||||
"开封": [114.35, 34.79],
|
||||
"济南": [117, 36.65],
|
||||
"德阳": [104.37, 31.13],
|
||||
"温州": [120.65, 28.01],
|
||||
"九江": [115.97, 29.71],
|
||||
"邯郸": [114.47, 36.6],
|
||||
"临安": [119.72, 30.23],
|
||||
"兰州": [103.73, 36.03],
|
||||
"沧州": [116.83, 38.33],
|
||||
"临沂": [118.35, 35.05],
|
||||
"南充": [106.110698, 30.837793],
|
||||
"天津": [117.2, 39.13],
|
||||
"富阳": [119.95, 30.07],
|
||||
"泰安": [117.13, 36.18],
|
||||
"诸暨": [120.23, 29.71],
|
||||
"郑州": [113.65, 34.76],
|
||||
"哈尔滨": [126.63, 45.75],
|
||||
"聊城": [115.97, 36.45],
|
||||
"芜湖": [118.38, 31.33],
|
||||
"唐山": [118.02, 39.63],
|
||||
"平顶山": [113.29, 33.75],
|
||||
"邢台": [114.48, 37.05],
|
||||
"德州": [116.29, 37.45],
|
||||
"济宁": [116.59, 35.38],
|
||||
"荆州": [112.239741, 30.335165],
|
||||
"宜昌": [111.3, 30.7],
|
||||
"义乌": [120.06, 29.32],
|
||||
"丽水": [119.92, 28.45],
|
||||
"洛阳": [112.44, 34.7],
|
||||
"秦皇岛": [119.57, 39.95],
|
||||
"株洲": [113.16, 27.83],
|
||||
"石家庄": [114.48, 38.03],
|
||||
"莱芜": [117.67, 36.19],
|
||||
"常德": [111.69, 29.05],
|
||||
"保定": [115.48, 38.85],
|
||||
"湘潭": [112.91, 27.87],
|
||||
"金华": [119.64, 29.12],
|
||||
"岳阳": [113.09, 29.37],
|
||||
"长沙": [113, 28.21],
|
||||
"衢州": [118.88, 28.97],
|
||||
"廊坊": [116.7, 39.53],
|
||||
"菏泽": [115.480656, 35.23375],
|
||||
"合肥": [117.27, 31.86],
|
||||
"武汉": [114.31, 30.52],
|
||||
"大庆": [125.03, 46.58],
|
||||
'阿富汗': [67.709953, 33.93911],
|
||||
'安哥拉': [17.873887, -11.202692],
|
||||
'阿尔巴尼亚': [20.168331, 41.153332],
|
||||
'阿联酋': [53.847818, 23.424076],
|
||||
'阿根廷': [-63.61667199999999, -38.416097],
|
||||
'亚美尼亚': [45.038189, 40.069099],
|
||||
'法属南半球和南极领地': [69.348557, -49.280366],
|
||||
'澳大利亚': [133.775136, -25.274398],
|
||||
'奥地利': [14.550072, 47.516231],
|
||||
'阿塞拜疆': [47.576927, 40.143105],
|
||||
'布隆迪': [29.918886, -3.373056],
|
||||
'比利时': [4.469936, 50.503887],
|
||||
'贝宁': [2.315834, 9.30769],
|
||||
'布基纳法索': [-1.561593, 12.238333],
|
||||
'孟加拉国': [90.356331, 23.684994],
|
||||
'保加利亚': [25.48583, 42.733883],
|
||||
'巴哈马': [-77.39627999999999, 25.03428],
|
||||
'波斯尼亚和黑塞哥维那': [17.679076, 43.915886],
|
||||
'白俄罗斯': [27.953389, 53.709807],
|
||||
'伯利兹': [-88.49765, 17.189877],
|
||||
'百慕大': [-64.7505, 32.3078],
|
||||
'玻利维亚': [-63.58865299999999, -16.290154],
|
||||
'巴西': [-51.92528, -14.235004],
|
||||
'文莱': [114.727669, 4.535277],
|
||||
'不丹': [90.433601, 27.514162],
|
||||
'博茨瓦纳': [24.684866, -22.328474],
|
||||
'中非共和国': [20.939444, 6.611110999999999],
|
||||
'加拿大': [-106.346771, 56.130366],
|
||||
'瑞士': [8.227511999999999, 46.818188],
|
||||
'智利': [-71.542969, -35.675147],
|
||||
'中国': [104.195397, 35.86166],
|
||||
'象牙海岸': [-5.547079999999999, 7.539988999999999],
|
||||
'喀麦隆': [12.354722, 7.369721999999999],
|
||||
'刚果民主共和国': [21.758664, -4.038333],
|
||||
'刚果共和国': [15.827659, -0.228021],
|
||||
'哥伦比亚': [-74.297333, 4.570868],
|
||||
'哥斯达黎加': [-83.753428, 9.748916999999999],
|
||||
'古巴': [-77.781167, 21.521757],
|
||||
'北塞浦路斯': [33.429859, 35.126413],
|
||||
'塞浦路斯': [33.429859, 35.126413],
|
||||
'捷克共和国': [15.472962, 49.81749199999999],
|
||||
'德国': [10.451526, 51.165691],
|
||||
'吉布提': [42.590275, 11.825138],
|
||||
'丹麦': [9.501785, 56.26392],
|
||||
'多明尼加共和国': [-70.162651, 18.735693],
|
||||
'阿尔及利亚': [1.659626, 28.033886],
|
||||
'厄瓜多尔': [-78.18340599999999, -1.831239],
|
||||
'埃及': [30.802498, 26.820553],
|
||||
'厄立特里亚': [39.782334, 15.179384],
|
||||
'西班牙': [-3.74922, 40.46366700000001],
|
||||
'爱沙尼亚': [25.013607, 58.595272],
|
||||
'埃塞俄比亚': [40.489673, 9.145000000000001],
|
||||
'芬兰': [25.748151, 61.92410999999999],
|
||||
'斐': [178.065032, -17.713371],
|
||||
'福克兰群岛': [-59.523613, -51.796253],
|
||||
'法国': [2.213749, 46.227638],
|
||||
'加蓬': [11.609444, -0.803689],
|
||||
'英国': [-3.435973, 55.378051],
|
||||
'格鲁吉亚': [-82.9000751, 32.1656221],
|
||||
'加纳': [-1.023194, 7.946527],
|
||||
'几内亚': [-9.696645, 9.945587],
|
||||
'冈比亚': [-15.310139, 13.443182],
|
||||
'几内亚比绍': [-15.180413, 11.803749],
|
||||
'赤道几内亚': [10.267895, 1.650801],
|
||||
'希腊': [21.824312, 39.074208],
|
||||
'格陵兰': [-42.604303, 71.706936],
|
||||
'危地马拉': [-90.23075899999999, 15.783471],
|
||||
'法属圭亚那': [-53.125782, 3.933889],
|
||||
'圭亚那': [-58.93018, 4.860416],
|
||||
'洪都拉斯': [-86.241905, 15.199999],
|
||||
'克罗地亚': [15.2, 45.1],
|
||||
'海地': [-72.285215, 18.971187],
|
||||
'匈牙利': [19.503304, 47.162494],
|
||||
'印尼': [113.921327, -0.789275],
|
||||
'印度': [78.96288, 20.593684],
|
||||
'爱尔兰': [-8.24389, 53.41291],
|
||||
'伊朗': [53.688046, 32.427908],
|
||||
'伊拉克': [43.679291, 33.223191],
|
||||
'冰岛': [-19.020835, 64.963051],
|
||||
'以色列': [34.851612, 31.046051],
|
||||
'意大利': [12.56738, 41.87194],
|
||||
'牙买加': [-77.297508, 18.109581],
|
||||
'约旦': [36.238414, 30.585164],
|
||||
'日本': [138.252924, 36.204824],
|
||||
'哈萨克斯坦': [66.923684, 48.019573],
|
||||
'肯尼亚': [37.906193, -0.023559],
|
||||
'吉尔吉斯斯坦': [74.766098, 41.20438],
|
||||
'柬埔寨': [104.990963, 12.565679],
|
||||
'韩国': [127.766922, 35.907757],
|
||||
'科索沃': [20.902977, 42.6026359],
|
||||
'科威特': [47.481766, 29.31166],
|
||||
'老挝': [102.495496, 19.85627],
|
||||
'黎巴嫩': [35.862285, 33.854721],
|
||||
'利比里亚': [-9.429499000000002, 6.428055],
|
||||
'利比亚': [17.228331, 26.3351],
|
||||
'斯里兰卡': [80.77179699999999, 7.873053999999999],
|
||||
'莱索托': [28.233608, -29.609988],
|
||||
'立陶宛': [23.881275, 55.169438],
|
||||
'卢森堡': [6.129582999999999, 49.815273],
|
||||
'拉脱维亚': [24.603189, 56.879635],
|
||||
'摩洛哥': [-7.092619999999999, 31.791702],
|
||||
'摩尔多瓦': [28.369885, 47.411631],
|
||||
'马达加斯加': [46.869107, -18.766947],
|
||||
'墨西哥': [-102.552784, 23.634501],
|
||||
'马其顿': [21.745275, 41.608635],
|
||||
'马里': [-3.996166, 17.570692],
|
||||
'缅甸': [95.956223, 21.913965],
|
||||
'黑山': [19.37439, 42.708678],
|
||||
'蒙古': [103.846656, 46.862496],
|
||||
'莫桑比克': [35.529562, -18.665695],
|
||||
'毛里塔尼亚': [-10.940835, 21.00789],
|
||||
'马拉维': [34.301525, -13.254308],
|
||||
'马来西亚': [101.975766, 4.210484],
|
||||
'纳米比亚': [18.49041, -22.95764],
|
||||
'新喀里多尼亚': [165.618042, -20.904305],
|
||||
'尼日尔': [8.081666, 17.607789],
|
||||
'尼日利亚': [8.675277, 9.081999],
|
||||
'尼加拉瓜': [-85.207229, 12.865416],
|
||||
'荷兰': [5.291265999999999, 52.132633],
|
||||
'挪威': [8.468945999999999, 60.47202399999999],
|
||||
'尼泊尔': [84.12400799999999, 28.394857],
|
||||
'新西兰': [174.885971, -40.900557],
|
||||
'阿曼': [55.923255, 21.512583],
|
||||
'巴基斯坦': [69.34511599999999, 30.375321],
|
||||
'巴拿马': [-80.782127, 8.537981],
|
||||
'秘鲁': [-75.015152, -9.189967],
|
||||
'菲律宾': [121.774017, 12.879721],
|
||||
'巴布亚新几内亚': [143.95555, -6.314992999999999],
|
||||
'波兰': [19.145136, 51.919438],
|
||||
'波多黎各': [-66.590149, 18.220833],
|
||||
'北朝鲜': [127.510093, 40.339852],
|
||||
'葡萄牙': [-8.224454, 39.39987199999999],
|
||||
'巴拉圭': [-58.443832, -23.442503],
|
||||
'卡塔尔': [51.183884, 25.354826],
|
||||
'罗马尼亚': [24.96676, 45.943161],
|
||||
'俄罗斯': [105.318756, 61.52401],
|
||||
'卢旺达': [29.873888, -1.940278],
|
||||
'西撒哈拉': [-12.885834, 24.215527],
|
||||
'沙特阿拉伯': [45.079162, 23.885942],
|
||||
'苏丹': [30.217636, 12.862807],
|
||||
'南苏丹': [31.3069788, 6.876991899999999],
|
||||
'塞内加尔': [-14.452362, 14.497401],
|
||||
'所罗门群岛': [160.156194, -9.64571],
|
||||
'塞拉利昂': [-11.779889, 8.460555],
|
||||
'萨尔瓦多': [-88.89653, 13.794185],
|
||||
'索马里兰': [46.8252838, 9.411743399999999],
|
||||
'索马里': [46.199616, 5.152149],
|
||||
'塞尔维亚共和国': [21.005859, 44.016521],
|
||||
'苏里南': [-56.027783, 3.919305],
|
||||
'斯洛伐克': [19.699024, 48.669026],
|
||||
'斯洛文尼亚': [14.995463, 46.151241],
|
||||
'瑞典': [18.643501, 60.12816100000001],
|
||||
'斯威士兰': [31.465866, -26.522503],
|
||||
'叙利亚': [38.996815, 34.80207499999999],
|
||||
'乍得': [18.732207, 15.454166],
|
||||
'多哥': [0.824782, 8.619543],
|
||||
'泰国': [100.992541, 15.870032],
|
||||
'塔吉克斯坦': [71.276093, 38.861034],
|
||||
'土库曼斯坦': [59.556278, 38.969719],
|
||||
'东帝汶': [125.727539, -8.874217],
|
||||
'特里尼达和多巴哥': [-61.222503, 10.691803],
|
||||
'突尼斯': [9.537499, 33.886917],
|
||||
'土耳其': [35.243322, 38.963745],
|
||||
'坦桑尼亚联合共和国': [34.888822, -6.369028],
|
||||
'乌干达': [32.290275, 1.373333],
|
||||
'乌克兰': [31.16558, 48.379433],
|
||||
'乌拉圭': [-55.765835, -32.522779],
|
||||
'美国': [-95.712891, 37.09024],
|
||||
'乌兹别克斯坦': [64.585262, 41.377491],
|
||||
'委内瑞拉': [-66.58973, 6.42375],
|
||||
'越南': [108.277199, 14.058324],
|
||||
'瓦努阿图': [166.959158, -15.376706],
|
||||
'西岸': [35.3027226, 31.9465703],
|
||||
'也门': [48.516388, 15.552727],
|
||||
'南非': [22.937506, -30.559482],
|
||||
'赞比亚': [27.849332, -13.133897],
|
||||
'津巴布韦': [29.154857, -19.015438]
|
||||
};
|
||||
var BJData = [
|
||||
[{name: '北京'}, {name: '阿根廷', value: 95}],
|
||||
[{name: '北京'}, {name: '美国', value: 90}],
|
||||
[{name: '北京'}, {name: '南昌', value: 80}],
|
||||
];
|
||||
var convertData = function (data) {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var dataItem = data[i];
|
||||
var fromCoord = geoCoordMap[dataItem[0].name];
|
||||
var toCoord = geoCoordMap[dataItem[1].name];
|
||||
if (fromCoord && toCoord) {
|
||||
res.push({
|
||||
fromName: dataItem[0].name,
|
||||
toName: dataItem[1].name,
|
||||
coords: [fromCoord, toCoord]
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'none' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
backgroundColor: '#11367a',
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 10,
|
||||
},
|
||||
formatter: function (data) {
|
||||
if (data.componentSubType === 'effectScatter') {
|
||||
return data.data.name + ":" + data.data.value[2] + "次"
|
||||
|
||||
} else {
|
||||
console.log(data);
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
title: [
|
||||
{
|
||||
text: '通话走势',
|
||||
bottom: '10%',
|
||||
left: '2%',
|
||||
textStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 12,
|
||||
}
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
top: '5%',
|
||||
right: '5%',
|
||||
data: ['通话'],
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
color: '#75deef',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
grid:
|
||||
{
|
||||
top: '88%',
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '2%',
|
||||
|
||||
},
|
||||
xAxis:
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#3F4527'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
yAxis:
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
map: 'world',
|
||||
zoom: 1.1,
|
||||
aspectScale: 1,
|
||||
top: '14%',
|
||||
left: '8%',
|
||||
right: '8%',
|
||||
bottom: '15%',
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
areaColor: '#2a333d'
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: 'rgb(40,113,234)',
|
||||
borderColor: '#111'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'lines',
|
||||
coordinateSystem: 'geo',
|
||||
lineStyle: {
|
||||
color: '#f1e816'
|
||||
},
|
||||
data: convertData(BJData)
|
||||
},
|
||||
{
|
||||
name: '通话',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: BJData.map(function (dataItem) {
|
||||
return {
|
||||
name: dataItem[0].name + '-' + dataItem[1].name,
|
||||
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
|
||||
};
|
||||
}),
|
||||
symbolSize: function (val) {
|
||||
return val[2] / 10;
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgb(230,215,5)'
|
||||
}
|
||||
},
|
||||
{
|
||||
data: [
|
||||
|
||||
{value: 5, symbol: 'none'},
|
||||
{value: 23, symbol: 'none'},
|
||||
{value: 9, symbol: 'none'},
|
||||
{value: 12, symbol: 'none'},
|
||||
{value: 24, symbol: 'none'},
|
||||
{value: 8, symbol: 'none'},
|
||||
{value: 23, symbol: 'none'},
|
||||
{value: 24, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
{
|
||||
value: 24, symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
itemStyle: {
|
||||
color: '#293880',
|
||||
borderColor: 'rgba(228,234,40,.8)',
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
type: 'line',
|
||||
name: '通话',
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
|
||||
lineStyle: {
|
||||
color: 'rgba(228,234,40,.8)',
|
||||
width: 1,
|
||||
},
|
||||
areaStyle: {
|
||||
color: { // 颜色线性渐变
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{offset: 0, color: 'rgba(228,234,40,.8)'},
|
||||
{offset: 0.5, color: 'rgba(228,234,40,.5)'},
|
||||
{offset: 1, color: 'rgba(228,234,40,.1)'}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.setChart();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.worldMap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<div class="barChart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setChart() {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
backgroundColor: '#11367a',
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
left: "11%",
|
||||
top: "15%",
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
color: '#5CB1C1',
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '12%',
|
||||
bottom: '12%',
|
||||
left: "10%",
|
||||
right: '10%',
|
||||
containLabel: false
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: {
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolSize: [6, 6],
|
||||
symbolOffset: [0, 10],
|
||||
lineStyle: {
|
||||
color: '#122C49'
|
||||
}
|
||||
},
|
||||
axisTick: {show: false},
|
||||
axisLabel: {
|
||||
color: '#61B9C8',
|
||||
fontSize: 10,
|
||||
interval: 0,
|
||||
},
|
||||
data: ["分类1", "分类2", "分类3", "分类4", "分类5", "分类6", "分类7", "分类8", "分类9", "分类10"],
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
max: 400,
|
||||
min: 0,
|
||||
interval: 50,
|
||||
axisLine: {
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolSize: [6, 6],
|
||||
lineStyle: {
|
||||
color: '#122C49'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#61B9C8',
|
||||
showMaxLabel: false,
|
||||
fontSize: 10
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
name: '(小时)',
|
||||
nameGap: -5,
|
||||
nameTextStyle: {
|
||||
color: '#61B9C8',
|
||||
fontSize: 9,
|
||||
align: 'right',
|
||||
padding: [0, 4, 0, 0]
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '数据',
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color:{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#50A2F6' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.4, color: '#9490F9' // 40% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#DF7DFD' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
} //背景渐变色
|
||||
},
|
||||
barWidth: 10,
|
||||
barCategoryGap: 10,
|
||||
data: [213, 190, 137, 99, 63, 196, 248, 212, 248, 112]
|
||||
},
|
||||
]
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.barChart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<div class="doubleBarChart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setChart() {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
backgroundColor: '#11367a',
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
legend: [
|
||||
{
|
||||
top: '8%',
|
||||
right: '5%',
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
color: '#5CB1C1',
|
||||
}
|
||||
},
|
||||
],
|
||||
grid:
|
||||
{
|
||||
top: '15%',
|
||||
left: '3%',
|
||||
right: '5%',
|
||||
bottom: '8%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: '#61B9C8',
|
||||
fontSize: 10
|
||||
},
|
||||
axisLine: {
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolSize: [6, 6],
|
||||
symbolOffset: [0, 5],
|
||||
lineStyle: {
|
||||
color: '#122C49'
|
||||
}
|
||||
},
|
||||
axisTick: {show: false},
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月']
|
||||
},
|
||||
],
|
||||
yAxis:
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 300,
|
||||
axisLabel: {
|
||||
color: '#61B9C8',
|
||||
fontSize: 9,
|
||||
showMaxLabel: false,
|
||||
},
|
||||
axisLine: {
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolSize: [6, 6],
|
||||
symbolOffset: [0, 5],
|
||||
lineStyle: {
|
||||
color: '#122C49'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
length: 3
|
||||
},
|
||||
name: '(人)',
|
||||
nameGap: -5,
|
||||
nameTextStyle: {
|
||||
color: '#61B9C8',
|
||||
fontSize: 9,
|
||||
align: 'right',
|
||||
padding: [0, 6, 0, 0]
|
||||
},
|
||||
splitLine: {show: false}
|
||||
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '新增',
|
||||
type: 'bar',
|
||||
barWidth: 7,
|
||||
stack: '总数',
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#FC9386' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.4, color: '#F87B86' // 40% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#F36087' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}, //背景渐变色
|
||||
borderRadius: [3.5, 3.5, 0, 0],
|
||||
},
|
||||
data: [120, 102, 101, 134, 190, 130, 120, 190, 130, 120]
|
||||
},
|
||||
{
|
||||
name: '总数',
|
||||
type: 'bar',
|
||||
barWidth: 7,
|
||||
stack: '总数',
|
||||
itemStyle: {
|
||||
color: '#8C14EA',
|
||||
borderRadius: [3.5, 3.5, 0, 0,],
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 130, 110, 90, 130, 120]
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.doubleBarChart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
<template>
|
||||
<div class="singleAreaChart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
selectRangeDate: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart:null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setData(type) {
|
||||
let arr = [];
|
||||
switch (type) {
|
||||
case 'x':
|
||||
for (let i = 0; i < this.selectRangeDate.length; i++) {
|
||||
arr.push(this.selectRangeDate[i][1] + "." + this.selectRangeDate[i][2])
|
||||
}
|
||||
break;
|
||||
case 's' :
|
||||
for (let i = 0; i < this.selectRangeDate.length; i++) {
|
||||
arr.push((Math.random() * 250).toFixed(0))
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
return arr;
|
||||
},
|
||||
setChart() {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
backgroundColor: '#11367a',
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: '12%',
|
||||
bottom: '12%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
},
|
||||
legend: {
|
||||
right: '5%',
|
||||
top: '10%',
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
color: '#5CB1C1',
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
color: '#61B9C8',
|
||||
fontSize: 10,
|
||||
},
|
||||
axisLine: {
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolSize: [6, 6],
|
||||
symbolOffset: [0, 5],
|
||||
lineStyle: {
|
||||
color: '#122C49'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
color: '#122C49',
|
||||
inside: true
|
||||
},
|
||||
z: 2,
|
||||
data: this.setData('x')
|
||||
},
|
||||
yAxis:
|
||||
{
|
||||
type: 'value',
|
||||
interval: 50,
|
||||
min: 0,
|
||||
max: 400,
|
||||
splitNumber: 7,
|
||||
axisLine: {
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolSize: [6, 6],
|
||||
lineStyle: {
|
||||
color: '#122C49'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#61B9C8',
|
||||
showMaxLabel: false,
|
||||
fontSize: 10
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
name: '(个)',
|
||||
nameGap: -10,
|
||||
nameTextStyle: {
|
||||
color: '#61B9C8',
|
||||
fontSize: 9,
|
||||
align: 'right',
|
||||
padding: [0, 6, 0, 0]
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: '图例',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
data: this.setData('s'),
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color:{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#B21356' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.5, color: '#B21356' // 40% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#F59111' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
} //背景渐变色
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgb(212,37,43)'
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#A41B68' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.5, color: 'rgba(112,20,82,1)' // 40% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(112,20,82,0)' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}, //背景渐变色
|
||||
origin: 'start'
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.singleAreaChart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<div class="doubleLine"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setChart() {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
left: "11%",
|
||||
top: "10%",
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
color: '#5CB1C1',
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '12%',
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '10%',
|
||||
containLabel: false
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolSize: [6, 6],
|
||||
symbolOffset: [0, 10],
|
||||
lineStyle: {
|
||||
color: '#122C49'
|
||||
}
|
||||
},
|
||||
axisTick: {show: false},
|
||||
axisLabel: {
|
||||
color: '#61B9C8',
|
||||
fontSize: 9
|
||||
},
|
||||
data: ["2017", "4", "7", "10", "2018", "4", "7"]
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
max: 400,
|
||||
min: 0,
|
||||
interval: 50,
|
||||
axisLine: {
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolSize: [6, 6],
|
||||
lineStyle: {
|
||||
color: '#122C49'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#61B9C8',
|
||||
showMaxLabel: false,
|
||||
fontSize: 9
|
||||
},
|
||||
name: '(次)',
|
||||
nameGap: -10,
|
||||
nameTextStyle: {
|
||||
color: '#61B9C8',
|
||||
fontSize: 9,
|
||||
align: 'right',
|
||||
padding: [0, 6, 0, 0]
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
max: 400,
|
||||
min: 0,
|
||||
axisLine: {
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolSize: [6, 6],
|
||||
lineStyle: {
|
||||
color: '#122C49'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#61B9C8',
|
||||
showMaxLabel: false,
|
||||
fontSize: 9
|
||||
},
|
||||
name: '(个)',
|
||||
nameGap: -10,
|
||||
nameTextStyle: {
|
||||
color: '#61B9C8',
|
||||
fontSize: 9,
|
||||
align: 'left',
|
||||
padding: [0, 0, 0, 6]
|
||||
},
|
||||
interval: 50,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '次数',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#F39800',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#F39800'
|
||||
},
|
||||
data: [50, 132, 100, 300, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '人数',
|
||||
yAxisIndex: 1,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#BF232A',
|
||||
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#BF232A'
|
||||
},
|
||||
data: [330, 310, 132, 100, 300, 90, 230]
|
||||
},
|
||||
]
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.doubleLine {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
<template>
|
||||
<div class="doubleBars"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setChart() {
|
||||
let option = {
|
||||
legend: {
|
||||
left: "8%",
|
||||
top: "10%",
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
color: '#5CB1C1',
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
grid: [{
|
||||
show: false,
|
||||
left: '6%',
|
||||
top: '17%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
width: '40%',
|
||||
}, {
|
||||
show: false,
|
||||
left: '53%',
|
||||
top: '17%',
|
||||
bottom: '3%',
|
||||
width: '1%',
|
||||
}, {
|
||||
show: false,
|
||||
right: '6%',
|
||||
top: '17%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
width: '40%',
|
||||
},],
|
||||
xAxis: [{
|
||||
splitNumber: 8,
|
||||
type: 'value',
|
||||
inverse: true,
|
||||
axisLine: {show: false},
|
||||
axisTick: {show: false},
|
||||
position: 'bottom',
|
||||
axisLabel: {show: false},
|
||||
splitLine: {show: false}
|
||||
}, {
|
||||
gridIndex: 1,
|
||||
show: false
|
||||
}, {
|
||||
gridIndex: 2,
|
||||
splitNumber: 8,
|
||||
type: 'value',
|
||||
axisLine: {show: false},
|
||||
axisTick: {show: false},
|
||||
position: 'bottom',
|
||||
axisLabel: {show: false},
|
||||
splitLine: {show: false}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
//左边的标尺
|
||||
{
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
position: 'left',
|
||||
axisLine: {show: false},
|
||||
axisTick: {show: false},
|
||||
axisLabel: {show: false},
|
||||
},
|
||||
//中间的标尺
|
||||
{
|
||||
gridIndex: 1,
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
position: 'left',
|
||||
axisLine: {show: false},
|
||||
axisTick: {show: false},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#61B9C8',
|
||||
fontSize: 8,
|
||||
showMinLabel: true,
|
||||
showMaxLabel: true,
|
||||
interval: 0
|
||||
},
|
||||
data: ["1部", "2部", "3部", "4部", "5部", "6部", "7部", "8部", "9部", '10部', "11部"]
|
||||
},
|
||||
//右边的标尺
|
||||
{
|
||||
gridIndex: 2,
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
offset: 50,
|
||||
position: 'left',
|
||||
axisLine: {show: false},
|
||||
axisTick: {show: false},
|
||||
axisLabel: {show: false}
|
||||
}
|
||||
],
|
||||
series: [{
|
||||
name: '次数',
|
||||
type: 'bar',
|
||||
barGap: 10,
|
||||
barWidth: "40%",
|
||||
emphasis: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{offset: 0, color: 'rgba(1,176,223,1)'},
|
||||
{offset: 1, color: 'rgba(1,176,223,0)'}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
borderRadius: 5,
|
||||
},
|
||||
data: [320, 302, 341, 374, 390, 450, 420, 374, 390, 450, 420]
|
||||
}, {
|
||||
name: '人数',
|
||||
type: 'bar',
|
||||
barGap: 10,
|
||||
barWidth: "40%",
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 2,
|
||||
emphasis: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{offset: 0, color: 'rgba(126,19,212,0)'},
|
||||
{offset: 1, color: 'rgba(126,19,212,1)'}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
borderRadius: 5,
|
||||
},
|
||||
data: [320, 302, 341, 374, 390, 450, 420, 374, 390, 450, 420]
|
||||
}]
|
||||
};
|
||||
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.doubleBars {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
<template>
|
||||
<div class="threeBarChart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
data() {
|
||||
return {
|
||||
myChart:null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setChart() {
|
||||
let option = {
|
||||
grid: {
|
||||
top: "20%",
|
||||
bottom: "15%",
|
||||
left: 40,
|
||||
right: 40,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
left: "8%",
|
||||
top: "10%",
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
color: '#5CB1C1',
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolSize: [6, 6],
|
||||
lineStyle: {
|
||||
color: '#122C49'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#61B9C8',
|
||||
showMaxLabel: false,
|
||||
fontSize: 10
|
||||
},
|
||||
data: ['2017', '4', '7', '10', '2018', '4', '7', '0']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
interval: 50,
|
||||
min: 0,
|
||||
max: 400,
|
||||
splitNumber: 7,
|
||||
axisLine: {
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolSize: [6, 6],
|
||||
lineStyle: {
|
||||
color: '#122C49'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#61B9C8',
|
||||
showMaxLabel: false,
|
||||
fontSize: 10
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
name: '(元)',
|
||||
nameGap: -10,
|
||||
nameTextStyle: {
|
||||
color: '#61B9C8',
|
||||
fontSize: 9,
|
||||
align: 'right',
|
||||
padding: [0, 6, 0, 0]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
interval: 50,
|
||||
position: "right",
|
||||
offset: -35,
|
||||
min: 0,
|
||||
max: 400,
|
||||
splitNumber: 7,
|
||||
axisLine: {
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolSize: [6, 6],
|
||||
lineStyle: {
|
||||
color: '#122C49'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#61B9C8',
|
||||
showMaxLabel: false,
|
||||
fontSize: 10
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
name: '(人)',
|
||||
nameGap: -10,
|
||||
nameTextStyle: {
|
||||
color: '#61B9C8',
|
||||
fontSize: 9,
|
||||
align: 'left',
|
||||
padding: [0, 0, 0, 6]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
position: "right",
|
||||
interval: 50,
|
||||
min: 0,
|
||||
max: 400,
|
||||
splitNumber: 7,
|
||||
axisLine: {
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolSize: [6, 6],
|
||||
lineStyle: {
|
||||
color: '#122C49'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#61B9C8',
|
||||
showMaxLabel: false,
|
||||
fontSize: 10
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
name: '(次)',
|
||||
nameGap: -10,
|
||||
nameTextStyle: {
|
||||
color: '#61B9C8',
|
||||
fontSize: 9,
|
||||
align: 'left',
|
||||
padding: [0, 0, 0, 6]
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '金额',
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
barWidth: 6,
|
||||
data: [200, 49, 70, 232, 256, 76.7, 135.6],
|
||||
itemStyle: {
|
||||
borderRadius: [3, 3, 0, 0],
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: 'rgba(252,145,134,1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(241,88,135,1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
} //背景渐变色
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '人数',
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
barWidth: 6,
|
||||
data: [26, 59, 90, 264, 287, 70.7, 175.6],
|
||||
itemStyle: {
|
||||
borderRadius: [3, 3, 0, 0],
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: 'rgba(144,20,238,1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(74,8,211,1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
} //背景渐变色
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '次数',
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
barWidth: 6,
|
||||
data: [264, 287, 150, 175.6, 182.2, 48.7, 18.8],
|
||||
itemStyle: {
|
||||
borderRadius: [3, 3, 0, 0],
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: 'rgba(0,204,255,1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(8,59,126,1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
} //背景渐变色
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.threeBarChart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
<template>
|
||||
<div class="pieChart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setChart() {
|
||||
let option = {
|
||||
title: [
|
||||
{
|
||||
text: "【金额】",
|
||||
left: '12%',
|
||||
bottom: '6%',
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "【人数】",
|
||||
left: '46%',
|
||||
bottom: '6%',
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "【次数】",
|
||||
right: '12%',
|
||||
bottom: '6%',
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
data: [
|
||||
{name: '分类1', icon: 'circle'},
|
||||
{name: '分类2', icon: 'circle'},
|
||||
{name: '分类3', icon: 'circle'},
|
||||
{name: '分类4', icon: 'circle'},
|
||||
{name: '分类5', icon: 'circle'},
|
||||
],
|
||||
left: "8%",
|
||||
top: "10%",
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
color: '#00CCFF',
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '【金额】',
|
||||
type: 'pie',
|
||||
radius: '40%',
|
||||
center: ['17%', '60%'],
|
||||
data: [
|
||||
{value: 335, name: '分类1'},
|
||||
{value: 310, name: '分类2'},
|
||||
{value: 234, name: '分类3'},
|
||||
{value: 135, name: '分类5'},
|
||||
{value: 1548, name: '分类5'}
|
||||
],
|
||||
label: {
|
||||
fontSize: 8,
|
||||
color: '#00CCFF'
|
||||
},
|
||||
labelLine: {
|
||||
length: 15,
|
||||
length2: 10,
|
||||
lineStyle: {
|
||||
color: '#3F3F5C'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
var colorList = ['#F74F64', '#00CCFF', '#315371', '#142AFE', '#9814FE'];
|
||||
return colorList[params.dataIndex];
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '【人数】',
|
||||
type: 'pie',
|
||||
radius: '40%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{value: 545, name: '分类1'},
|
||||
{value: 210, name: '分类2'},
|
||||
{value: 2534, name: '分类3'},
|
||||
{value: 1335, name: '分类4'},
|
||||
{value: 1548, name: '分类5'}
|
||||
],
|
||||
label: {
|
||||
fontSize: 8,
|
||||
color: '#00CCFF'
|
||||
},
|
||||
labelLine: {
|
||||
length: 15,
|
||||
length2: 10,
|
||||
lineStyle: {
|
||||
color: '#3F3F5C'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
var colorList = ['#F74F64', '#00CCFF', '#315371', '#142AFE', '#9814FE'];
|
||||
return colorList[params.dataIndex];
|
||||
},
|
||||
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '【次数】',
|
||||
type: 'pie',
|
||||
radius: '40%',
|
||||
center: ['82%', '60%'],
|
||||
data: [
|
||||
{value: 435, name: '分类1'},
|
||||
{value: 310, name: '分类2'},
|
||||
{value: 334, name: '分类3'},
|
||||
{value: 1135, name: '分类4'},
|
||||
{value: 1548, name: '分类5'}
|
||||
],
|
||||
label: {
|
||||
fontSize: 8,
|
||||
color: '#00CCFF'
|
||||
},
|
||||
labelLine: {
|
||||
length: 15,
|
||||
length2: 10,
|
||||
lineStyle: {
|
||||
color: '#3F3F5C'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
var colorList = ['#F74F64', '#00CCFF', '#315371', '#142AFE', '#9814FE'];
|
||||
return colorList[params.dataIndex];
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.pieChart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
<template>
|
||||
<div class="leftBar"></div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.leftBar {
|
||||
height: 100%;
|
||||
width: 45%;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: String,
|
||||
data: Array,
|
||||
},
|
||||
name: '',
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setTrenchData(type) { // 数据
|
||||
let arr = [];
|
||||
let obj = {};
|
||||
for (let i = 0; i < this.data.length; i++) {
|
||||
switch (type) {
|
||||
case 't':
|
||||
obj = {
|
||||
subtext: this.data[i].subtitle,
|
||||
top: this.data[i].top,
|
||||
left: 10,
|
||||
subtextStyle: {
|
||||
color: '#8CBCCD',
|
||||
fontSize: 9
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'd':
|
||||
obj = this.data[i].data
|
||||
break;
|
||||
case 'b':
|
||||
obj = 100;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
arr.push(obj);
|
||||
}
|
||||
if (type === 't') {
|
||||
arr.unshift({
|
||||
text: this.title,
|
||||
top: '8%',
|
||||
left: '5%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
}
|
||||
});
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
|
||||
// 渠道分析
|
||||
setChart() {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
title: this.setTrenchData('t'),
|
||||
grid: {
|
||||
top: '15%',
|
||||
bottom: '3%',
|
||||
left: '5%',
|
||||
},
|
||||
yAxis: {
|
||||
data: [],
|
||||
inverse: true,
|
||||
axisLabel: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisTick: {show: false},
|
||||
},
|
||||
xAxis: {
|
||||
splitLine: {show: false},
|
||||
axisLabel: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisTick: {show: false},
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
silent: true,
|
||||
barWidth: 15,
|
||||
barGap: '-100%', // Make series be overlap
|
||||
itemStyle: {
|
||||
color: '#1F1E4E'
|
||||
},
|
||||
data: this.setTrenchData('b')
|
||||
}, {
|
||||
type: 'bar',
|
||||
barWidth:15,
|
||||
z: 2,
|
||||
label: {
|
||||
show: true,
|
||||
position: "insideLeft",
|
||||
color: "#fff",
|
||||
offset: [0, 1],
|
||||
fontSize: 9,
|
||||
formatter: function (params) {
|
||||
return params.name
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
return params.data.color;
|
||||
}
|
||||
},
|
||||
data: this.setTrenchData('d')
|
||||
}]
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
|
||||
this.myChart.clear();
|
||||
this.myChart.resize();
|
||||
this.myChart.setOption(option);
|
||||
},
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.setChart();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
<template>
|
||||
<div class="rightBar"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
data: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setSoliderData(type) {
|
||||
let arr = [];
|
||||
let obj = {};
|
||||
for (let i = 0; i < this.data.length; i++) {
|
||||
switch (type) {
|
||||
case 'g':
|
||||
obj = {
|
||||
top: this.data[i].top,
|
||||
left: 8,
|
||||
right: 30,
|
||||
height: "13.5%"
|
||||
};
|
||||
break;
|
||||
case 'x':
|
||||
obj = {
|
||||
axisLine: {show: false},
|
||||
axisTick: {show: false, interval: 0},
|
||||
splitLine: {show: false},
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
gridIndex: i,
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
||||
};
|
||||
break;
|
||||
case 'y':
|
||||
obj = {
|
||||
type: "value",
|
||||
axisLine: {show: false},
|
||||
gridIndex: i,
|
||||
axisTick: {show: false},
|
||||
splitLine: {show: false},
|
||||
axisLabel: {show: false}
|
||||
};
|
||||
break;
|
||||
case 's':
|
||||
obj = {
|
||||
type: "bar",
|
||||
barWidth: 2,
|
||||
data: this.data[i].data,
|
||||
label: {
|
||||
show: true,
|
||||
position: "insideBottomLeft",
|
||||
offset: [3, 0],
|
||||
distance: 2,
|
||||
color: '#88B6C7',
|
||||
fontSize: 9,
|
||||
lineHeight: 9,
|
||||
rich: {
|
||||
a: {
|
||||
// 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom
|
||||
}
|
||||
},
|
||||
formatter: function (data) {
|
||||
if (data.data.name.length == 2) {
|
||||
return data.data.name.split("").join("\n\n");
|
||||
} else {
|
||||
return data.data.name.split("").join("\n");
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: { // 颜色线性渐变
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(' + this.data[i].color + ',1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(' + this.data[i].color + ',0)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
xAxisIndex: i,
|
||||
yAxisIndex: i,
|
||||
};
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
arr.push(obj)
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
// 用户排名
|
||||
setChart() {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
formatter: "{b}:{c}"
|
||||
},
|
||||
title: {
|
||||
text: '重点关注用户排名',
|
||||
left: 0,
|
||||
top: 10,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#FFF"
|
||||
}
|
||||
},
|
||||
grid: this.setSoliderData('g'),
|
||||
xAxis: this.setSoliderData('x'),
|
||||
yAxis: this.setSoliderData('y'),
|
||||
series: this.setSoliderData('s')
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.setChart();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.rightBar {
|
||||
height: 100%;
|
||||
width: 55%;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<div class="redPocket"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'redPocket',
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 红包装账
|
||||
setPocket() {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "散点图数据分析",
|
||||
top: "6%",
|
||||
left: '2%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "23%",
|
||||
bottom: '10%'
|
||||
},
|
||||
xAxis: {
|
||||
scale: true,
|
||||
name: '次数',
|
||||
nameTextStyle: {
|
||||
color: "#0FB9CD",
|
||||
fontSize: 10
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#0FB9CD',
|
||||
fontSize: 8
|
||||
},
|
||||
axisTick: {
|
||||
color: '#14336D'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#14336D'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
scale: true,
|
||||
name: '金额',
|
||||
nameTextStyle: {
|
||||
color: "#0FB9CD",
|
||||
fontSize: 10,
|
||||
padding: [0, 65, -10, 0]
|
||||
},
|
||||
axisTick: {show: false},
|
||||
axisLabel: {
|
||||
color: '#0FB9CD',
|
||||
fontSize: 8
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#134076'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#14336D'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'effectScatter',
|
||||
symbolSize: 10,
|
||||
z: 10,
|
||||
itemStyle: {
|
||||
color: '#FF1200'
|
||||
},
|
||||
data: [
|
||||
[172.7, 105.2],
|
||||
[153.4, 42]
|
||||
]
|
||||
}, {
|
||||
type: 'scatter',
|
||||
itemStyle: {
|
||||
color: '#0E4CFF'
|
||||
},
|
||||
data: [
|
||||
[162.8, 58.0], [167.0, 59.8], [60.0, 54.8], [160.0, 43.2], [168.9, 60.5],
|
||||
[158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [67.1, 62.2], [158.0, 55.5],
|
||||
[122.6, 57.8], [26.0, 54.6], [162.1, 59.2], [133.4, 52.7], [59.8, 53.2],
|
||||
[70.5, 64.5], [159.2, 51.8], [57.5, 56.0], [61.3, 63.6], [132.6, 63.2],
|
||||
[60.0, 59.5], [168.9, 56.8], [65.1, 64.1], [132.6, 50.0], [165.1, 72.3],
|
||||
[66.4, 55.0], [60.0, 55.9], [52.4, 60.4], [140.2, 69.1], [12.6, 84.5],
|
||||
[70.2, 55.9], [158.8, 55.5], [112.7, 69.5], [67.6, 76.4], [162.6, 61.4],
|
||||
[87.6, 65.9], [56.2, 58.6], [175.2, 66.8], [72.1, 56.6], [162.6, 58.6],
|
||||
[90.0, 55.9], [165.1, 59.1], [102.9, 81.8], [66.4, 70.7], [125.1, 56.8],
|
||||
[102.7, 75.9] [101.3, 57.3], [167.6, 55.0], [65.1, 65.5],
|
||||
[157.5, 48.6], [63.8, 58.6], [67.6, 63.6], [65.1, 55.2],
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'scatter',
|
||||
itemStyle: {
|
||||
color: '#2E62F9'
|
||||
},
|
||||
data: [[161.2, 2.6], [127.5, 59.0], [159.5, 49.2], [17.0, 63.0], [155.8, 53.6],
|
||||
[170.0, 59.0], [19.1, 47.6], [166.0, 69.8], [116.2, 66.8], [160.2, 75.2],
|
||||
[172.5, 55.2], [110.9, 54.2], [12.9, 62.5], [153.4, 42.0], [110.0, 50.0],
|
||||
[10.2, 49.8], [88.2, 49.2], [175.0, 73.2], [157.0, 47.8], [67.6, 68.8],
|
||||
[159.5, 50.6], [175.0, 82.5], [86.8, 57.2], [96.5, 87.8], [90.2, 72.8],
|
||||
[174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [110.5, 67.8], [60.0, 47.0],
|
||||
[154.4, 46.2], [82.0, 55.0], [86.5, 83.0], [10.0, 54.4], [52.0, 45.8],
|
||||
[162.1, 53.6], [170.0, 73.2], [60.2, 52.1], [121.3, 67.9], [116.4, 56.6],
|
||||
|
||||
],
|
||||
}]
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
|
||||
this.myChart.clear();
|
||||
this.myChart.resize();
|
||||
this.myChart.setOption(option);
|
||||
},
|
||||
}, mounted() {
|
||||
this.setPocket();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.redPocket {
|
||||
height: 100%
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<div class="chart"></div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
data: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setChart() {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
title:
|
||||
|
||||
{
|
||||
text: this.data.title,
|
||||
top: "5%",
|
||||
left: '5%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
}
|
||||
},
|
||||
legend:
|
||||
{
|
||||
data: [
|
||||
{name: this.data.data[0].name, icon: 'circle'},
|
||||
{name: this.data.data[1].name, icon: 'circle'},
|
||||
],
|
||||
left: "center",
|
||||
top: "17%",
|
||||
orient: 'horizontal',
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
itemGap: 10,
|
||||
textStyle: {
|
||||
color: '#67C3D6',
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
grid:
|
||||
{
|
||||
left: "5%",
|
||||
top: '35%',
|
||||
right: '5%',
|
||||
bottom: '15%'
|
||||
},
|
||||
xAxis:
|
||||
{
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#2B427F'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#0DF5F8',
|
||||
fontSize: 8,
|
||||
interval: 0,
|
||||
},
|
||||
axisTick: {
|
||||
inside: true,
|
||||
alignWithLabel: true,
|
||||
interval: 0,
|
||||
color: '#2B427F'
|
||||
},
|
||||
data: ['TOP1', 'TOP2', 'TOP3', 'TOP4', 'TOP5', 'TOP6']
|
||||
},
|
||||
|
||||
|
||||
yAxis:
|
||||
{
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#2B427F'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
name: this.data.data[0].name,
|
||||
barWidth: 4,
|
||||
barGap: 0,
|
||||
itemStyle: {
|
||||
borderRadius: 2,
|
||||
color: this.data.data[0].color
|
||||
},
|
||||
data: this.data.data[0].value
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
name: this.data.data[1].name,
|
||||
barWidth: 4,
|
||||
barGap: 0,
|
||||
itemStyle: {
|
||||
borderRadius: 2,
|
||||
color: this.data.data[1].color
|
||||
},
|
||||
data: this.data.data[1].value
|
||||
},
|
||||
]
|
||||
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
<template>
|
||||
<div class="webcastsRisk"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'webcastsRisk',
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 网播风险分析
|
||||
setWebcasts() {
|
||||
let option = {
|
||||
|
||||
title: {
|
||||
text: '重点用户关注排行',
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12
|
||||
},
|
||||
top: '4%',
|
||||
left: '4%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [
|
||||
{name: '分类1', icon: 'circle'},
|
||||
{name: '分类2', icon: 'circle'},
|
||||
{name: '分类3', icon: 'circle'},
|
||||
{name: '其他', icon: 'circle'},
|
||||
],
|
||||
gridIndex: 3,
|
||||
right: "5%",
|
||||
top: "6%",
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
color: '#00CCFF',
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '3%',
|
||||
right: '50%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
splitLine: {show: false},
|
||||
axisLine: {show: false}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisTick: {show: false},
|
||||
splitLine: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
backgroundColor: '#4A7AFF',
|
||||
borderRadius: 3,
|
||||
margin: 0,
|
||||
padding: [1, 3, 1, 3]
|
||||
},
|
||||
inverse: true,
|
||||
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '分类1',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
barWidth: 8,
|
||||
itemStyle: {
|
||||
color: '#142AFE',
|
||||
borderRadius: [0, 8, 8, 0]
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
|
||||
position: 'insideRight'
|
||||
},
|
||||
data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 15]
|
||||
},
|
||||
{
|
||||
name: '分类2',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
barWidth: 8,
|
||||
itemStyle: {
|
||||
color: '#1456FE',
|
||||
borderRadius: [0, 8, 8, 0]
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'insideRight'
|
||||
},
|
||||
data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 15]
|
||||
},
|
||||
{
|
||||
name: '分类3',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
barWidth: 8,
|
||||
itemStyle: {
|
||||
color: '#1493FE',
|
||||
borderRadius: [0, 8, 8, 0]
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'insideRight'
|
||||
},
|
||||
data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 15]
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
type: 'bar',
|
||||
barWidth: 8,
|
||||
stack: '总量',
|
||||
itemStyle: {
|
||||
color: '#00CCFF',
|
||||
borderRadius: [0, 8, 8, 0]
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'insideRight'
|
||||
},
|
||||
data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 15]
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['20%', '21%'],
|
||||
center: ['72%', '60%'],
|
||||
data: [{value: '1'}],
|
||||
label: {show: false},
|
||||
itemStyle: {
|
||||
color: '#7D7DA2'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['40%', '65%'],
|
||||
roseType: 'area',
|
||||
center: ['72%', '60%'],
|
||||
avoidLabelOverlap: true,
|
||||
startAngle: 180,
|
||||
label: {
|
||||
show: true,
|
||||
padding: [0, -30],
|
||||
formatter: '{c} \n\n',
|
||||
position: 'outside',
|
||||
color: '#fff',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '30',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length2: 30,
|
||||
lineStyle: {
|
||||
//color:["#408BE8",'#FE405C',"#3E3E7F","#FFC740"]
|
||||
},
|
||||
|
||||
},
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
let corList = ["#142AFE", '#3FA0FF', "#00CCFF", "#1456FE"];
|
||||
return corList[params.dataIndex]
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 535, name: '分类1'},
|
||||
{value: 310, name: '分类2'},
|
||||
{value: 135, name: '分类3'},
|
||||
{value: 254, name: '其他'},
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
|
||||
this.myChart.clear();
|
||||
this.myChart.resize();
|
||||
this.myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.setWebcasts()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.webcastsRisk {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,249 @@
|
|||
<template>
|
||||
<div class='deviceSafeRisk'></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'deviceSafeRisk',
|
||||
data() {
|
||||
return {
|
||||
myChart:null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 设备安全性风险
|
||||
setDeviceSafe() {
|
||||
let option = {
|
||||
title: [
|
||||
{
|
||||
text: '重点用户关注排行',
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12
|
||||
},
|
||||
top: '4%',
|
||||
left: '4%'
|
||||
},
|
||||
{
|
||||
text: "分类排行标题",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12
|
||||
},
|
||||
top: '4%',
|
||||
left: '55%'
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [
|
||||
{name: '人数', icon: 'circle'},
|
||||
{name: '金额', icon: 'circle'},
|
||||
|
||||
],
|
||||
gridIndex: 3,
|
||||
orient: 'vertical',
|
||||
right: "44%",
|
||||
bottom: "6%",
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
color: '#00CCFF',
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '3%',
|
||||
right: '50%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
splitLine: {show: false},
|
||||
axisLine: {show: false}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisTick: {show: false},
|
||||
splitLine: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
backgroundColor: '#A34FFA',
|
||||
borderRadius: 3,
|
||||
margin: 0,
|
||||
padding: [1, 3, 1, 3]
|
||||
},
|
||||
inverse: true,
|
||||
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
|
||||
},
|
||||
angleAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#172E6E'
|
||||
}
|
||||
},
|
||||
startAngle: 135,
|
||||
axisLabel: {
|
||||
color: '#04E8EB',
|
||||
fontSize: 10
|
||||
},
|
||||
axisTick: {show: false},
|
||||
data: ['分类1', '分类2', '分类3', '分类4'],
|
||||
z: 10
|
||||
},
|
||||
radiusAxis: {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#172E6E'
|
||||
}
|
||||
},
|
||||
axisTick: {show: false},
|
||||
axisLabel: {show: false},
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
polar: {
|
||||
center: ['72%', '55%'],
|
||||
radius: "65%",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '分类1',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
barWidth: 8,
|
||||
itemStyle: {
|
||||
color: '#5304EC',
|
||||
borderRadius: [0, 8, 8, 0]
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
|
||||
position: 'insideRight'
|
||||
},
|
||||
data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 15]
|
||||
},
|
||||
{
|
||||
name: '分类2',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
barWidth: 8,
|
||||
itemStyle: {
|
||||
color: '#6829EE',
|
||||
borderRadius: [0, 8, 8, 0]
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'insideRight'
|
||||
},
|
||||
data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 15]
|
||||
},
|
||||
{
|
||||
name: '分类3',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
barWidth: 8,
|
||||
itemStyle: {
|
||||
color: '#8040ED',
|
||||
borderRadius: [0, 8, 8, 0]
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'insideRight'
|
||||
},
|
||||
data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 15]
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
type: 'bar',
|
||||
barWidth: 8,
|
||||
stack: '总量',
|
||||
itemStyle: {
|
||||
color: '#9D50EC',
|
||||
borderRadius: [0, 8, 8, 0]
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'insideRight'
|
||||
},
|
||||
data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 15]
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
type: 'bar',
|
||||
barWidth: 8,
|
||||
stack: '总量',
|
||||
itemStyle: {
|
||||
color: '#A77BDE',
|
||||
borderRadius: [0, 8, 8, 0]
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'insideRight'
|
||||
},
|
||||
data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 15]
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
data: [1, 2, 3, 4],
|
||||
coordinateSystem: 'polar',
|
||||
name: '金额',
|
||||
itemStyle: {
|
||||
color: '#0AB9FE'
|
||||
},
|
||||
stack: 'a'
|
||||
}, {
|
||||
type: 'bar',
|
||||
data: [2, 4, 6, 1],
|
||||
coordinateSystem: 'polar',
|
||||
name: '人数',
|
||||
itemStyle: {
|
||||
color: { // 颜色线性渐变
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(104,18,147,1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#1D2584' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
stack: 'a'
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.setDeviceSafe();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.deviceSafeRisk {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<template>
|
||||
<div class="ring">
|
||||
<canvas :id="id"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
id: String,
|
||||
title: String,
|
||||
color: String
|
||||
},
|
||||
name: '',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
drawRing() {
|
||||
var canvas = document.getElementById(this.id);
|
||||
var context = canvas.getContext('2d');
|
||||
canvas.width = this.$el.offsetWidth;
|
||||
canvas.height = this.$el.offsetHeight;
|
||||
context.lineWidth = 1;
|
||||
context.strokeStyle = "#16417F";
|
||||
context.save();
|
||||
context.beginPath();
|
||||
context.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2 - 6, 0, 2 * Math.PI, false);
|
||||
context.stroke();
|
||||
context.restore();
|
||||
context.save();
|
||||
context.beginPath();
|
||||
context.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2 - 12, 0, 2 * Math.PI, false);
|
||||
context.stroke();
|
||||
context.restore();
|
||||
var percent1 = 60;
|
||||
var percent2 = 60;
|
||||
var angle1 = percent1 * 3.6 - 90;
|
||||
var angle2 = percent2 * 3.6 - 60;
|
||||
context.lineWidth = 4;
|
||||
|
||||
context.lineCap = 'round';
|
||||
context.save();
|
||||
context.strokeStyle = "#035EFF";
|
||||
context.beginPath();
|
||||
context.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2 - 6, -Math.PI / 2, angle1 * Math.PI / 180, false);
|
||||
context.stroke();
|
||||
context.restore();
|
||||
context.save();
|
||||
context.beginPath();
|
||||
context.strokeStyle = this.color;
|
||||
context.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2 - 12, -Math.PI / 6, angle2 * Math.PI / 180, false);
|
||||
context.stroke();
|
||||
context.restore();
|
||||
context.save();
|
||||
context.font = '10px Microsoft YaHei';
|
||||
context.fillStyle = '#fff';
|
||||
if (this.title.length > 4) {
|
||||
context.fillText(this.title, canvas.width / 2 - 25, canvas.height / 2 + 3);
|
||||
} else {
|
||||
context.fillText(this.title, canvas.width / 2 - 20, canvas.height / 2 + 3);
|
||||
}
|
||||
|
||||
context.restore();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.drawRing();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ring {
|
||||
width: 100%;
|
||||
height: 33.33333%;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,633 @@
|
|||
<template>
|
||||
<div class="hotWords"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'hotWords',
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 舆论、心里风险分析
|
||||
setChart() {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: [
|
||||
{name: '分类排行', icon: 'circle'},
|
||||
{name: '用户排行', icon: 'circle'},
|
||||
|
||||
],
|
||||
gridIndex: 3,
|
||||
left: "28.5%",
|
||||
top: "4%",
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
color: '#00CCFF',
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
left: "10%",
|
||||
top: '12%',
|
||||
bottom: "64%",
|
||||
width: '35%'
|
||||
},
|
||||
{
|
||||
left: "48%",
|
||||
top: '12%',
|
||||
bottom: "64%",
|
||||
width: 1
|
||||
},
|
||||
{
|
||||
right: "15%",
|
||||
top: '12%',
|
||||
bottom: "64%",
|
||||
width: '35%'
|
||||
},
|
||||
{
|
||||
left: "10%",
|
||||
top: '41.5%',
|
||||
bottom: "35%",
|
||||
width: '35%'
|
||||
},
|
||||
{
|
||||
left: "48%",
|
||||
top: '41.5%',
|
||||
bottom: "35%",
|
||||
width: 1
|
||||
},
|
||||
{
|
||||
right: "15%",
|
||||
top: '41.5%',
|
||||
bottom: "35%",
|
||||
width: '35%'
|
||||
},
|
||||
{
|
||||
left: "10%",
|
||||
top: '70%',
|
||||
bottom: "5%",
|
||||
width: '35%'
|
||||
},
|
||||
{
|
||||
left: "48%",
|
||||
top: '70%',
|
||||
bottom: "5%",
|
||||
width: 1
|
||||
},
|
||||
{
|
||||
right: "15%",
|
||||
top: '70%',
|
||||
bottom: "5%",
|
||||
width: '35%'
|
||||
},
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: "value",
|
||||
inverse: true,
|
||||
splitLine: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
gridIndex: 1,
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
gridIndex: 2,
|
||||
splitLine: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
gridIndex: 3,
|
||||
inverse: true,
|
||||
splitLine: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
gridIndex: 4,
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
gridIndex: 5,
|
||||
splitLine: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
gridIndex: 6,
|
||||
inverse: true,
|
||||
splitLine: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
gridIndex: 7,
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
gridIndex: 8,
|
||||
splitLine: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
data: [1, 2, 3, 4, 5],
|
||||
inverse: true,
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
axisLine: {show: false}
|
||||
},
|
||||
{
|
||||
data: [1, 2],
|
||||
gridIndex: 1,
|
||||
offset: -1,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#153575'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
color: '#153575'
|
||||
},
|
||||
boundaryGap: false,
|
||||
showMinLabel: true,
|
||||
showMaxLabel: true,
|
||||
axisLabel: {show: false}
|
||||
},
|
||||
{
|
||||
data: [1, 2],
|
||||
gridIndex: 1,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#153575'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
color: '#153575'
|
||||
},
|
||||
boundaryGap: false,
|
||||
showMinLabel: true,
|
||||
showMaxLabel: true,
|
||||
axisLabel: {show: false}
|
||||
},
|
||||
{
|
||||
data: [1, 2, 3, 4, 5],
|
||||
gridIndex: 2,
|
||||
inverse: true,
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
axisLine: {show: false}
|
||||
},
|
||||
{
|
||||
data: [1, 2, 3, 4, 5],
|
||||
gridIndex: 3,
|
||||
inverse: true,
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
axisLine: {show: false}
|
||||
},
|
||||
{
|
||||
data: [1, 2],
|
||||
gridIndex: 4,
|
||||
offset: -1,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#153575'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
color: '#153575'
|
||||
},
|
||||
boundaryGap: false,
|
||||
showMinLabel: true,
|
||||
showMaxLabel: true,
|
||||
axisLabel: {show: false}
|
||||
},
|
||||
{
|
||||
data: [1, 2],
|
||||
gridIndex: 4,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#153575'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
color: '#153575'
|
||||
},
|
||||
boundaryGap: false,
|
||||
showMinLabel: true,
|
||||
showMaxLabel: true,
|
||||
axisLabel: {show: false}
|
||||
},
|
||||
{
|
||||
data: [1, 2, 3, 4, 5],
|
||||
gridIndex: 5,
|
||||
inverse: true,
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
axisLine: {show: false}
|
||||
},
|
||||
{
|
||||
data: [1, 2, 3, 4, 5],
|
||||
gridIndex: 6,
|
||||
inverse: true,
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
axisLine: {show: false}
|
||||
},
|
||||
{
|
||||
data: [1, 2],
|
||||
gridIndex: 7,
|
||||
offset: -1,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#153575'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
color: '#153575'
|
||||
},
|
||||
boundaryGap: false,
|
||||
showMinLabel: true,
|
||||
showMaxLabel: true,
|
||||
axisLabel: {show: false}
|
||||
},
|
||||
{
|
||||
data: [1, 2],
|
||||
gridIndex: 7,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#153575'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
color: '#153575'
|
||||
},
|
||||
boundaryGap: false,
|
||||
showMinLabel: true,
|
||||
showMaxLabel: true,
|
||||
axisLabel: {show: false}
|
||||
},
|
||||
{
|
||||
data: [1, 2, 3, 4, 5],
|
||||
gridIndex: 8,
|
||||
inverse: true,
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
axisLine: {show: false}
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '分类排行',
|
||||
type: 'bar',
|
||||
barWidth: 6,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'left',
|
||||
formatter: "{b}",
|
||||
color: '#6EDDF2'
|
||||
},
|
||||
itemStyle: {
|
||||
color: { // 颜色线性渐变
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(4,85,229,1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(4,85,229,0)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
borderRadius: 5,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 500,
|
||||
name: '分类数据1'
|
||||
},
|
||||
{
|
||||
value: 424,
|
||||
name: '分类数据2'
|
||||
},
|
||||
{
|
||||
value: 332,
|
||||
name: '分类数据3'
|
||||
},
|
||||
{
|
||||
value: 264,
|
||||
name: '分类数据4'
|
||||
},
|
||||
{
|
||||
value: 144,
|
||||
name: '分类数据5'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '用户排行',
|
||||
type: 'bar',
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 3,
|
||||
barWidth: 6,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
formatter: "{b}",
|
||||
color: '#6EDDF2'
|
||||
},
|
||||
itemStyle: {
|
||||
color: { // 颜色线性渐变
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(1,176,223,0)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(1,176,223,1)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
borderRadius: 5,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 500,
|
||||
name: '张学友'
|
||||
},
|
||||
{
|
||||
value: 424,
|
||||
name: '刘德华'
|
||||
},
|
||||
{
|
||||
value: 332,
|
||||
name: '郭富城'
|
||||
},
|
||||
{
|
||||
value: 264,
|
||||
name: '黎明'
|
||||
},
|
||||
{
|
||||
value: 144,
|
||||
name: '周华健'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '分类排行',
|
||||
type: 'bar',
|
||||
barWidth: 6,
|
||||
xAxisIndex: 3,
|
||||
yAxisIndex: 4,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'left',
|
||||
formatter: "{b}",
|
||||
color: '#6EDDF2'
|
||||
},
|
||||
itemStyle: {
|
||||
color: { // 颜色线性渐变
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(4,85,229,1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(4,85,229,0)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
borderRadius: 5,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 500,
|
||||
name: '分类数据1'
|
||||
},
|
||||
{
|
||||
value: 424,
|
||||
name: '分类数据2'
|
||||
},
|
||||
{
|
||||
value: 332,
|
||||
name: '分类数据3'
|
||||
},
|
||||
{
|
||||
value: 264,
|
||||
name: '分类数据4'
|
||||
},
|
||||
{
|
||||
value: 144,
|
||||
name: '分类数据5'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '用户排行',
|
||||
type: 'bar',
|
||||
xAxisIndex: 5,
|
||||
yAxisIndex: 7,
|
||||
barWidth: 6,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
formatter: "{b}",
|
||||
color: '#6EDDF2'
|
||||
},
|
||||
itemStyle: {
|
||||
color: { // 颜色线性渐变
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(1,176,223,0)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(1,176,223,1)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
borderRadius: 5,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 500,
|
||||
name: '张学友'
|
||||
},
|
||||
{
|
||||
value: 424,
|
||||
name: '刘德华'
|
||||
},
|
||||
{
|
||||
value: 332,
|
||||
name: '郭富城'
|
||||
},
|
||||
{
|
||||
value: 264,
|
||||
name: '黎明'
|
||||
},
|
||||
{
|
||||
value: 144,
|
||||
name: '周华健'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '分类排行',
|
||||
type: 'bar',
|
||||
barWidth: 6,
|
||||
xAxisIndex: 6,
|
||||
yAxisIndex: 8,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'left',
|
||||
formatter: "{b}",
|
||||
color: '#6EDDF2'
|
||||
},
|
||||
itemStyle: {
|
||||
color: { // 颜色线性渐变
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(4,85,229,1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(4,85,229,0)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
borderRadius: 5,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 500,
|
||||
name: '分类数据1'
|
||||
},
|
||||
{
|
||||
value: 424,
|
||||
name: '分类数据2'
|
||||
},
|
||||
{
|
||||
value: 332,
|
||||
name: '分类数据3'
|
||||
},
|
||||
{
|
||||
value: 264,
|
||||
name: '分类数据4'
|
||||
},
|
||||
{
|
||||
value: 144,
|
||||
name: '分类数据5'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '用户排行',
|
||||
type: 'bar',
|
||||
xAxisIndex: 8,
|
||||
yAxisIndex: 11,
|
||||
barWidth: 6,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
formatter: "{b}",
|
||||
color: '#6EDDF2'
|
||||
},
|
||||
itemStyle: {
|
||||
color: { // 颜色线性渐变
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(1,176,223,0)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(1,176,223,1)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
borderRadius: 5,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 500,
|
||||
name: '张学友'
|
||||
},
|
||||
{
|
||||
value: 424,
|
||||
name: '刘德华'
|
||||
},
|
||||
{
|
||||
value: 332,
|
||||
name: '郭富城'
|
||||
},
|
||||
{
|
||||
value: 264,
|
||||
name: '黎明'
|
||||
},
|
||||
{
|
||||
value: 144,
|
||||
name: '周华健'
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
this.myChart.clear();
|
||||
this.myChart.resize();
|
||||
this.myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.setChart()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.hotWords {
|
||||
height: 100%;
|
||||
width: 70%;
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,845 @@
|
|||
<template>
|
||||
<div class="chinaMap"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "@/lib/china.js"
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setMap() {
|
||||
var data = [
|
||||
{name: '鄂尔多斯', value: 125},
|
||||
{name: '广州', value: 238},
|
||||
{name: '贵阳', value: 171},
|
||||
{name: '宝鸡', value: 272},
|
||||
{name: '长沙', value: 175},
|
||||
{name: '衢州', value: 177},
|
||||
{name: '廊坊', value: 193},
|
||||
{name: '菏泽', value: 194},
|
||||
{name: '合肥', value: 229},
|
||||
{name: '大庆', value: 279}
|
||||
];
|
||||
var geoCoordMap = {
|
||||
'海门': [121.15, 31.89],
|
||||
'鄂尔多斯': [109.781327, 39.608266],
|
||||
'招远': [120.38, 37.35],
|
||||
'舟山': [122.207216, 29.985295],
|
||||
'齐齐哈尔': [123.97, 47.33],
|
||||
'盐城': [120.13, 33.38],
|
||||
'赤峰': [118.87, 42.28],
|
||||
'青岛': [120.33, 36.07],
|
||||
'乳山': [121.52, 36.89],
|
||||
'金昌': [102.188043, 38.520089],
|
||||
'泉州': [118.58, 24.93],
|
||||
'莱西': [120.53, 36.86],
|
||||
'日照': [119.46, 35.42],
|
||||
'胶南': [119.97, 35.88],
|
||||
'南通': [121.05, 32.08],
|
||||
'拉萨': [91.11, 29.97],
|
||||
'云浮': [112.02, 22.93],
|
||||
'梅州': [116.1, 24.55],
|
||||
'文登': [122.05, 37.2],
|
||||
'上海': [121.48, 31.22],
|
||||
'攀枝花': [101.718637, 26.582347],
|
||||
'威海': [122.1, 37.5],
|
||||
'承德': [117.93, 40.97],
|
||||
'厦门': [118.1, 24.46],
|
||||
'汕尾': [115.375279, 22.786211],
|
||||
'潮州': [116.63, 23.68],
|
||||
'丹东': [124.37, 40.13],
|
||||
'太仓': [121.1, 31.45],
|
||||
'曲靖': [103.79, 25.51],
|
||||
'烟台': [121.39, 37.52],
|
||||
'福州': [119.3, 26.08],
|
||||
'瓦房店': [121.979603, 39.627114],
|
||||
'即墨': [120.45, 36.38],
|
||||
'抚顺': [123.97, 41.97],
|
||||
'玉溪': [102.52, 24.35],
|
||||
'张家口': [114.87, 40.82],
|
||||
'阳泉': [113.57, 37.85],
|
||||
'莱州': [119.942327, 37.177017],
|
||||
'湖州': [120.1, 30.86],
|
||||
'汕头': [116.69, 23.39],
|
||||
'昆山': [120.95, 31.39],
|
||||
'宁波': [121.56, 29.86],
|
||||
'湛江': [110.359377, 21.270708],
|
||||
'揭阳': [116.35, 23.55],
|
||||
'荣成': [122.41, 37.16],
|
||||
'连云港': [119.16, 34.59],
|
||||
'葫芦岛': [120.836932, 40.711052],
|
||||
'常熟': [120.74, 31.64],
|
||||
'东莞': [113.75, 23.04],
|
||||
'河源': [114.68, 23.73],
|
||||
'淮安': [119.15, 33.5],
|
||||
'泰州': [119.9, 32.49],
|
||||
'南宁': [108.33, 22.84],
|
||||
'营口': [122.18, 40.65],
|
||||
'惠州': [114.4, 23.09],
|
||||
'江阴': [120.26, 31.91],
|
||||
'蓬莱': [120.75, 37.8],
|
||||
'韶关': [113.62, 24.84],
|
||||
'嘉峪关': [98.289152, 39.77313],
|
||||
'广州': [113.23, 23.16],
|
||||
'延安': [109.47, 36.6],
|
||||
'太原': [112.53, 37.87],
|
||||
'清远': [113.01, 23.7],
|
||||
'中山': [113.38, 22.52],
|
||||
'昆明': [102.73, 25.04],
|
||||
'寿光': [118.73, 36.86],
|
||||
'盘锦': [122.070714, 41.119997],
|
||||
'长治': [113.08, 36.18],
|
||||
'深圳': [114.07, 22.62],
|
||||
'珠海': [113.52, 22.3],
|
||||
'宿迁': [118.3, 33.96],
|
||||
'咸阳': [108.72, 34.36],
|
||||
'铜川': [109.11, 35.09],
|
||||
'平度': [119.97, 36.77],
|
||||
'佛山': [113.11, 23.05],
|
||||
'海口': [110.35, 20.02],
|
||||
'江门': [113.06, 22.61],
|
||||
'章丘': [117.53, 36.72],
|
||||
'肇庆': [112.44, 23.05],
|
||||
'大连': [121.62, 38.92],
|
||||
'临汾': [111.5, 36.08],
|
||||
'吴江': [120.63, 31.16],
|
||||
'石嘴山': [106.39, 39.04],
|
||||
'沈阳': [123.38, 41.8],
|
||||
'苏州': [120.62, 31.32],
|
||||
'茂名': [110.88, 21.68],
|
||||
'嘉兴': [120.76, 30.77],
|
||||
'长春': [125.35, 43.88],
|
||||
'胶州': [120.03336, 36.264622],
|
||||
'银川': [106.27, 38.47],
|
||||
'张家港': [120.555821, 31.875428],
|
||||
'三门峡': [111.19, 34.76],
|
||||
'锦州': [121.15, 41.13],
|
||||
'南昌': [115.89, 28.68],
|
||||
'柳州': [109.4, 24.33],
|
||||
'三亚': [109.511909, 18.252847],
|
||||
'自贡': [104.778442, 29.33903],
|
||||
'吉林': [126.57, 43.87],
|
||||
'阳江': [111.95, 21.85],
|
||||
'泸州': [105.39, 28.91],
|
||||
'西宁': [101.74, 36.56],
|
||||
'宜宾': [104.56, 29.77],
|
||||
'呼和浩特': [111.65, 40.82],
|
||||
'成都': [104.06, 30.67],
|
||||
'大同': [113.3, 40.12],
|
||||
'镇江': [119.44, 32.2],
|
||||
'桂林': [110.28, 25.29],
|
||||
'张家界': [110.479191, 29.117096],
|
||||
'宜兴': [119.82, 31.36],
|
||||
'北海': [109.12, 21.49],
|
||||
'西安': [108.95, 34.27],
|
||||
'金坛': [119.56, 31.74],
|
||||
'东营': [118.49, 37.46],
|
||||
'牡丹江': [129.58, 44.6],
|
||||
'遵义': [106.9, 27.7],
|
||||
'绍兴': [120.58, 30.01],
|
||||
'扬州': [119.42, 32.39],
|
||||
'常州': [119.95, 31.79],
|
||||
'潍坊': [119.1, 36.62],
|
||||
'重庆': [106.54, 29.59],
|
||||
'台州': [121.420757, 28.656386],
|
||||
'南京': [118.78, 32.04],
|
||||
'滨州': [118.03, 37.36],
|
||||
'贵阳': [106.71, 26.57],
|
||||
'无锡': [120.29, 31.59],
|
||||
'本溪': [123.73, 41.3],
|
||||
'克拉玛依': [84.77, 45.59],
|
||||
'渭南': [109.5, 34.52],
|
||||
'马鞍山': [118.48, 31.56],
|
||||
'宝鸡': [107.15, 34.38],
|
||||
'焦作': [113.21, 35.24],
|
||||
'句容': [119.16, 31.95],
|
||||
'北京': [116.46, 39.92],
|
||||
'徐州': [117.2, 34.26],
|
||||
'衡水': [115.72, 37.72],
|
||||
'包头': [110, 40.58],
|
||||
'绵阳': [104.73, 31.48],
|
||||
'乌鲁木齐': [87.68, 43.77],
|
||||
'枣庄': [117.57, 34.86],
|
||||
'杭州': [120.19, 30.26],
|
||||
'淄博': [118.05, 36.78],
|
||||
'鞍山': [122.85, 41.12],
|
||||
'溧阳': [119.48, 31.43],
|
||||
'库尔勒': [86.06, 41.68],
|
||||
'安阳': [114.35, 36.1],
|
||||
'开封': [114.35, 34.79],
|
||||
'济南': [117, 36.65],
|
||||
'德阳': [104.37, 31.13],
|
||||
'温州': [120.65, 28.01],
|
||||
'九江': [115.97, 29.71],
|
||||
'邯郸': [114.47, 36.6],
|
||||
'临安': [119.72, 30.23],
|
||||
'兰州': [103.73, 36.03],
|
||||
'沧州': [116.83, 38.33],
|
||||
'临沂': [118.35, 35.05],
|
||||
'南充': [106.110698, 30.837793],
|
||||
'天津': [117.2, 39.13],
|
||||
'富阳': [119.95, 30.07],
|
||||
'泰安': [117.13, 36.18],
|
||||
'诸暨': [120.23, 29.71],
|
||||
'郑州': [113.65, 34.76],
|
||||
'哈尔滨': [126.63, 45.75],
|
||||
'聊城': [115.97, 36.45],
|
||||
'芜湖': [118.38, 31.33],
|
||||
'唐山': [118.02, 39.63],
|
||||
'平顶山': [113.29, 33.75],
|
||||
'邢台': [114.48, 37.05],
|
||||
'德州': [116.29, 37.45],
|
||||
'济宁': [116.59, 35.38],
|
||||
'荆州': [112.239741, 30.335165],
|
||||
'宜昌': [111.3, 30.7],
|
||||
'义乌': [120.06, 29.32],
|
||||
'丽水': [119.92, 28.45],
|
||||
'洛阳': [112.44, 34.7],
|
||||
'秦皇岛': [119.57, 39.95],
|
||||
'株洲': [113.16, 27.83],
|
||||
'石家庄': [114.48, 38.03],
|
||||
'莱芜': [117.67, 36.19],
|
||||
'常德': [111.69, 29.05],
|
||||
'保定': [115.48, 38.85],
|
||||
'湘潭': [112.91, 27.87],
|
||||
'金华': [119.64, 29.12],
|
||||
'岳阳': [113.09, 29.37],
|
||||
'长沙': [113, 28.21],
|
||||
'衢州': [118.88, 28.97],
|
||||
'廊坊': [116.7, 39.53],
|
||||
'菏泽': [115.480656, 35.23375],
|
||||
'合肥': [117.27, 31.86],
|
||||
'武汉': [114.31, 30.52],
|
||||
'大庆': [125.03, 46.58]
|
||||
};
|
||||
|
||||
var convertData = function (data) {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value)
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
let option = {
|
||||
title: [
|
||||
{
|
||||
text: '数据1',
|
||||
top: '4.8%',
|
||||
left: '7.5%',
|
||||
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontWeight: 'normal',
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '数据2',
|
||||
top: '11.5%',
|
||||
left: '7.5%',
|
||||
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontWeight: 'normal',
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '数据3',
|
||||
top: '4.8%',
|
||||
left: '37.5%',
|
||||
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontWeight: 'normal',
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '数据4',
|
||||
top: '11.5%',
|
||||
left: '37.5%',
|
||||
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontWeight: 'normal',
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '数据5',
|
||||
top: '4.8%',
|
||||
left: '67.5%',
|
||||
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontWeight: 'normal',
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '数据6',
|
||||
top: '11.5%',
|
||||
left: '67.5%',
|
||||
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontWeight: 'normal',
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: [
|
||||
{
|
||||
top: '3%',
|
||||
left: '17.5%',
|
||||
height: '5%',
|
||||
right: "67.5%"
|
||||
},
|
||||
{
|
||||
top: '10%',
|
||||
height: '5%',
|
||||
left: '15.5%',
|
||||
right: "67.5%"
|
||||
},
|
||||
{
|
||||
top: '3%',
|
||||
left: '47.5%',
|
||||
height: '5%',
|
||||
right: "37.5%"
|
||||
},
|
||||
{
|
||||
top: '10%',
|
||||
height: '5%',
|
||||
left: '47.5%',
|
||||
right: "37.5%"
|
||||
},
|
||||
{
|
||||
top: '3%',
|
||||
left: '77.5%',
|
||||
height: '5%',
|
||||
right: "7.5%"
|
||||
},
|
||||
{
|
||||
top: '10%',
|
||||
height: '5%',
|
||||
left: '77.5%',
|
||||
right: "7.5%"
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#4F2561'
|
||||
}
|
||||
},
|
||||
inverse: true,
|
||||
boundaryGap: false,
|
||||
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
||||
},
|
||||
{
|
||||
gridIndex: 1,
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#51323E'
|
||||
}
|
||||
},
|
||||
inverse: true,
|
||||
boundaryGap: false,
|
||||
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
||||
},
|
||||
{
|
||||
gridIndex: 2,
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#55594B'
|
||||
}
|
||||
},
|
||||
inverse: true,
|
||||
boundaryGap: false,
|
||||
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
||||
},
|
||||
{
|
||||
gridIndex: 3,
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#451C45'
|
||||
}
|
||||
},
|
||||
inverse: true,
|
||||
boundaryGap: false,
|
||||
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
||||
},
|
||||
{
|
||||
gridIndex: 4,
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#1E5A79'
|
||||
}
|
||||
},
|
||||
inverse: true,
|
||||
boundaryGap: false,
|
||||
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
||||
},
|
||||
{
|
||||
gridIndex: 5,
|
||||
axisLabel: {show: false},
|
||||
axisTick: {show: false},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#172E6F'
|
||||
}
|
||||
},
|
||||
inverse: true,
|
||||
boundaryGap: false,
|
||||
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {show: false},
|
||||
position: "right",
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {show: false},
|
||||
splitLine: {show: false}
|
||||
},
|
||||
{
|
||||
gridIndex: 1,
|
||||
axisLabel: {show: false},
|
||||
position: "right",
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
|
||||
axisTick: {show: false},
|
||||
splitLine: {show: false},
|
||||
type: 'value'
|
||||
},
|
||||
{
|
||||
gridIndex: 2,
|
||||
axisLabel: {show: false},
|
||||
position: "right",
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
|
||||
axisTick: {show: false},
|
||||
splitLine: {show: false},
|
||||
type: 'value'
|
||||
},
|
||||
{
|
||||
gridIndex: 3,
|
||||
axisLabel: {show: false},
|
||||
position: "right",
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
|
||||
axisTick: {show: false},
|
||||
splitLine: {show: false},
|
||||
type: 'value'
|
||||
},
|
||||
{
|
||||
gridIndex: 4,
|
||||
axisLabel: {show: false},
|
||||
position: "right",
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
|
||||
axisTick: {show: false},
|
||||
splitLine: {show: false},
|
||||
type: 'value'
|
||||
},
|
||||
{
|
||||
gridIndex: 5,
|
||||
axisLabel: {show: false},
|
||||
position: "right",
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
|
||||
axisTick: {show: false},
|
||||
splitLine: {show: false},
|
||||
type: 'value'
|
||||
},
|
||||
],
|
||||
geo: {
|
||||
map: 'china',
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
|
||||
},
|
||||
roam: false,
|
||||
itemStyle: {
|
||||
areaColor: '#2043AA',
|
||||
borderColor: '#111'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'pm2.5',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: convertData(data.sort(function (a, b) {
|
||||
return b.value - a.value;
|
||||
}).slice(0, 10)),
|
||||
symbolSize: function (val) {
|
||||
return val[2] / 15;
|
||||
},
|
||||
showEffectOn: 'render',
|
||||
// rippleEffect: { // 效果
|
||||
// brushType: 'stroke'
|
||||
// },
|
||||
emphasis: {
|
||||
scale: true
|
||||
},
|
||||
label: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
var colorList = ['#FFA200', '#0006FF', '#D6FC01', '#00D8FF', '#FF00CC', '#FF1200']
|
||||
if (params.dataIndex <= 6) {
|
||||
return colorList[params.dataIndex]
|
||||
} else {
|
||||
return colorList[params.dataIndex % 6]
|
||||
}
|
||||
},
|
||||
shadowBlur: 10,
|
||||
},
|
||||
zlevel: 1
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(161,23,128,1)',
|
||||
width: 1
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(161,23,128,1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(161,23,128,0)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
//4,5,3,9,2,4,8,3,4,5
|
||||
data: [
|
||||
{
|
||||
value: 4, symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
itemStyle: {
|
||||
color: '#293880',
|
||||
borderColor: 'rgba(161,23,128,1)',
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
{value: 5, symbol: 'none'},
|
||||
{value: 3, symbol: 'none'},
|
||||
{value: 9, symbol: 'none'},
|
||||
{value: 2, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
{value: 8, symbol: 'none'},
|
||||
{value: 3, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
symbol: "none",
|
||||
smooth: true,
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
lineStyle: {
|
||||
color: 'rgba(196,103,20,1)',
|
||||
width: 1
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(196,103,20,1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(196,103,20,0)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 4, symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
itemStyle: {
|
||||
color: '#293880',
|
||||
borderColor: 'rgba(196,103,20,1)',
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
{value: 5, symbol: 'none'},
|
||||
{value: 3, symbol: 'none'},
|
||||
{value: 9, symbol: 'none'},
|
||||
{value: 2, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
{value: 8, symbol: 'none'},
|
||||
{value: 3, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 2,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(181,174,28,1)',
|
||||
width: 1
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(181,174,28,1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(181,174,28,0)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
//4,5,3,9,2,4,8,3,4,5
|
||||
data: [
|
||||
{
|
||||
value: 4, symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
itemStyle: {
|
||||
color: '#293880',
|
||||
borderColor: 'rgba(181,174,28,1)',
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
{value: 5, symbol: 'none'},
|
||||
{value: 3, symbol: 'none'},
|
||||
{value: 9, symbol: 'none'},
|
||||
{value: 2, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
{value: 8, symbol: 'none'},
|
||||
{value: 3, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
symbol: "none",
|
||||
smooth: true,
|
||||
xAxisIndex: 3,
|
||||
yAxisIndex: 3,
|
||||
lineStyle: {
|
||||
color: 'rgba(165,15,71,1)',
|
||||
width: 1
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(165,15,71,1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(165,15,71,0)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 4, symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
itemStyle: {
|
||||
color: '#293880',
|
||||
borderColor: 'rgba(165,15,71,1)',
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
{value: 5, symbol: 'none'},
|
||||
{value: 3, symbol: 'none'},
|
||||
{value: 9, symbol: 'none'},
|
||||
{value: 2, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
{value: 8, symbol: 'none'},
|
||||
{value: 3, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
xAxisIndex: 4,
|
||||
yAxisIndex: 4,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(16,182,165,1)',
|
||||
width: 1
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(16,182,165,1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(16,182,165,0)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
//4,5,3,9,2,4,8,3,4,5
|
||||
data: [
|
||||
{
|
||||
value: 4, symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
itemStyle: {
|
||||
color: '#293880',
|
||||
borderColor: 'rgba(16,182,165,1)',
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
{value: 5, symbol: 'none'},
|
||||
{value: 3, symbol: 'none'},
|
||||
{value: 9, symbol: 'none'},
|
||||
{value: 2, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
{value: 8, symbol: 'none'},
|
||||
{value: 3, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
symbol: "none",
|
||||
smooth: true,
|
||||
xAxisIndex: 5,
|
||||
yAxisIndex: 5,
|
||||
lineStyle: {
|
||||
color: 'rgba(9,83,176,1)',
|
||||
width: 1
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(9,83,176,1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(9,83,176,0)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 4, symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
itemStyle: {
|
||||
color: '#293880',
|
||||
borderColor: 'rgba(9,83,176,1)',
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
{value: 5, symbol: 'none'},
|
||||
{value: 3, symbol: 'none'},
|
||||
{value: 9, symbol: 'none'},
|
||||
{value: 2, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
{value: 8, symbol: 'none'},
|
||||
{value: 3, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
{value: 4, symbol: 'none'},
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.setMap();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chinaMap {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,296 @@
|
|||
<template>
|
||||
<div class="chinaMap"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "@/lib/china.js"
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setMap() {
|
||||
var data = [
|
||||
{name: '北京', value: 1176},
|
||||
{name: '上海', value: 2765},
|
||||
{name: '天津', value: 509},
|
||||
{name: '重庆', value: 610},
|
||||
{name: '黑龙江', value: 1966},
|
||||
{name: '湖北', value: 68309},
|
||||
{name: '台湾', value: 16451},
|
||||
{name: '香港', value: 12368},
|
||||
{name: '河北', value: 1435},
|
||||
{name: '河南', value: 1594},
|
||||
{name: '安徽', value: 1008},
|
||||
{name: '江苏', value: 1603},
|
||||
{name: '浙江', value: 1497},
|
||||
{name: '福建', value: 1314},
|
||||
{name: '广东', value: 3247},
|
||||
{name: '湖南', value: 1197},
|
||||
{name: '四川', value: 1254},
|
||||
{name: '云南', value: 1607},
|
||||
{name: '吉林', value: 579},
|
||||
{name: '内蒙古', value: 613},
|
||||
{name: '辽宁', value: 515},
|
||||
{name: '山东', value: 990},
|
||||
{name: '山西', value: 263},
|
||||
{name: '陕西', value: 701},
|
||||
{name: '甘肃', value: 344},
|
||||
{name: '新疆', value: 981},
|
||||
{name: '宁夏', value: 122},
|
||||
{name: '江西', value: 951},
|
||||
{name: '贵州', value: 159},
|
||||
{name: '广西', value: 355},
|
||||
{name: '海南', value: 190},
|
||||
{name: '青海', value: 30},
|
||||
{name: '澳门', value: 77},
|
||||
{name: '西藏', value: 1},
|
||||
|
||||
];
|
||||
const regions = data.map(item=> {
|
||||
return {
|
||||
name: item.name,
|
||||
itemStyle: {
|
||||
areaColor: '#2043AA'
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle : {
|
||||
areaColor: '#2043AA'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
let option = {
|
||||
title: [
|
||||
{
|
||||
text: "现有确诊 {a| 3204} \n {b|较昨日} {c| +6}",
|
||||
top: 0,
|
||||
left: '7%',
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
rich: {
|
||||
a: {
|
||||
color: '#E64546',
|
||||
fontSize: 16
|
||||
},
|
||||
b: {
|
||||
fontSize: 12,
|
||||
lineHeight: 20,
|
||||
color: '#163794'
|
||||
},
|
||||
c: {
|
||||
fontSize: 12,
|
||||
color: '#E64546'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '现有疑似 {a| 2} \n {b|较昨日} {c| +1}',
|
||||
top: 0,
|
||||
left: '40%',
|
||||
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
rich: {
|
||||
a: {
|
||||
color: '#FF9985',
|
||||
fontSize: 16
|
||||
},
|
||||
b: {
|
||||
fontSize: 12,
|
||||
lineHeight: 20,
|
||||
color: '#163794'
|
||||
},
|
||||
c: {
|
||||
fontSize: 12,
|
||||
color: '#FF9985'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '境外输入 {a| 9794} \n {b|较昨日} {c| +15}',
|
||||
top: 0,
|
||||
right: '7%',
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
rich: {
|
||||
a: {
|
||||
color: '#476DA0',
|
||||
fontSize: 16
|
||||
},
|
||||
b: {
|
||||
fontSize: 12,
|
||||
lineHeight: 20,
|
||||
color: '#163794'
|
||||
},
|
||||
c: {
|
||||
fontSize: 12,
|
||||
color: '#476DA0'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '累计确诊 {a| 126836} \n {b|较昨日} {c| +60}',
|
||||
top: '14%',
|
||||
left: '7%',
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
rich: {
|
||||
a: {
|
||||
color: '#B80909',
|
||||
fontSize: 16
|
||||
},
|
||||
b: {
|
||||
fontSize: 12,
|
||||
lineHeight: 20,
|
||||
color: '#163794'
|
||||
},
|
||||
c: {
|
||||
fontSize: 12,
|
||||
color: '#B80909'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '累计治愈 {a| 117934} \n {b|较昨日} {c| +54}',
|
||||
top: '14%',
|
||||
left: '40%',
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
rich: {
|
||||
a: {
|
||||
color: '#10AEB5',
|
||||
fontSize: 16
|
||||
},
|
||||
b: {
|
||||
fontSize: 12,
|
||||
lineHeight: 20,
|
||||
color: '#163794'
|
||||
},
|
||||
c: {
|
||||
fontSize: 12,
|
||||
color: '#10AEB5'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '累计死亡 {a| 5997} \n {b|较昨日} {c| +1}',
|
||||
top: '14%',
|
||||
right: '7%',
|
||||
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
rich: {
|
||||
a: {
|
||||
color: '#4D5054',
|
||||
fontSize: 16
|
||||
},
|
||||
b: {
|
||||
fontSize: 12,
|
||||
lineHeight: 20,
|
||||
color: '#163794'
|
||||
},
|
||||
c: {
|
||||
fontSize: 12,
|
||||
color: '#4D5054'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
],
|
||||
visualMap: {
|
||||
left: 'right',
|
||||
type: 'piecewise',
|
||||
pieces: [
|
||||
{gte: 0, lte: 9, label: '0-9', color: '#FFE5DB'},
|
||||
{gte: 10, lte: 99, label: '10-99', color: '#FF9985'},
|
||||
{gte: 100, lte: 999, label: '10-999', color: '#F57567'},
|
||||
{gte: 1000, lte: 9999, label: '1000-9999', color: '#E64546'},
|
||||
{gte: 10000, label: '10000', color: '#B80909'},
|
||||
],
|
||||
showLabel: true,
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 10,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
backgroundColor: '#11367a',
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 10,
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
top: '20%',
|
||||
label: {
|
||||
show: true,
|
||||
color: '#6dd0e3',
|
||||
fontSize: 10
|
||||
},
|
||||
roam: false,
|
||||
itemStyle: {
|
||||
areaColor: '#2043AA',
|
||||
borderColor: '#676e6f',
|
||||
},
|
||||
regions: regions
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '累计确诊人数',
|
||||
type: 'map',
|
||||
label: {
|
||||
position: 'center',
|
||||
show: true
|
||||
},
|
||||
geoIndex: 0,
|
||||
data: data
|
||||
},
|
||||
]
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
|
||||
this.myChart.clear();
|
||||
this.myChart.resize()
|
||||
this.myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.setMap();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chinaMap {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<div class="webPie">
|
||||
<div class="webPie-title">
|
||||
<span class="subtitle"><span class="leftCircle"
|
||||
:style="{background:data.color}"></span>{{ data.title }}<span
|
||||
class="rightCircle" :style="{background:data.color}"></span></span>
|
||||
</div>
|
||||
<div class="webPie-content" :id="id">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
id: String,
|
||||
data: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setChart() {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: '#11367a',
|
||||
textStyle: {
|
||||
color: '#6dd0e3',
|
||||
fontSize: 10
|
||||
},
|
||||
formatter: "{b}:{d}%"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '70%',
|
||||
center: ['50%', '50%'],
|
||||
label: {
|
||||
color: '#75deef',
|
||||
fontSize: 8,
|
||||
formatter: function (data) {
|
||||
return data.data.name + ' ' + (data.percent).toFixed(0) + '%';
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
length: 10,
|
||||
length2: 8,
|
||||
lineStyle: {
|
||||
color: 'rgb(57,63,90)'
|
||||
}
|
||||
},
|
||||
data: this.data.data,
|
||||
}
|
||||
]
|
||||
};
|
||||
if (!this.myChart) this.myChart = this.$echarts(document.getElementById(this.id));
|
||||
this.myChart.clear();
|
||||
this.myChart.resize();
|
||||
this.myChart.setOption(option);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.webPie {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.webPie-title {
|
||||
height: 20%;
|
||||
text-align: center;
|
||||
|
||||
.subtitle {
|
||||
color: #68C6D6;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
|
||||
.leftCircle {
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.rightCircle {
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: -15px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.webPie-content {
|
||||
height: 80%
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<template>
|
||||
<div class="chart"></div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
data: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart:null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setChart() {
|
||||
let seriesData = []
|
||||
this.data.data.forEach(item => {
|
||||
seriesData.push(
|
||||
{
|
||||
value: item.value,
|
||||
name: item.name,
|
||||
symbol: 'none',
|
||||
symbolSize: 5,
|
||||
itemStyle: {
|
||||
color: item.color
|
||||
},
|
||||
lineStyle: {
|
||||
color: item.color,
|
||||
width: 1,
|
||||
},
|
||||
emphasis: {
|
||||
lineStyle: {
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
})
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: this.data.title,
|
||||
top: "5%",
|
||||
left: this.data.position[0],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize:12,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: this.data.data.map(item => {
|
||||
return {name: item.name, icon: 'circle'}
|
||||
}),
|
||||
left: "center",
|
||||
top: this.data.position[1],
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
color: '#67C3D6',
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
indicator: this.data.indicator,
|
||||
center: this.data.center,
|
||||
radius: "50%",
|
||||
startAngle: 90,
|
||||
splitNumber: 4,
|
||||
shape: 'circle',
|
||||
axisName: {
|
||||
textStyle: {
|
||||
color: '#0DECF0',
|
||||
fontSize: 8,
|
||||
}
|
||||
},
|
||||
axisNameGap: 3,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: ['#1166C4',
|
||||
'#0C52A4', '#102F7D',
|
||||
'#13216B'],
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#163794'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#163794'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: {
|
||||
name: '雷达图',
|
||||
type: 'radar',
|
||||
emphasis: {
|
||||
// color: 各异,
|
||||
lineStyle: {
|
||||
width: 4
|
||||
}
|
||||
},
|
||||
data: seriesData
|
||||
}
|
||||
};
|
||||
if (this.id == 'bottom_1_2') {
|
||||
option.legend.left = '5%';
|
||||
}
|
||||
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||||
|
||||
this.myChart.clear();
|
||||
this.myChart.resize(
|
||||
{
|
||||
width: this.$el.offsetWidth,
|
||||
height: this.$el.offsetHeight
|
||||
}
|
||||
)
|
||||
this.myChart.setOption(option);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue