deviceManageDaPing/src/views/pages/components/lineChart.vue

<template>
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import * as echarts from 'echarts';
	import chartMixin from '@/mixins/ChartMixin';
	export default {
		mixins: [chartMixin],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '100%'
			},
			chartData: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				chart: null
			}
		},
		watch: {
			chartData: {
				deep: true,
				handler(val) {
					this.setOptions(val)
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.initChart()
			})
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			initChart() {
				this.chart = echarts.init(this.$el, 'macarons')
				this.setOptions(this.chartData)
			},
			setOptions({
				date,
				gjzs,
				yxgj
			} = {}) {
				this.chart.setOption({
					title: {
						text: '件',
						left: "12",
						top: 'top',
						textStyle: {
							color: "#FFFFFF",
							fontWeight: '400',
							fontSize: 12,
							lineHeight: 24, // 行高
						}
					},
					xAxis: {
						data: date,
						boundaryGap: false,
						axisTick: {
							show: false
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#464D71',
								width: 1,
								type: 'solid'
							}
						},
						axisLabel: {
							color: '#fff' // 标签颜色设置为白色，增加可读性
						}
					},
					grid: {
						left: 10,
						right: 10,
						bottom: 20,
						top: 30,
						containLabel: true,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						},
						padding: [5, 10]
					},
					yAxis: {
						axisLine: {
							show: false //隐藏y坐标轴
						},
						axisTick: {
							show: false //隐藏y刻度
						},

						splitLine: {
							show: false,
							lineStyle: {
								color: '#464D71',
								width: 1,
								type: 'solid'
							}
						},
						axisLabel: {
							color: '#fff' // 标签颜色设置为白色，增加可读性
						},
						splitArea: {
							show: false,
							areaStyle: {
								color: [
									'#1E586B',
								]
							}
						},
						
					},
					legend: {
						icon: 'circle',
						itemHeight: 5,
						itemWidth: 5,
						textStyle: {
							color: '#ffffff' // 设置图例文字颜色为深灰色
						},
						data: ['告警总数', '越线告警']
					},
					series: [{
							name: '告警总数',
							itemStyle: {
								normal: {
									color: '#FFAB2B',
									lineStyle: {
										color: '#FFAB2B',
										width: 1
									}
								}
							},
							symbol: 'none',
							// smooth: true,
							type: 'line',
							data: gjzs,
							areaStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: '#FFAB2B'
										},
										{
											offset: 0.6,
											color: '#FAAD1470'
										},
										{
											offset: 1,
											color: '#FAAD1410'
										}
									],
									false)
							},
						},
						{
							name: '越线告警',
							smooth: true,
							type: 'line',
							itemStyle: {
								normal: {
									color: '#00FEFE',
									lineStyle: {
										color: '#00FEFE',
										width: 1
									},
								}
							},
							symbol: 'none',
							data: yxgj,
							areaStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: '#00F2F3'
										},
										{
											offset: 0.6,
											color: '#2B98F770'
										},
										{
											offset: 1,
											color: '#2B98F710'
										}
									],
									false
								)
							},
						}
					]
				}, true)
			}
		}
	}
</script>
<style lang="less" scoped>

</style>