在vue3中使用echarts折线颜色

在 Vue3 中使用 ECharts 绘制折线图并自定义颜色，你可以这样做：

首先，在你的组件中安装 ECharts 的依赖，例如使用 `npm` 或 `yarn` 安装：

npm install echarts @vue/echarts
# 或者
yarn add echarts @vue/echarts

然后，在你的 Vue 文件中导入并配置 ECharts：

<template>
  <div id="chart" ref="myChart"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as echarts from '@vue/echarts';

onMounted(() => {
  const myChart = echarts.init(document.getElementById('chart'));

  // 示例数据
  const data = {
    labels: ['A', 'B', 'C', 'D', 'E'],
    series: [
      { name: 'Series 1', data: [10, 20, 30, 40, 50], color: '#FF0000' }, // 红色折线
      { name: 'Series 2', data: [5, 15, 25, 35, 45], color: '#00FF00' }  // 绿色折线
    ]
  };

  // 设置图表配置
  const options = {
    title: {
      text: 'ECharts折线图示例'
    },
    xAxis: {
      data: data.labels
    },
    yAxis: {},
    series: data.series,
  };

  // 初始化图表，并设置数据和配置
  myChart.setOption(options);
});
</script>

在这个例子中，我们通过 `color` 属性给每个系列（series）设置了特定的颜色。你可以根据需要修改颜色值，ECharts 支持多种颜色表示，如 RGB、HEX、命名颜色等。