echarts折线图封装

好的，关于echarts折线图的封装，可以参考以下步骤：

1. 引入echarts库和封装所需的数据
2. 创建一个div容器，设置宽高
3. 初始化echarts实例，并设置基本配置项
4. 封装数据，包括x轴数据、y轴数据、图例名称等
5. 设置折线图的配置项，包括颜色、线条样式、标记点等
6. 将封装好的数据和配置项传入echarts实例中
7. 渲染折线图

以下是一个简单的示例代码：

// 引入echarts库和封装所需的数据
import echarts from 'echarts'
import data from './data'

// 创建一个div容器，设置宽高
const container = document.getElementById('chart')
container.style.width = '600px'
container.style.height = '400px'

// 初始化echarts实例，并设置基本配置项
const chart = echarts.init(container)
const option = {
  title: {
    text: '折线图'
  },
  tooltip: {},
  legend: {
    data: []
  },
  xAxis: {
    data: []
  },
  yAxis: {},
  series: []
}

// 封装数据，包括x轴数据、y轴数据、图例名称等
option.legend.data = data.legend
option.xAxis.data = data.xAxis
for (let i = 0; i < data.series.length; i++) {
  option.series.push({
    name: data.legend[i],
    type: 'line',
    data: data.series[i]
  })
}

// 设置折线图的配置项，包括颜色、线条样式、标记点等
option.series.forEach(item => {
  item.lineStyle = {
    color: '#1890ff'
  }
  item.itemStyle = {
    color: '#1890ff'
  }
  item.label = {
    show: true
  }
})

// 将封装好的数据和配置项传入echarts实例中
chart.setOption(option)

// 渲染折线图
chart.render()