vue3中使用echarts折线图初始化只显示一条数据，其余折线根据用户点击进行显示

琴～～

于 2024-09-27 15:51:23 发布

阅读量66

点赞数

文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/142595529

版权

vue3中使用echarts折线图初始化只显示一条折线，其余折线根据用户点击进行显示

1、主要是在图例属性中去配置selected属性，将刚开始需要展示的折线设置为true，其余设置为false

selected: {
    "云存储": false,
    "云胶片": false,
    "检查检验共享互认": false,
    "云质控": false,
    "运营平台": false,
    "云PACS": false,
    "云诊断": false,
    "影像底座": false,
    "总调用数量": true,
},

2、关键代码片段

let chart = null
const reqAppApiUseSevenDay = () => {
	getAppApiUse7Day().then((res) => {
		const {
			data: { xAxis, series }
		} = res
		chartObj.xAxis = xAxis.map((item) => item.split('-').slice(1).join('-'))
		chartObj.series = series.map((item, index) => {
			if (item.name === '总调用数量') {
				return { ...item, type: 'line' }
			}
			return {
				...item,
				type: 'line',
				legendIndex: index
			}
		})
		chartObj.legend = series.map((item) => item.name)
		setTimeout(() => {
			chart = echarts.init(chartContainer.value)
			let option = {
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: chartObj.legend,
					bottom: 20,
                    selected: {
                        "云存储": false,
                        "云胶片": false,
                        "检查检验共享互认": false,
                        "云质控": false,
                        "运营平台": false,
                        "云PACS": false,
                        "云诊断": false,
                        "影像底座": false,
                        "总调用数量": true,
                    },
				},
				grid: {
					top: '20px',
					left: '20px',
					right: '18px',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: chartObj.xAxis
				},
				yAxis: {
					type: 'value'
				},
				series: chartObj.series
			}
			option && chart.setOption(option)

			// 监听窗口大小变化，重新设置ECharts的尺寸
			window.addEventListener('resize', resizeHandler)
		}, 100)
	})
}

function resizeHandler() {
	chart && chart.resize()
}