163 lines
3.9 KiB
Vue
163 lines
3.9 KiB
Vue
<template>
|
|
<div>
|
|
<container2 title="经营总体走势">
|
|
<div style="height:100%;width:100%;" ref="chart"></div>
|
|
</container2>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import scalseBox from '../components/scaleBox.vue'
|
|
import bigScreenHead from "../components/bigScreenHead/index.vue";
|
|
import rocketTit from "../components/rocketTit/index.vue";
|
|
import container2 from "../components/container2/index.vue";
|
|
|
|
|
|
import echarts from 'echarts'
|
|
require('echarts/theme/macarons') // echarts theme
|
|
import resize from '../../dashboard/mixins/resize'
|
|
export default {
|
|
mixins: [resize],
|
|
name: 'right2',
|
|
components: {
|
|
scalseBox,
|
|
bigScreenHead,
|
|
rocketTit,
|
|
container2,
|
|
},
|
|
data () {
|
|
return {
|
|
chart: null,
|
|
option: {
|
|
backgroundColor: '',
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
right: '10',
|
|
data: ['XX零件收入占比', 'XY零件收入占比'],
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10'],
|
|
splitLine: {
|
|
show: false//不显示网格线
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false//不显示网格线
|
|
},
|
|
splitArea: {
|
|
show: false//不显示网格区域
|
|
},
|
|
axisLabel: {
|
|
formatter: "{value}%"
|
|
},
|
|
min: 0,
|
|
max: 100
|
|
},
|
|
series: [
|
|
{
|
|
name: 'XX零件收入占比',
|
|
type: 'line',
|
|
data: [55, 30, 45, 35, 55, 60, 60],
|
|
smooth: false,
|
|
lineStyle: {
|
|
color: 'rgba(78, 187, 147, 1)'
|
|
},
|
|
areaStyle: {//区域填充渐变颜色
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(78, 187, 147, 0.5)' // 0% 处的颜色
|
|
}, {
|
|
offset: .75, color: 'rgba(78, 187, 147, 0)' // 100% 处的颜色
|
|
}],
|
|
global: false // 缺省为 false
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'XY零件收入占比',
|
|
type: 'line',
|
|
data: [45, 70, 50, 65, 45, 35, 40],
|
|
smooth: false,
|
|
lineStyle: {
|
|
color: 'rgba(16,148,249, 1)'
|
|
},
|
|
areaStyle: {//区域填充渐变颜色
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(16,148,249, 0.5)' // 0% 处的颜色
|
|
}, {
|
|
offset: .75, color: 'rgba(16,148,249, 0)' // 100% 处的颜色
|
|
}],
|
|
global: false // 缺省为 false
|
|
}
|
|
}
|
|
},
|
|
|
|
]
|
|
},
|
|
}
|
|
},
|
|
mounted () {
|
|
this.$nextTick(() => {
|
|
this.initChart()
|
|
})
|
|
},
|
|
beforeDestroy () {
|
|
if (!this.chart) {
|
|
return
|
|
}
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
},
|
|
methods: {
|
|
initChart () {
|
|
this.chart = echarts.init(this.$refs.chart, 'macarons');
|
|
this.chart.setOption(this.option);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.num {
|
|
font-size: 30px;
|
|
font-family: Roboto-Black, Roboto;
|
|
font-weight: 900;
|
|
color: #f6d97e;
|
|
line-height: 35px;
|
|
// margin-right: 3px;
|
|
}
|
|
.num2 {
|
|
font-size: 30px;
|
|
font-family: Roboto-Black, Roboto;
|
|
font-weight: 900;
|
|
color: rgba(16, 152, 255, 1);
|
|
line-height: 35px;
|
|
}
|
|
</style> |