@0Melon0
2 years ago
parent
3061e33d46
commit
c2a96eac61
@ -0,0 +1,3 @@
|
||||
@function vw($px) {
|
||||
@return $px/1920 * 100vw;
|
||||
}
|
||||
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<section ref="echartsContainer"></section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
props: {
|
||||
title: String,
|
||||
maxNum: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
nowNum: Number,
|
||||
unit: {
|
||||
type: String,
|
||||
default: '%',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartOptions: {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 90,
|
||||
endAngle: -270,
|
||||
pointer: {
|
||||
show: false,
|
||||
},
|
||||
max: this.maxNum,
|
||||
radius: '100%',
|
||||
center: ['50%', '50%'],
|
||||
progress: {
|
||||
show: true,
|
||||
overlap: false,
|
||||
roundCap: true,
|
||||
clip: false,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#03c2fd',
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: '#1ed3e5',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#2fded6',
|
||||
},
|
||||
],
|
||||
global: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: [[1, '#4F518C']],
|
||||
opacity: 0.7,
|
||||
width: 30,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
distance: 0,
|
||||
length: 10,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
distance: 50,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: this.nowNum,
|
||||
name: this.title,
|
||||
title: {
|
||||
offsetCenter: ['0%', '20%'],
|
||||
fontSize: 22,
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
color: '#fff',
|
||||
overflow: 'break',
|
||||
lineHeight: 20,
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
offsetCenter: ['0%', '-15%'],
|
||||
fontSize: 40,
|
||||
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
||||
color: '#03FFFF',
|
||||
formatter: `{value}${this.unit}`,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const chartContainer = this.$refs.echartsContainer;
|
||||
const chart = echarts.init(chartContainer);
|
||||
chart.setOption(this.chartOptions);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div class="rightMiddle">
|
||||
<dv-border-box-13>
|
||||
<dv-loading v-if="isLoding">Loading...</dv-loading>
|
||||
<section v-else ref="echartsContainer"></section>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoding: false,
|
||||
chartOptions: {
|
||||
legend: {},
|
||||
tooltip: {},
|
||||
dataset: {
|
||||
source: [
|
||||
['product', '2012', '2013', '2014', '2015'],
|
||||
['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
|
||||
['Milk Tea', 86.5, 92.1, 85.7, 83.1],
|
||||
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4],
|
||||
],
|
||||
},
|
||||
xAxis: { type: 'category' },
|
||||
yAxis: {},
|
||||
series: [
|
||||
{ type: 'bar', encode: { x: 'product', y: '2012' } },
|
||||
{ type: 'bar', encode: { x: 'product', y: '2013' } },
|
||||
{ type: 'bar', encode: { x: 'product', y: '2014' } },
|
||||
{ type: 'bar', encode: { x: 'product', y: '2015' } },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const chartContainer = this.$refs.echartsContainer;
|
||||
const chart = echarts.init(chartContainer);
|
||||
chart.setOption(this.chartOptions);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rightMiddle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
:deep(.dv-border-box-13) {
|
||||
padding: 2vh;
|
||||
box-sizing: border-box;
|
||||
section {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue