|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 272 KiB |
|
After Width: | Height: | Size: 249 KiB |
|
After Width: | Height: | Size: 261 KiB |
|
Before Width: | Height: | Size: 509 KiB After Width: | Height: | Size: 5.9 MiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 3.0 KiB |
@ -0,0 +1,243 @@ |
|||||
|
<template> |
||||
|
<!-- <div :class="className" :style="{height:height,width:width}" /> --> |
||||
|
|
||||
|
<el-row :gutter="40" class="panel-group flex-between"> |
||||
|
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col" v-for="item, index in 4" :key="index"> |
||||
|
<div class="card-panel"> |
||||
|
<div class="flex-between m-b-28"> |
||||
|
<span class="t1"> |
||||
|
代收成功订单 |
||||
|
</span> |
||||
|
<span class="t2"> |
||||
|
总订单：3698笔 |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="pieCon1 center" id="myChart1" style="width:150px;height:150px;margin-bottom: 15px;"></div> |
||||
|
<div class="center"> |
||||
|
<count-to :start-val="0" :end-val="3256" :duration="3600" class="card-panel-num" /> |
||||
|
<span style="font-size:14px;color:rgba(125, 140, 161, 1)">笔</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import CountTo from 'vue-count-to' |
||||
|
import * as echarts from 'echarts'; |
||||
|
require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
components: { |
||||
|
CountTo |
||||
|
}, |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '300px' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
myChart: '', |
||||
|
opinionData2: [ |
||||
|
{ value: 86, name: '代收成功订单', itemStyle: 'red' }, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
// this.initChart() |
||||
|
this.drawLine() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
drawLine() { |
||||
|
this.myChart = echarts.init(document.getElementById('myChart1')) |
||||
|
this.myChart.setOption({ |
||||
|
title: { |
||||
|
text: '95.08%', |
||||
|
textStyle: { |
||||
|
color: '#333', |
||||
|
fontSize: 16 |
||||
|
}, |
||||
|
itemGap: 10, // 主副标题距离 |
||||
|
left: 'center', |
||||
|
top: 'center' |
||||
|
}, |
||||
|
angleAxis: { |
||||
|
max: 100, // 满分 |
||||
|
clockwise: true, // 逆时针 |
||||
|
// 隐藏刻度线 |
||||
|
axisLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: false |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: false |
||||
|
} |
||||
|
}, |
||||
|
radiusAxis: { |
||||
|
type: 'category', |
||||
|
// 隐藏刻度线 |
||||
|
axisLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: false |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: false |
||||
|
} |
||||
|
}, |
||||
|
polar: { |
||||
|
center: ['50%', '50%'], |
||||
|
radius: ['60%', '100%'] //图形大小 |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'bar', |
||||
|
silent:'true', |
||||
|
data: [{ |
||||
|
name: '作文得分', |
||||
|
value: 68, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: { |
||||
|
// 完成的圆环的颜色 |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#46F2BC" // 0% 处的颜色 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.5, |
||||
|
color: "#2ED383" // 0% 处的颜色 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.7, |
||||
|
color: "#2ED383" // 0% 处的颜色 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#46F2BC" // 100% 处的颜色 |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}], |
||||
|
coordinateSystem: 'polar', |
||||
|
roundCap: true, |
||||
|
barWidth: 15, |
||||
|
barGap: '-100%', // 两环重叠 |
||||
|
z: 2, |
||||
|
}, |
||||
|
{ // 灰色环 |
||||
|
type: 'bar', |
||||
|
silent:'true', |
||||
|
data: [{ |
||||
|
value: 100, |
||||
|
itemStyle: { |
||||
|
color: '#ECF1F8', |
||||
|
shadowColor: '#EAFBF4', |
||||
|
shadowBlur: 10, |
||||
|
shadowOffsetY: 2 |
||||
|
} |
||||
|
}], |
||||
|
coordinateSystem: 'polar', |
||||
|
roundCap: true, |
||||
|
barWidth: 225, |
||||
|
barGap: '-100%', // 两环重叠 |
||||
|
z: 1 |
||||
|
}] |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
|
||||
|
this.chart.setOption({ |
||||
|
tooltip: { |
||||
|
trigger: 'item', |
||||
|
formatter: '{a} <br/>{b} : {c} ({d}%)' |
||||
|
}, |
||||
|
legend: { |
||||
|
left: 'center', |
||||
|
bottom: '10', |
||||
|
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'] |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: 'WEEKLY WRITE ARTICLES', |
||||
|
type: 'pie', |
||||
|
roseType: 'radius', |
||||
|
radius: [15, 95], |
||||
|
center: ['50%', '38%'], |
||||
|
data: [ |
||||
|
{ value: 320, name: 'Industries' }, |
||||
|
{ value: 240, name: 'Technology' }, |
||||
|
{ value: 149, name: 'Forex' }, |
||||
|
{ value: 100, name: 'Gold' }, |
||||
|
{ value: 59, name: 'Forecasts' } |
||||
|
], |
||||
|
animationEasing: 'cubicInOut', |
||||
|
animationDuration: 2600 |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.card-panel-num { |
||||
|
font-size: 32px; |
||||
|
} |
||||
|
.card-panel { |
||||
|
border-radius: 16px; |
||||
|
width: 100%; |
||||
|
background: rgba(255, 255, 255, 1); |
||||
|
padding: 20px 16px 26px 16px; |
||||
|
} |
||||
|
|
||||
|
.t1 { |
||||
|
color: rgba(51, 51, 51, 1); |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.t2 { |
||||
|
color: rgba(125, 140, 161, 1); |
||||
|
font-family: PingFang TC; |
||||
|
font-size: 13px; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
</style> |
||||