动态添加Echarts折线图

没有昵称可用的程序媛

已于 2023-04-11 10:50:01 修改

阅读量1k

点赞数 1

文章标签： echarts vue.js

于 2023-04-11 10:48:43 首次发布

本文链接：https://blog.csdn.net/m0_62646099/article/details/130078062

版权

文章介绍了如何在Vue.js应用中利用Echarts库动态更新折线图的series数据。通过调用setOption方法，并设置为true参数，可以实现图表数据的替换而非合并。示例代码展示了如何配置颜色、tooltip、x轴和y轴的细节，以及如何根据实际数据动态设置series和markLine来展示警戒线。

摘要由CSDN通过智能技术生成

思路：将图表的series改成动态的，主要使用到echarts的 setOption(option,true)

最终呈现效果：

代码：

   data () {
		return {
           	cpuOption: {  // 设置折线图基本样式
				color: ['rgb(28,146,255)', 'rgb(252,228,134)', 'rgb(8,132,8)', '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
					'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
					'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0',
					'#FFB7DD', '#660077', '#FFCCCC', '#FFC8B4', '#550088',
					'#FFFFBB', '#FFAA33', '#99FFFF', '#CC00CC', '#FF77FF',
					'#CC00CC', '#C63300', '#F4E001', '#9955FF', '#66FF66',
					'#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
					'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
					'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0',
					'#FFB7DD', '#660077', '#FFCCCC', '#FFC8B4', '#550088',
					'#FFFFBB', '#FFAA33', '#99FFFF', '#CC00CC', '#FF77FF',
					'#CC00CC', '#C63300', '#F4E001', '#9955FF', '#66FF66'],
				tooltip: {
					trigger: 'axis'
				},
				avoidLabelOverlap: true,//这个开启，避免y轴数字和警示值重叠
				grid: {
					left: '1%',
					right: '4%',
					bottom: '3%',
					top: '10%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: [],
					axisLabel: {
						interval: 0,//使x轴横坐标全部显示
						rotate: 80,
					},
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: false, //不显示坐标轴线
					},
				},
				series: [
					{
						name: '',
						data: [],
						symbolSize: 10,
						showSymbol: false,
						type: 'line'
					}
				]
			},

         }
   },


   methods:{
        // cpu使用率图表
		getCpUtility () {
			let resizeDiv = document.getElementById('changeContainer');
			const e = document.body.offsetWidth;
			var chart = this.$refs.cpUtility;
			if (chart) {
				var mychart = echarts.init(chart);
				mychart.setOption(this.cpuOption, true); // 设置为true就是不和之前的数据合并
				window.addEventListener("resize", function () {
					mychart.resize();
				});
				let listener = function () {
					mychart.resize();
				}
				EleResize.on(resizeDiv, listener)
			}
		},


        // 动态设置cpu的series
		setCupOption () {
			this.cpuOption.series = []  // 这里要清空，否则series会叠加之前的数据
			let data = []
			for (let i = 0;i < this.cpuEchartData.firstServerName.length;i++) { // 我这里是循环我在接口拿到的值，请根据您实际情况来看
				data = this.cpuEchartData.firstServerName[i]
				this.cpuOption.xAxis.data = this.cpuEchartData.dataText // x轴的值
				this.cpuOption.series.push({
					name: data.name, // 每个y轴数据的name（数据1、数据2）
					type: 'line',
					smooth: true,
					data: data.list, // y轴的值，是一个数组
					markLine: {
						label: {
							position: "start" //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
						},
						lineStyle: {
							normal: {
								color: '#FA3934',
							}
						},
						data: [{
							yAxis: 70, // 警戒线的标注值
							label: {
								show: true,
							}
						},],
						symbol: 'none'
					}
				})
			}
			echarts.init(this.$refs.cpUtility).setOption(this.cpuOption, true) // 重新加载图表并赋值
		},
   }