176 lines
4.7 KiB
Python
176 lines
4.7 KiB
Python
<template>
|
||
<div class="app-container">
|
||
<el-row :gutter="5">
|
||
<el-col :span="8">
|
||
<el-card>
|
||
<Echart
|
||
:options="pieOptions"
|
||
id="pieChart"
|
||
height="400px"
|
||
width="260px"
|
||
></Echart>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="16">
|
||
<el-card>
|
||
<charts
|
||
:id="chartId1"
|
||
:options="barOptions"
|
||
:className="chartsName"
|
||
height="400px"
|
||
width="600px"
|
||
>
|
||
</charts>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
<el-col>
|
||
<el-card>
|
||
<charts
|
||
:id="chartId2"
|
||
:options="barOptions"
|
||
:className="chartsName"
|
||
height="480px"
|
||
width="100%"
|
||
>
|
||
</charts>
|
||
</el-card>
|
||
</el-col>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import charts from './charts.vue'
|
||
import Echart from '@/components/echart';
|
||
export default {
|
||
name: "progressStatistics",
|
||
components: {
|
||
Echart,
|
||
charts
|
||
},
|
||
data() {
|
||
return {
|
||
chartsName:'barChart',
|
||
chartId1:'chart1',
|
||
chartId2:'chart2',
|
||
pieOptions: {},
|
||
barOptions: {},
|
||
cdata: {
|
||
xData: ["交付率", "逾期率"],
|
||
seriesData: [
|
||
{value: 99, name: "交付率"},
|
||
{value: 1, name: "逾期率"},
|
||
]
|
||
},
|
||
xAxisbar:["冷加工", "热弯", "钢化", "镀膜", "夹层", "包边", "装框"],
|
||
barData: [80, 95, 96, 96, 96, 98, 99],
|
||
}
|
||
},
|
||
watch: {
|
||
cdata: {
|
||
handler(newData) {
|
||
this.pieOptions = {
|
||
color: [
|
||
"#32c5e9",
|
||
"#ffdb5c"
|
||
],
|
||
tooltip: {
|
||
trigger: "item",
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||
},
|
||
toolbox: {
|
||
show: true
|
||
},
|
||
calculable: true,
|
||
series: [
|
||
{
|
||
name: '访问来源',
|
||
type: 'pie', // 设置图表类型为饼图
|
||
radius: '65%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
|
||
center: ['50%', '50%'], //圆心位置
|
||
data:newData.seriesData
|
||
}
|
||
]
|
||
}
|
||
},
|
||
immediate: true,
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
},
|
||
methods: {
|
||
},
|
||
mounted() {
|
||
this.barOptions ={
|
||
grid: {
|
||
top: '10%',
|
||
left: '3%',
|
||
right: '5%',
|
||
bottom: '1%',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: function (params) {
|
||
let color = params.color;//图例颜色
|
||
let htmlStr = '<div>';
|
||
htmlStr += params.name + '<br/>';
|
||
htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
|
||
htmlStr += params.seriesName + '：' + params.value + '%';
|
||
htmlStr += '</div>';
|
||
return htmlStr;
|
||
}
|
||
},
|
||
xAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false, //去掉X轴分割线
|
||
},
|
||
data: this.xAxisbar,
|
||
},
|
||
yAxis: {
|
||
axisLine: {
|
||
show: true,//y轴线
|
||
},
|
||
axisTick: {
|
||
show: false//Y轴刻度线
|
||
},
|
||
axisLabel: {
|
||
color: '#333333'//Y轴文本颜色
|
||
},
|
||
splitLine: {
|
||
show: true, //Y轴分割线
|
||
lineStyle: {
|
||
color: '#dddddd'//Y轴分割线颜色
|
||
}
|
||
},
|
||
},
|
||
series: [{
|
||
name: '成品率',
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
data: this.barData,
|
||
label: {
|
||
show: true, //开启显示
|
||
position: 'top', //在上方显示
|
||
formatter: '{c}%',//显示百分号
|
||
textStyle: { //数值样式
|
||
color: 'black',//字体颜色
|
||
fontSize: 10//字体大小
|
||
}
|
||
},
|
||
itemStyle: {
|
||
color: '#409EFF'
|
||
},
|
||
}]
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|