|
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> |
|||