✨ feat(dashboard): 大屏素材准备
This commit is contained in:
砂糖
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 年度开工率 -->
|
||||
<Echart
|
||||
:options="options"
|
||||
id="bottomLeftChart"
|
||||
height="480px"
|
||||
width="100%"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from '../../../../common/echart'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
options: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Echart,
|
||||
},
|
||||
props: {
|
||||
cdata: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
cdata: {
|
||||
handler (newData) {
|
||||
this.options = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(255,255,255,0.1)",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
show: true,
|
||||
backgroundColor: "#7B7DDC"
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ["已贯通", "计划贯通", "贯通率"],
|
||||
textStyle: {
|
||||
color: "#B4B4B4"
|
||||
},
|
||||
top: "0%"
|
||||
},
|
||||
grid: {
|
||||
x: "8%",
|
||||
width: "88%",
|
||||
y: "4%"
|
||||
},
|
||||
xAxis: {
|
||||
data: newData.category,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
formatter: "{value} "
|
||||
}
|
||||
},
|
||||
{
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value} "
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "贯通率",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
showAllSymbol: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#F02FC2"
|
||||
}
|
||||
},
|
||||
data: newData.rateData
|
||||
},
|
||||
{
|
||||
name: "已贯通",
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 5,
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#956FD4" },
|
||||
{ offset: 1, color: "#3EACE5" }
|
||||
])
|
||||
}
|
||||
},
|
||||
data: newData.barData
|
||||
},
|
||||
{
|
||||
name: "计划贯通",
|
||||
type: "bar",
|
||||
barGap: "-100%",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 5,
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "rgba(156,107,211,0.8)" },
|
||||
{ offset: 0.2, color: "rgba(156,107,211,0.5)" },
|
||||
{ offset: 1, color: "rgba(156,107,211,0.2)" }
|
||||
])
|
||||
}
|
||||
},
|
||||
z: -12,
|
||||
data: newData.lineData
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div>
|
||||
<Chart :cdata="cdata" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from './chart.vue'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cdata: {
|
||||
category: [
|
||||
"市区",
|
||||
"万州",
|
||||
"江北",
|
||||
"南岸",
|
||||
"北碚",
|
||||
"綦南",
|
||||
"长寿",
|
||||
"永川",
|
||||
"璧山",
|
||||
"江津",
|
||||
"城口",
|
||||
"大足",
|
||||
"垫江",
|
||||
"丰都",
|
||||
"奉节",
|
||||
"合川",
|
||||
"江津区",
|
||||
"开州",
|
||||
"南川",
|
||||
"彭水",
|
||||
"黔江",
|
||||
"石柱",
|
||||
"铜梁",
|
||||
"潼南",
|
||||
"巫山",
|
||||
"巫溪",
|
||||
"武隆",
|
||||
"秀山",
|
||||
"酉阳",
|
||||
"云阳",
|
||||
"忠县",
|
||||
"川东",
|
||||
"检修"
|
||||
],
|
||||
lineData: [
|
||||
18092,
|
||||
20728,
|
||||
24045,
|
||||
28348,
|
||||
32808,
|
||||
36097,
|
||||
39867,
|
||||
44715,
|
||||
48444,
|
||||
50415,
|
||||
56061,
|
||||
62677,
|
||||
59521,
|
||||
67560,
|
||||
18092,
|
||||
20728,
|
||||
24045,
|
||||
28348,
|
||||
32808,
|
||||
36097,
|
||||
39867,
|
||||
44715,
|
||||
48444,
|
||||
50415,
|
||||
36097,
|
||||
39867,
|
||||
44715,
|
||||
48444,
|
||||
50415,
|
||||
50061,
|
||||
32677,
|
||||
49521,
|
||||
32808
|
||||
],
|
||||
barData: [
|
||||
4600,
|
||||
5000,
|
||||
5500,
|
||||
6500,
|
||||
7500,
|
||||
8500,
|
||||
9900,
|
||||
12500,
|
||||
14000,
|
||||
21500,
|
||||
23200,
|
||||
24450,
|
||||
25250,
|
||||
33300,
|
||||
4600,
|
||||
5000,
|
||||
5500,
|
||||
6500,
|
||||
7500,
|
||||
8500,
|
||||
9900,
|
||||
22500,
|
||||
14000,
|
||||
21500,
|
||||
8500,
|
||||
9900,
|
||||
12500,
|
||||
14000,
|
||||
21500,
|
||||
23200,
|
||||
24450,
|
||||
25250,
|
||||
7500
|
||||
],
|
||||
rateData: []
|
||||
}
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Chart,
|
||||
},
|
||||
mounted () {
|
||||
this.setData();
|
||||
},
|
||||
methods: {
|
||||
// 根据自己的业务情况修改
|
||||
setData () {
|
||||
for (let i = 0; i < this.cdata.barData.length -1; i++) {
|
||||
let rate = this.cdata.barData[i] / this.cdata.lineData[i];
|
||||
this.cdata.rateData.push(rate.toFixed(2));
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,358 @@
|
||||
<template>
|
||||
<div>
|
||||
<Echart
|
||||
:options="options"
|
||||
id="centreLeft1Chart"
|
||||
height="480px"
|
||||
width="100%"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from '../../../../common/echart'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
// 定义颜色
|
||||
colorList: {
|
||||
linearYtoG: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#f5b44d'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#28f8de'
|
||||
}
|
||||
]
|
||||
},
|
||||
linearGtoB: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#43dfa2'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#28f8de'
|
||||
}
|
||||
]
|
||||
},
|
||||
linearBtoG: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#1c98e8'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#28f8de'
|
||||
}
|
||||
]
|
||||
},
|
||||
areaBtoG: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(35,184,210,.2)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(35,184,210,0)'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Echart
|
||||
},
|
||||
props: {
|
||||
cdata: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
cdata: {
|
||||
handler(newData) {
|
||||
this.options = {
|
||||
title: {
|
||||
text: '',
|
||||
textStyle: {
|
||||
color: '#D3D6DD',
|
||||
fontSize: 24,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
subtext: newData.year + '/' + newData.weekCategory[6],
|
||||
subtextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
},
|
||||
top: 50,
|
||||
left: 80
|
||||
},
|
||||
legend: {
|
||||
top: 120,
|
||||
left: 80,
|
||||
orient: 'vertical',
|
||||
itemGap: 15,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
data: ['平均指标', '我的指标'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
radar: {
|
||||
center: ['68%', '27%'],
|
||||
radius: '40%',
|
||||
name: {
|
||||
color: '#fff'
|
||||
},
|
||||
splitNumber: 8,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: this.colorList.linearYtoG,
|
||||
opacity: 0.6
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: this.colorList.linearYtoG,
|
||||
opacity: 0.6
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: '#fff',
|
||||
opacity: 0.1,
|
||||
shadowBlur: 25,
|
||||
shadowColor: '#000',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 5
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{
|
||||
name: '服务态度',
|
||||
max: newData.maxData
|
||||
},
|
||||
{
|
||||
name: '产品质量',
|
||||
max: 10
|
||||
},
|
||||
{
|
||||
name: '任务效率',
|
||||
max: 12
|
||||
},
|
||||
{
|
||||
name: '售后保障',
|
||||
max: 3.5
|
||||
}
|
||||
]
|
||||
},
|
||||
grid: {
|
||||
left: 90,
|
||||
right: 80,
|
||||
bottom: 40,
|
||||
top: '60%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
position: 'bottom',
|
||||
axisLine: true,
|
||||
axisLabel: {
|
||||
color: 'rgba(255,255,255,.8)',
|
||||
fontSize: 12
|
||||
},
|
||||
data: newData.weekCategory
|
||||
},
|
||||
// 下方Y轴
|
||||
yAxis: {
|
||||
name: '工单',
|
||||
nameLocation: 'end',
|
||||
nameGap: 24,
|
||||
nameTextStyle: {
|
||||
color: 'rgba(255,255,255,.5)',
|
||||
fontSize: 14
|
||||
},
|
||||
max: newData.maxData,
|
||||
splitNumber: 4,
|
||||
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
opacity: 0.1
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255,255,255,.8)',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'radar',
|
||||
symbolSize: 0,
|
||||
data: [
|
||||
{
|
||||
value: newData.radarDataAvg[6],
|
||||
name: '平均指标',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#f8d351'
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: '#f8d351',
|
||||
shadowBlur: 25,
|
||||
shadowColor: 'rgba(248,211,81,.3)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: -10,
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: newData.radarData[6],
|
||||
name: '我的指标',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#43dfa2'
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: this.colorList.linearGtoB,
|
||||
shadowBlur: 15,
|
||||
shadowColor: 'rgba(0,0,0,.2)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 5,
|
||||
opacity: 0.8
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'emptyCircle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: this.colorList.linearBtoG,
|
||||
width: 3
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: this.colorList.areaBtoG
|
||||
}
|
||||
},
|
||||
data: newData.weekLineData,
|
||||
lineSmooth: true,
|
||||
markLine: {
|
||||
silent: true,
|
||||
data: [
|
||||
{
|
||||
type: 'average',
|
||||
name: '平均值'
|
||||
}
|
||||
],
|
||||
precision: 0,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '平均值: \n {c}'
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: 'rgba(248,211,81,.7)'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
position: 'top',
|
||||
formatter: '{c} m',
|
||||
backgroundColor: 'rgba(28,152,232,.2)',
|
||||
padding: 6
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '占位背景',
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: '#000',
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
silent: true,
|
||||
barWidth: '50%',
|
||||
data: newData.weekMaxData,
|
||||
animation: false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div>
|
||||
<Chart :cdata="cdata" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from './chart.vue'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
drawTiming: null,
|
||||
cdata: {
|
||||
year: null,
|
||||
weekCategory: [],
|
||||
radarData: [],
|
||||
radarDataAvg: [],
|
||||
maxData: 12000,
|
||||
weekMaxData: [],
|
||||
weekLineData: []
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Chart,
|
||||
},
|
||||
mounted () {
|
||||
this.drawTimingFn();
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.drawTiming);
|
||||
},
|
||||
methods: {
|
||||
drawTimingFn () {
|
||||
this.setData();
|
||||
this.drawTiming = setInterval(() => {
|
||||
this.setData();
|
||||
}, 6000);
|
||||
},
|
||||
setData () {
|
||||
// 清空轮询数据
|
||||
this.cdata.weekCategory = [];
|
||||
this.cdata.weekMaxData = [];
|
||||
this.cdata.weekLineData = [];
|
||||
this.cdata.radarData = [];
|
||||
this.cdata.radarDataAvg = [];
|
||||
|
||||
let dateBase = new Date();
|
||||
this.cdata.year = dateBase.getFullYear();
|
||||
// 周数据
|
||||
for (let i = 0; i < 7; i++) {
|
||||
// 日期
|
||||
let date = new Date();
|
||||
this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));
|
||||
|
||||
// 折线图数据
|
||||
this.cdata.weekMaxData.push(this.cdata.maxData);
|
||||
let distance = Math.round(Math.random() * 11000 + 500);
|
||||
this.cdata.weekLineData.push(distance);
|
||||
|
||||
// 雷达图数据
|
||||
// 我的指标
|
||||
let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
|
||||
let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
|
||||
let hour = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||
let radarDayData = [distance, averageSpeed, maxSpeed, hour];
|
||||
this.cdata.radarData.unshift(radarDayData);
|
||||
|
||||
// 平均指标
|
||||
let distanceAvg = Math.round(Math.random() * 8000 + 4000);
|
||||
let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
|
||||
let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
|
||||
let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||
let radarDayDataAvg = [
|
||||
distanceAvg,
|
||||
averageSpeedAvg,
|
||||
maxSpeedAvg,
|
||||
hourAvg
|
||||
];
|
||||
this.cdata.radarDataAvg.unshift(radarDayDataAvg);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 通过率/达标率 -->
|
||||
<Echart
|
||||
:options="options"
|
||||
:id="id"
|
||||
height="100px"
|
||||
width="100px"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from '../../../../common/echart'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
options: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Echart,
|
||||
},
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: "chartRate"
|
||||
},
|
||||
tips: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 50
|
||||
},
|
||||
colorObj: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {
|
||||
textStyle: "#3fc0fb",
|
||||
series: {
|
||||
color: ["#00bcd44a", "transparent"],
|
||||
dataColor: {
|
||||
normal: "#03a9f4",
|
||||
shadowColor: "#97e2f5"
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// tips 是会变更的数据，所以进行监听
|
||||
tips: {
|
||||
handler (newData) {
|
||||
this.options = {
|
||||
title:{
|
||||
text: newData * 1 + "%",
|
||||
x: "center",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
color: this.colorObj.textStyle,
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["75%", "80%"],
|
||||
center: ["50%", "50%"],
|
||||
hoverAnimation: false,
|
||||
color: this.colorObj.series.color,
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: newData,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: this.colorObj.series.dataColor.normal,
|
||||
shadowBlur: 10,
|
||||
shadowColor: this.colorObj.series.dataColor.shadowColor
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 100 - newData
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div>
|
||||
<Echart
|
||||
:options="options"
|
||||
id="centreLeft1Chart"
|
||||
height="220px"
|
||||
width="260px"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from '../../../../common/echart'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
options: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Echart,
|
||||
},
|
||||
props: {
|
||||
cdata: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
cdata: {
|
||||
handler (newData) {
|
||||
this.options = {
|
||||
color: [
|
||||
"#37a2da",
|
||||
"#32c5e9",
|
||||
"#9fe6b8",
|
||||
"#ffdb5c",
|
||||
"#ff9f7f",
|
||||
"#fb7293",
|
||||
"#e7bcf3",
|
||||
"#8378ea"
|
||||
],
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
toolbox: {
|
||||
show: true
|
||||
},
|
||||
calculable: true,
|
||||
legend: {
|
||||
orient: "horizontal",
|
||||
icon: "circle",
|
||||
bottom: 0,
|
||||
x: "center",
|
||||
data: newData.xData,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "通过率统计",
|
||||
type: "pie",
|
||||
radius: [10, 50],
|
||||
roseType: "area",
|
||||
center: ["50%", "40%"],
|
||||
data: newData.seriesData
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<Chart :cdata="cdata" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from './chart.vue';
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cdata: {
|
||||
xData: ["data1", "data2", "data3", "data4", "data5", "data6"],
|
||||
seriesData: [
|
||||
{ value: 10, name: "data1" },
|
||||
{ value: 5, name: "data2" },
|
||||
{ value: 15, name: "data3" },
|
||||
{ value: 25, name: "data4" },
|
||||
{ value: 20, name: "data5" },
|
||||
{ value: 35, name: "data6" }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Chart,
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<div>
|
||||
<Echart
|
||||
id="centreLeft2Chart"
|
||||
ref="centreLeft2ChartRef"
|
||||
:options="options"
|
||||
height="360px"
|
||||
width="330px"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from '../../../../common/echart';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Echart,
|
||||
},
|
||||
props: {
|
||||
cdata: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
cdata: {
|
||||
handler(newData) {
|
||||
// 设置点的位置(经纬度)
|
||||
const geoCoordMap = {
|
||||
厦门市: [118.11022, 24.490474, 20],
|
||||
福州市: [119.206239, 26.275302, 20],
|
||||
泉州市: [118.589421, 24.908853, 20],
|
||||
漳州市: [117.561801, 24.510897, 20],
|
||||
龙岩市: [116.82978, 25.391603, 20],
|
||||
莆田市: [119.007558, 25.591011, 20],
|
||||
三明市: [117.435001, 26.465444, 20],
|
||||
南平市: [118.178459, 27.535627, 20],
|
||||
宁德市: [119.527082, 27.15924, 20],
|
||||
};
|
||||
let seriesData = [
|
||||
{
|
||||
name: '厦门市',
|
||||
},
|
||||
{
|
||||
name: '福州市',
|
||||
},
|
||||
{
|
||||
name: '泉州市',
|
||||
},
|
||||
{
|
||||
name: '漳州市',
|
||||
},
|
||||
{
|
||||
name: '龙岩市',
|
||||
},
|
||||
{
|
||||
name: '莆田市',
|
||||
},
|
||||
{
|
||||
name: '三明市',
|
||||
},
|
||||
{
|
||||
name: '南平市',
|
||||
},
|
||||
{
|
||||
name: '宁德市',
|
||||
},
|
||||
];
|
||||
let convertData = function (data) {
|
||||
let scatterData = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
scatterData.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value),
|
||||
});
|
||||
}
|
||||
}
|
||||
return scatterData;
|
||||
};
|
||||
this.options = {
|
||||
showLegendSymbol: true,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
lineHeight: 22,
|
||||
},
|
||||
position: point => {
|
||||
// 固定在顶部
|
||||
return [point[0] + 50, point[1] - 20];
|
||||
},
|
||||
// 如果需要自定义 tooltip样式，需要使用formatter
|
||||
/*
|
||||
formatter: params => {
|
||||
return `<div style=""> ... </div>`
|
||||
}
|
||||
*/
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 10,
|
||||
show: false,
|
||||
seriesIndex: 0,
|
||||
// 颜色
|
||||
inRange: {
|
||||
color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
|
||||
},
|
||||
},
|
||||
// 底部背景
|
||||
geo: {
|
||||
show: true,
|
||||
aspectScale: 0.85, //长宽比
|
||||
zoom: 1.2,
|
||||
top: '10%',
|
||||
left: '16%',
|
||||
map: '福建',
|
||||
roam: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: 'rgba(0,0,0,0)',
|
||||
shadowColor: 'rgba(7,114,204, .8)',
|
||||
shadowOffsetX: 5,
|
||||
shadowOffsetY: 5,
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#00aeef',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '相关指数',
|
||||
type: 'map',
|
||||
aspectScale: 0.85, //长宽比
|
||||
zoom: 1.2,
|
||||
mapType: '福建', // 自定义扩展图表类型
|
||||
top: '10%',
|
||||
left: '16%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'red',
|
||||
areaColor: 'rgba(19,54,162, .5)',
|
||||
borderColor: 'rgba(0,242,252,.3)',
|
||||
borderWidth: 1,
|
||||
shadowBlur: 7,
|
||||
shadowColor: '#00f2fc',
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#4f7fff',
|
||||
borderColor: 'rgba(0,242,252,.6)',
|
||||
borderWidth: 2,
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#00f2fc',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
formatter: params => `${params.name}`,
|
||||
show: true,
|
||||
position: 'insideRight',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: '#efefef',
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
data: newData,
|
||||
},
|
||||
{
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
symbolSize: 7,
|
||||
effectType: 'ripple',
|
||||
legendHoverLink: false,
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
period: 4,
|
||||
scale: 2.5,
|
||||
brushType: 'stroke',
|
||||
},
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#99FBFE',
|
||||
shadowBlur: 5,
|
||||
shadowColor: '#fff',
|
||||
},
|
||||
},
|
||||
data: convertData(seriesData),
|
||||
},
|
||||
],
|
||||
};
|
||||
// 重新选择区域
|
||||
this.handleMapRandomSelect();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 开启定时器
|
||||
startInterval() {
|
||||
const _self = this;
|
||||
// 应通过接口获取配置时间，暂时写死5s
|
||||
const time = 2000;
|
||||
if (this.intervalId !== null) {
|
||||
clearInterval(this.intervalId);
|
||||
}
|
||||
this.intervalId = setInterval(() => {
|
||||
_self.reSelectMapRandomArea();
|
||||
}, time);
|
||||
},
|
||||
// 重新随机选中地图区域
|
||||
reSelectMapRandomArea() {
|
||||
const length = 9;
|
||||
this.$nextTick(() => {
|
||||
try {
|
||||
const map = this.$refs.centreLeft2ChartRef.chart;
|
||||
let index = Math.floor(Math.random() * length);
|
||||
while (index === this.preSelectMapIndex || index >= length) {
|
||||
index = Math.floor(Math.random() * length);
|
||||
}
|
||||
map.dispatchAction({
|
||||
type: 'mapUnSelect',
|
||||
seriesIndex: 0,
|
||||
dataIndex: this.preSelectMapIndex,
|
||||
});
|
||||
map.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index,
|
||||
});
|
||||
map.dispatchAction({
|
||||
type: 'mapSelect',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index,
|
||||
});
|
||||
this.preSelectMapIndex = index;
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
});
|
||||
},
|
||||
handleMapRandomSelect() {
|
||||
this.$nextTick(() => {
|
||||
try {
|
||||
const map = this.$refs.centreLeft2ChartRef.chart;
|
||||
const _self = this;
|
||||
setTimeout(() => {
|
||||
_self.reSelectMapRandomArea();
|
||||
}, 0);
|
||||
// 移入区域，清除定时器、取消之前选中并选中当前
|
||||
map.on('mouseover', function (params) {
|
||||
clearInterval(_self.intervalId);
|
||||
map.dispatchAction({
|
||||
type: 'mapUnSelect',
|
||||
seriesIndex: 0,
|
||||
dataIndex: _self.preSelectMapIndex,
|
||||
});
|
||||
map.dispatchAction({
|
||||
type: 'mapSelect',
|
||||
seriesIndex: 0,
|
||||
dataIndex: params.dataIndex,
|
||||
});
|
||||
_self.preSelectMapIndex = params.dataIndex;
|
||||
});
|
||||
// 移出区域重新随机选中地图区域，并开启定时器
|
||||
map.on('globalout', function () {
|
||||
_self.reSelectMapRandomArea();
|
||||
_self.startInterval();
|
||||
});
|
||||
this.startInterval();
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div>
|
||||
<Chart :cdata="cdata" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from './chart.vue';
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cdata: [
|
||||
{
|
||||
// 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
|
||||
name: '福州市',
|
||||
value: 10,
|
||||
elseData:{
|
||||
// 这里放置地图 tooltip 里想显示的数据
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '厦门市',
|
||||
value: 9,
|
||||
},
|
||||
{
|
||||
name: '漳州市',
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
name: '泉州市',
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
name: '三明市',
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
name: '莆田市',
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
name: '南平市',
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
name: '龙岩市',
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
name: '宁德市',
|
||||
value: 2,
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Chart,
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div>
|
||||
<Echart
|
||||
:options="options"
|
||||
id="centreRight2Chart1"
|
||||
height="200px"
|
||||
width="260px"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from '../../../../common/echart'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
options: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Echart,
|
||||
},
|
||||
props: {
|
||||
cdata: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
cdata: {
|
||||
handler (newData) {
|
||||
// 固定样式数据
|
||||
let lineStyle = {
|
||||
normal: {
|
||||
width: 1,
|
||||
opacity: 0.5
|
||||
}
|
||||
};
|
||||
|
||||
this.options = {
|
||||
radar: {
|
||||
indicator: newData.indicatorData,
|
||||
shape: "circle",
|
||||
splitNumber: 5,
|
||||
radius: ["0%", "65%"],
|
||||
name: {
|
||||
textStyle: {
|
||||
color: "rgb(238, 197, 102)"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: [
|
||||
"rgba(238, 197, 102, 0.1)",
|
||||
"rgba(238, 197, 102, 0.2)",
|
||||
"rgba(238, 197, 102, 0.4)",
|
||||
"rgba(238, 197, 102, 0.6)",
|
||||
"rgba(238, 197, 102, 0.8)",
|
||||
"rgba(238, 197, 102, 1)"
|
||||
].reverse()
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(238, 197, 102, 0.5)"
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "北京",
|
||||
type: "radar",
|
||||
lineStyle: lineStyle,
|
||||
data: newData.dataBJ,
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#F9713C"
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "上海",
|
||||
type: "radar",
|
||||
lineStyle: lineStyle,
|
||||
data: newData.dataSH,
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#B3E4A1"
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.05
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "广州",
|
||||
type: "radar",
|
||||
lineStyle: lineStyle,
|
||||
data: newData.dataGZ,
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgb(238, 197, 102)"
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.05
|
||||
}
|
||||
}
|
||||
} //end
|
||||
]
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
<Chart :cdata="cdata" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from './chart.vue';
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cdata: {
|
||||
indicatorData: [
|
||||
{ name: "data1", max: 300 },
|
||||
{ name: "data2", max: 250 },
|
||||
{ name: "data3", max: 300 },
|
||||
{ name: "data4", max: 5},
|
||||
{ name: "data5", max: 200 },
|
||||
{ name: "data6", max: 100 }
|
||||
],
|
||||
dataBJ: [
|
||||
[94, 69, 114, 2.08, 73, 39, 22],
|
||||
[99, 73, 110, 2.43, 76, 48, 23],
|
||||
[31, 12, 30, 0.5, 32, 16, 24],
|
||||
[42, 27, 43, 1, 53, 22, 25],
|
||||
[154, 117, 157, 3.05, 92, 58, 26],
|
||||
[234, 185, 230, 4.09, 123, 69, 27],
|
||||
[160, 120, 186, 2.77, 91, 50, 28]
|
||||
],
|
||||
dataGZ: [
|
||||
[84, 94, 140, 2.238, 68, 18, 22],
|
||||
[93, 77, 104, 1.165, 53, 7, 23],
|
||||
[99, 130, 227, 3.97, 55, 15, 24],
|
||||
[146, 84, 139, 1.094, 40, 17, 25],
|
||||
[113, 108, 137, 1.481, 48, 15, 26],
|
||||
[81, 48, 62, 1.619, 26, 3, 27],
|
||||
[56, 48, 68, 1.336, 37, 9, 28]
|
||||
],
|
||||
dataSH: [
|
||||
[91, 45, 125, 0.82, 34, 23, 1],
|
||||
[65, 27, 78, 0.86, 45, 29, 2],
|
||||
[83, 60, 84, 1.09, 73, 27, 3],
|
||||
[109, 81, 121, 1.28, 68, 51, 4],
|
||||
[106, 77, 114, 1.07, 55, 51, 5],
|
||||
[109, 81, 121, 1.28, 68, 51, 6],
|
||||
[106, 77, 114, 1.07, 55, 51, 7]
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Chart,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user