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

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 }} = reschartObj.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()
}