107 lines
2.3 KiB
Vue
107 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<container1 title="工厂计划">
|
||
|
|
<el-date-picker slot="datePicker" v-model="dateRange" type="month" size="mini" placeholder="选择月">
|
||
|
|
</el-date-picker>
|
||
|
|
<div style="height:100%;width:100%;" ref="chart"></div>
|
||
|
|
</container1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import container1 from "./components/container1/index.vue";
|
||
|
|
|
||
|
|
import echarts from 'echarts'
|
||
|
|
require('echarts/theme/macarons') // echarts theme
|
||
|
|
import resize from '../../../dashboard/mixins/resize'
|
||
|
|
import colorList from '@/utils/colorPalette'
|
||
|
|
export default {
|
||
|
|
mixins: [resize],
|
||
|
|
name: 'left2',
|
||
|
|
components: {
|
||
|
|
container1,
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
dateRange: [],
|
||
|
|
chart: null,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.initChart()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
beforeDestroy () { },
|
||
|
|
methods: {
|
||
|
|
initChart () {
|
||
|
|
this.chart = echarts.init(this.$refs.chart)
|
||
|
|
this.setOptions()
|
||
|
|
},
|
||
|
|
setOptions () {
|
||
|
|
this.chart.setOption({
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
formatter: '{b} : {c}%'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false,
|
||
|
|
data: ['绝热', '装药', '总装'],
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
color: colorList,
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Funnel',
|
||
|
|
type: 'funnel',
|
||
|
|
left: '20%',
|
||
|
|
top: 30,
|
||
|
|
bottom: 30,
|
||
|
|
width: '60%',
|
||
|
|
min: 20,
|
||
|
|
max: 60,
|
||
|
|
minSize: '40%',
|
||
|
|
maxSize: '70%',
|
||
|
|
sort: 'descending',
|
||
|
|
gap: 0,
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'inside',
|
||
|
|
color: '#fff',
|
||
|
|
formatter: '{b} : {c}%'
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
length: 10,
|
||
|
|
lineStyle: {
|
||
|
|
width: 1,
|
||
|
|
type: 'solid'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
borderColor: '#fff',
|
||
|
|
borderWidth: 1
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
label: {
|
||
|
|
fontSize: 20,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{ value: 80, name: '绝热' },
|
||
|
|
{ value: 40, name: '装药' },
|
||
|
|
{ value: 20, name: '总装' },
|
||
|
|
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
</style>
|