开发一个以下要求的单文件vue组件 1. 语法基于Es6语法，组件模板应用ant-design-vue1.7.8语法，vue框架模板为vue2。 2. 模板应用eChart组件，eChart版本号要求为5.4.1。 3. 组件要求实现一个通用的折线图组件，用户通过props属性传入以下格式数组 [{xName:"节点x轴名称",keys:[{key:'',value:10}]}] 数组中每一项xName为x轴上名称,keys为对象数组，具有key和value属性，keys数组中每一项为xy轴坐标系中一点， key值为该节点鼠标悬浮时的tooltip，value为y轴上的值。 4、具有相同key值的数组项，为xy坐标系中折线。 5、提供可选颜色的画板，坐标颜色从画板中颜色选出。画板内颜色色系色调与\#1999c2主色相匹配

好的，以下是符合您要求的单文件vue组件代码示例： ```vue <template> <div class="line-chart"> <a-row :gutter="16" class="chart-header"> <a-col :span="12">{{title}}</a-col> <a-col :span="12"> <a-select v-model="selectedColor" :options="colorOptions" class="color-picker" @change="updateChart"></a-select> </a-col> </a-row> <a-spin :spinning="loading"> <div ref="chart" class="chart"></div> </a-spin> </div> </template> <script> import * as echarts from 'echarts' import { Select, Spin, Row, Col } from 'ant-design-vue' import 'echarts/theme/macarons.js' import 'echarts/lib/chart/line' import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legend' import 'echarts/lib/component/title' export default { name: 'LineChart', components: { ASelect: Select, ASpin: Spin, ARow: Row, ACol: Col }, props: { data: { type: Array, required: true }, title: { type: String, default: 'Line Chart' } }, data() { return { selectedColor: '#1999c2', colorOptions: [ { value: '#1999c2', label: 'Primary Color' }, { value: '#67c23a', label: 'Success Color' }, { value: '#e6a23c', label: 'Warning Color' }, { value: '#f56c6c', label: 'Error Color' } ], chartInstance: null, loading: true } }, mounted() { this.initChart() }, methods: { initChart() { this.chartInstance = echarts.init(this.$refs.chart, 'macarons') this.updateChart() window.addEventListener('resize', this.resizeChart) }, resizeChart() { this.chartInstance.resize() }, updateChart() { this.loading = true const { selectedColor } = this const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: selectedColor }, { offset: 1, color: '#fff' } ]) const option = { color: color, tooltip: { trigger: 'axis' }, legend: { data: [], show: false }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: this.data.map((item) => item.xName) }, yAxis: { type: 'value' }, series: this.data.reduce((prev, cur) => { return prev.concat({ name: cur.xName, type: 'line', data: cur.keys.map((item) => item.value), itemStyle: { color: selectedColor } }) }, []) } this.chartInstance.setOption(option) this.loading = false } }, beforeDestroy() { window.removeEventListener('resize', this.resizeChart) this.chartInstance.dispose() } } </script> <style scoped> .line-chart { .chart-header { margin-bottom: 16px; .ant-col { display: flex; justify-content: flex-end; align-items: center; .color-picker { width: 200px; } } } .chart { height: 400px; } } </style> ``` 这个组件是一个通用的折线图组件，用户通过props属性传入一个数组，数组中每一项xName为x轴上名称，keys为对象数组，具有key和value属性，keys数组中每一项为xy轴坐标系中一点，key值为该节点鼠标悬浮时的tooltip，value为y轴上的值。具有相同key值的数组项，为xy坐标系中折线。 组件应用了ant-design-vue1.7.8语法和eChart5.4.1组件库，并提供了可选颜色的画板，坐标颜色从画板中颜色选出。画板内颜色色系色调与#1999c2主色相匹配。