修改bug
This commit is contained in:
‘937886381’
253
src/views/OperationalOverview/components/LineChart.vue
Normal file
253
src/views/OperationalOverview/components/LineChart.vue
Normal file
@@ -0,0 +1,253 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2022-01-21 14:43:06
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-01-24 13:27:41
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
|
||||
<div :id="id" :class="className" :style="{ paddingTop: '1.25em', height: height + 'px', width:width}" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import 'echarts/theme/macarons' // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'OverviewBar',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'OverviewLine'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
legendPosition: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
showLegend: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
legendData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
bottom: '0',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
itemHeight: 10,
|
||||
itemWidth: 10,
|
||||
x: this.legendPosition, // 可设定图例在左、右、居中
|
||||
y: 'top', // 可设定图例在上、下、居中
|
||||
show: this.showLegend,
|
||||
data: this.legendData,
|
||||
top: 28,
|
||||
right: '1%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#ced1d5'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
splitLine: { show: false }, // 去除网格线
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#123341', // 左边线的颜色
|
||||
width: '1'// 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#666a74' // 坐标值得具体的颜色
|
||||
|
||||
}
|
||||
},
|
||||
data: ['1', '5', '15', '20', '25', '30']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: { show: false }, // 去除网格线
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#123341', // 左边线的颜色
|
||||
width: '1'// 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#666a74' // 坐标值得具体的颜色
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.showLegend ? this.legendData[0].name : '',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#3574a8',
|
||||
lineStyle: {
|
||||
color: '#3574a8'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [120, 32, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: this.showLegend ? this.legendData[1].name : '',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#9f3476',
|
||||
lineStyle: {
|
||||
color: '#9f3476'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [270, 182, 191, 234, 290, 230, 210]
|
||||
},
|
||||
{
|
||||
name: this.showLegend ? this.legendData[2].name : '',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#30959d',
|
||||
lineStyle: {
|
||||
color: '#30959d'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [160, 32, 301, 154, 190, 330, 210]
|
||||
},
|
||||
{
|
||||
name: this.showLegend ? this.legendData[3].name : '',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#5255be',
|
||||
lineStyle: {
|
||||
color: '#5255be'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [150, 132, 21, 234, 190, 130, 320]
|
||||
},
|
||||
{
|
||||
name: this.showLegend ? this.legendData[4].name : '',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#8b4449',
|
||||
lineStyle: {
|
||||
color: '#8b4449'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [210, 332, 201, 34, 290, 230, 320]
|
||||
},
|
||||
{
|
||||
name: this.showLegend ? this.legendData[5].name : '',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#a29848',
|
||||
lineStyle: {
|
||||
color: '#a29848'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [20, 62, 101, 34, 190, 30, 120]
|
||||
},
|
||||
{
|
||||
name: this.showLegend && this.legendData[6] ? this.legendData[6].name : '',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#a29848',
|
||||
lineStyle: {
|
||||
color: '#a29848'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [20, 62, 101, 34, 190, 30, 120]
|
||||
},
|
||||
{
|
||||
name: this.showLegend && this.legendData[7] ? this.legendData[7].name : '',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#a29848',
|
||||
lineStyle: {
|
||||
color: '#a29848'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [20, 62, 101, 34, 190, 30, 120]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart{
|
||||
margin-top: -3em
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user