echarts 图例 && 折线图

图例：

legend: {
    orient: 'horizontal',  //布局方式：  horizontal/vertical
    x: 'center', // 水平安放位置，默认为全图居中，可选： 'center' ¦ 'left' ¦ 'right'  或 {number}（x坐标，单位px）
    y: 'top',  //垂直安放位置，默认为全图顶端，可选： 'top' ¦ 'bottom' ¦ 'center' 或 {number}（y坐标，单位px）
    itemGap: 5,
    textStyle: { // 图例文字大小颜色
        fontSize: 12,
        color: '#ffffff'          
    },
    data:['进水(L)','出水(L)'],
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',       // 图例边框颜色
    borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
    padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，或数组形式分别设定上右下左边距，同css
    itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
    itemWidth: 20,             // 图例图形宽度
    itemHeight: 14,            // 图例图形高度
},

图例文字颜色也变：

legend: {
    orient: 'horizontal',  //布局方式：  horizontal/vertical
    x: 'center', // 水平安放位置，默认为全图居中，可选： 'center' ¦ 'left' ¦ 'right'  或 {number}（x坐标，单位px）
    y: 'top',  //垂直安放位置，默认为全图顶端，可选： 'top' ¦ 'bottom' ¦ 'center' 或 {number}（y坐标，单位px）
    textStyle: {
        fontSize: 12,
    },
    data: [
        {
            name: '进水(L)',
            //   icon: 'circle',
            textStyle: {
                color: "#2B80FF "         // 图例文字颜色
            }
        },
        {
            name: '出水(L)',
            //   icon: 'circle',
            textStyle: {
                color: "#3DF3C4"        // 图例文字颜色
            }
        }
    ],
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',       // 图例边框颜色
    borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
    padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，或数组形式分别设定上右下左边距，同css
    itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
    itemWidth: 20,             // 图例图形宽度
    itemHeight: 14,            // 图例图形高度
},

<template>
    <div>
        <div id="echarts" style="width:600px;height:200px;margin:50px auto;"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {}
    },
    created() { },
    mounted() {
        this.typeCharts0()
    },
    methods: {
        typeCharts0() {
            let option = this.getOption();
            var chartDom = document.getElementById('echarts');
            var myChart = echarts.init(chartDom);
            myChart.setOption(option, true);
        },
        getOption(data) {
            let option = {
                color: ["#2B80FF", "#3DF3C4"],
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    orient: 'horizontal',
                    x: 'center',
                    y: 'top',
                    textStyle: {
                        fontSize: 12,
                    },
                    data: [
                        {
                            name: '进水(L)',
                            textStyle: {
                                color: "#2B80FF "
                            }
                        },
                        {
                            name: '出水(L)',
                            textStyle: {
                                color: "#3DF3C4"
                            }
                        }
                    ],
                    backgroundColor: 'rgba(0,0,0,0)',
                    borderColor: '#ccc',
                    borderWidth: 0,
                    padding: 5,
                    itemGap: 10,
                    itemWidth: 20,
                    itemHeight: 14,
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['0:00', '1:21', '2:42', '4:03', '5:24', '6:45', '8:06', '9:27', '10:48']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '进水(L)',
                        type: 'line',
                        stack: 'Total',
                        data: [2.1, 2.0, 2.14, 2.16, 2.4, 2.5, 2.2, 2.1, 2.0, 2.14]
                    },
                    {
                        name: '出水(L)',
                        type: 'line',
                        stack: 'Total',
                        data: [2.1, 2.0, 2.14, 2.16, 2.4, 2.5, 2.2, 2.1, 2.14, 2.16,]
                    },
                ]
            };
            return option;
        }

    }
}
</script>