echarts圖例過多，折線過多顏色不知道怎么分配怎么辦？？優化如下

優化一：很簡單,echarts自身支持legend圖例分頁，加了分頁就優化了圖例過多情況。

legend['type']: 'scroll', // 添加這一行代碼即可實現圖例分頁功能

option = {
    title: {
        text: '折線圖堆疊'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        type: 'scroll', // 添加這一行代碼即可實現圖例分頁功能
        orient: 'horizontal', // 'vertical'
        x: 'right', // 'center' | 'left' | {number},
        y: 'bottom', // 'center' | 'bottom' | {number}
        // backgroundColor: '#fff',
        // borderColor: 'rgba(178,34,34,0.8)',
        // borderWidth: 4,
        padding: 10, // [5, 10, 15, 20]
        itemGap: 20,
        textStyle: { color: 'black' },
        data: ['郵件營銷', '聯盟廣告', '視頻廣告', '直接訪問', '搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '郵件營銷',
            type: 'line',
            stack: '總量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '聯盟廣告',
            type: 'line',
            stack: '總量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '視頻廣告',
            type: 'line',
            stack: '總量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接訪問',
            type: 'line',
            stack: '總量',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搜索引擎',
            type: 'line',
            stack: '總量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

優化二：不僅僅優化圖例，順便配置一下顯示情況，顯示過多數據會顯得雜亂無章，我們可以只配置部分圖例，配置部分選中的

var data = genData(50);

option = {
    title: {
        text: '同名數量統計',
        subtext: '純屬虛構',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        type: 'scroll', // 圖例優化
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20,
        data: data.legendData,

        selected: data.selected // 只配置部分圖例，配置部分選中的
    },
    series: [
        {
            name: '姓名',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data: data.seriesData,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};




function genData(count) {
    var nameList = [
        '趙', '錢', '孫', '李', '周', '吳', '鄭', '王', '馮', '陳', '褚', '衛', '蔣', '沈', '韓', '楊', '朱', '秦', '尤', '許', '何', '呂', '施', '張', '孔', '曹', '嚴', '華', '金', '魏', '陶', '姜', '戚', '謝', '鄒', '喻', '柏', '水', '竇', '章', '雲', '蘇', '潘', '葛', '奚', '范', '彭', '郎', '魯', '韋', '昌', '馬', '苗', '鳳', '花', '方', '俞', '任', '袁', '柳', '酆', '鮑', '史', '唐', '費', '廉', '岑', '薛', '雷', '賀', '倪', '湯', '滕', '殷', '羅', '畢', '郝', '鄔', '安', '常', '樂', '於', '時', '傅', '皮', '卞', '齊', '康', '伍', '余', '元', '卜', '顧', '孟', '平', '黃', '和', '穆', '蕭', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '貝', '明', '臧', '計', '伏', '成', '戴', '談', '宋', '茅', '龐', '熊', '紀', '舒', '屈', '項', '祝', '董', '梁', '杜', '阮', '藍', '閔', '席', '季', '麻', '強', '賈', '路', '婁', '危'
    ];
    var legendData = [];
    var seriesData = [];
    var selected = {};  // 只配置部分圖例，配置部分選中的
    for (var i = 0; i < count; i++) {
        name = Math.random() > 0.65
            ? makeWord(4, 1) + '·' + makeWord(3, 0)
            : makeWord(2, 1);
        legendData.push(name);
        seriesData.push({
            name: name,
            value: Math.round(Math.random() * 100000)
        });
        selected[name] = i < 6;  // 只配置部分圖例，配置部分選中的
    }

    return {
        legendData: legendData,
        seriesData: seriesData,
        selected: selected  // 只配置部分圖例，配置部分選中的
    };

    function makeWord(max, min) {
        var nameLen = Math.ceil(Math.random() * max + min);
        var name = [];
        for (var i = 0; i < nameLen; i++) {
            name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
        }
        return name.join('');
    }
}

好看的配色

colors: [
    {
      c100: '#60acfc',
      c40: '#9fcdfdd9'
    },
    {
      c100: '#32d3eb',
      c40: '#84e4f3db'
    },
    {
      c100: '#9d94ea',
      c40: '#d4cffd'
    },
    {
      c100: '#40cec7',
      c40: '#8ce1ddde'
    },
    {
      c100: '#8087e6',
      c40: '#c4c8fb'
    },
    {
      c100: '#39b3ea',
      c40: '#7dc6f2d6'
    },
    {
      c100: '#5bc49f',
      c40: '#9cdbc5d6'
    },
    {
      c100: '#7885f1',
      c40: '#b8bffb'
    },
    {
      c100: '#76a1ef',
      c40: '#c5d8fb'
    },
    {
      c100: '#27a1ea',
      c40: '#7dc6f2d1'
    },
    {
      c100: '#35c5ea',
      c40: '#85dcf2d9'
    },
    {
      c100: '#f788aa',
      c40: '#f7adc4e0'
    },
    {
      c100: '#fb9a8a',
      c40: '#fca8a6c9'
    },
    {
      c100: '#d870af',
      c40: '#dc91bfd1'
    },
    {
      c100: '#4ebecd',
      c40: '#94d8e1c9'
    }
  ]

設置只有前n項展示，后面的讓用戶自己點擊

var selected = {};  // 只配置部分圖例，配置部分選中的
const selected = {}
            lengedData.forEach((_, i) => {
              selected[_] = i < 10;
            }) 
            // 設置只有前n項展示，后面的讓用戶自己點擊
            const arrC = [0, 1, 2, 3, 4, 5]
            arrC.forEach(_ => {
              myOptions[_].legend.data = lengedData
              myOptions[_].legend.selected = selected // 設置只有前n項展示，后面的讓用戶自己點擊
              myOptions[_].xAxis.data = xAxisData
            })

修改完成之后，legend.data，legend.selected會像下面這個樣子

data: 
0: "圖例名01"
1: "圖例名02"
2: "圖例名03"
3: "圖例名04"
4: "圖例名05"
5: "圖例名06"
6: "圖例名07"
7: "圖例名08"
8: "圖例名09"
9: "圖例名10"
10: "圖例名11"
11: "圖例名12"
12: "圖例名13"
13: "圖例名14"
14: "圖例名15"
15: "圖例名16"
selected:
圖例名1: true
圖例名2: true
圖例名3: true
圖例名4: true
圖例名5: true
圖例名6: true
圖例名7: true
圖例名8: true
圖例名09: true
圖例名10: true
圖例名11: false
圖例名12: false
圖例名13: false
圖例名14: false
圖例名15: false
圖例名16: false

優化三：ECharts實現可縮放x軸，使用鼠標滾輪可以放大縮小

$(document).ready(function () {
  var myChart = echarts.init(document.getElementById("container-one-content"));
  // 123456熱線
  var option = {
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["17/1", "17/2", "17/3", "17/4", "17/5", "17/6", "17/7", "17/8", "17/9", "17/10", "17/11", "17/12", "17/13", "17/14"],
      axisLine: {
        lineStyle: {
          color: "#03A9F4"
        }
      }
    },
    yAxis: [
      {
        name: "單位/件",
        type: "value",
        axisLine: {
          lineStyle: {
            color: "#03A9F4"
          }
        },
        splitLine: {
          //網格線
          show: false
        }
      },
      {
        type: "value",
        min: 0,
        max: 1000,
        axisLine: {
          lineStyle: {
            color: "#03A9F4"
          }
        },
        splitLine: {
          //網格線
          show: false
        },
        axisLabel: {
          show: true,
          formatter: function (value, index) {
            return value / 25;
          },
          show: true,
          color: "#03A9F4",
          fontSize: 13
        }
      }
    ],
    series: [
      {
        data: [820, 932, 901, 2234, 1290, 1330, 1320, 1100, 2590, 1870, 2400, 1500, 1133, 888],
        type: "line",
        areaStyle: {
          color: "green"
        },
        lineStyle: {
          color: "#4CAF50"
        }
      }
    ],
    // 需要添加的代碼：使用鼠標滾輪可以放大縮小
    dataZoom: [
      {
        id: 'dataZoomX',
        type: 'inside',
        xAxisIndex: [0],
        filterMode: 'none',
        start: 0,
        end: 50
      }
    ]
    // 需要添加的代碼：使用鼠標滾輪可以放大縮小
  };
  // 使用剛指定的配置項和數據顯示圖表。
  myChart.setOption(option);

優化4：添加小圖標指示，當鼠標放在圖例時候，會清晰看到所指示的那一條線

let symbolStyle = { // 不同的圓點形狀
                  0: 'heart',
                  1: 'rectangle',
                  2: 'triangle',
                  3: 'diamond',
                  4: 'emptyCircle',
                  5: 'emptyRectangle',
                  6: 'emptyTriangle',
                  7: 'emptyDiamond'
                }
                series.push({
                  name: _.station_code,
                  type: 'line',
                  symbol: symbolStyle[i], // 用來配合tooltip.trigger='item'
                  symbolSize: 1, // 設定折線點的大小
                  // smooth: true, // 折點是圓弧狀的
                  // showSymbol: true,
                  // symbol: "circle", //折點設定為實心點
                  // symbolSize: 20,
                  stack: _.stacke,
                  data: _.data,
                  itemStyle: { color: {}},
                  areaStyle: { color: {}},
                  lineStyle: {}
                })

優化5：Echarts 折線圖區域鼠標事件高亮,這個還沒啟用，但是可以作為參考，原博主寫的樣式

原博地址：https://blog.csdn.net/qq_36330228/article/details/106629199

下面是一些DEMO可以看一下代碼

<template>
  <div>
    <!-- 案例1 -->
    <div id="myChart" ref="mapBox" style="width: 100%; height: 400px"></div>
    <!-- 案例1 -->
    <div id="myChart0" ref="mapBox0" style="width: 100%; height: 400px" />
    <div id="myChart1" ref="mapBox1" style="width: 100%; height: 400px" />
    <div id="myChart2" ref="mapBox2" style="width: 100%; height: 400px" />
    <div id="myChart3" ref="mapBox3" style="width: 100%; height: 400px" />
    <div id="myChart4" ref="mapBox4" style="width: 100%; height: 400px" />
    <div id="myChart5" ref="mapBox5" style="width: 100%; height: 400px" />
  </div>
</template>

<script>
import echarts from 'echarts'
// 設置圖表基礎配置項和數據
// 案例myOption
const myOption = {
  title: {
    text: '折線圖',
    link: 'http://localhost:8000/',
    subtext: '折線圖信息一覽表'
  },
  // title: {
  //     text: '折線圖堆疊'
  // },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    orient: 'horizontal', // 'vertical'
    x: 'right', // 'center' | 'left' | {number},
    y: 'bottom', // 'center' | 'bottom' | {number}
    // backgroundColor: '#fff',
    // borderColor: 'rgba(178,34,34,0.8)',
    // borderWidth: 4,
    padding: 10, // [5, 10, 15, 20]
    itemGap: 20,
    // textStyle: { color: 'red' },
    data: ['郵件營銷', '聯盟廣告', '視頻廣告', '直接訪問', '搜索引擎']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: 40,
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '郵件營銷',
      type: 'line',
      // stack: '總量', // 總量就會相加
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '聯盟廣告',
      type: 'line',
      // stack: '總量',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '視頻廣告',
      type: 'line',
      // stack: '總量',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '直接訪問',
      type: 'line',
      // stack: '總量',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '搜索引擎',
      type: 'line',
      // stack: '總量',
      data: [820, 932, 901, 221, 434, 70, 1320]
    }
  ]
}
// 案例myOption
// 案例myOption0 需要注意的是 visualMap 和 series 存在一定的樣式沖突， 不能同時使用
const myOption0 = {
  visualMap: {
    // 視覺映射  漸變過渡等效果
    show: false,
    type: 'continuous',
    seriesIndex: 0,
    min: 0, // 控制最小的數據顯示色
    max: 60, // 控制最大的數據顯示色
    // color:["#4C8400","#80BB0D","#B4DA20","#B6DA8C"], // 折線漸變色 ， 由大到小排序  ECharts2的用法，ECharts3用inRange，如下
    inRange: {
      color: ['#4C8400', '#80BB0D', '#B4DA20', '#B6DA8C'],
      symbolSize: [30, 100] // 折線點的過渡大小， 從小到大
    }
  },
  tooltip: {
    // 鼠標移入效果
    trigger: 'axis',
    formatter: function(cur) {
      // formatter有  字符串模板 和 回調函數格式 兩種
      // 詳情： https://www.echartsjs.com/zh/option.html#series-line.tooltip.formatter

      // 通過參數 cur 基本就可以獲取想要的數據了，當然也可以自定義數據
      console.log(cur)

      // 最后把要展示的數據記得用return 出來
      return
    }
  },
  xAxis: {
    // x軸樣式與數據
    data: ['a', 'b', 'c', 'd', 'e'],
    axisLine: {
      lineStyle: {
        color: '#D8E3EA'
      }
    },
    axisLabel: {
      interval: 55, // X軸顯示文字 間隔，數據太多，每格55個 顯示一次 ， 有時候太多顯示不全，可以為0，強制全部顯示，
      fontSize: 12,
      color: '#fff'
    },
    splitLine: { show: false }
  },
  yAxis: {
    // y軸樣式與數據
    splitLine: {
      show: true,
      lineStyle: {
        color: '#A5C1D8'
      }
    },
    axisLine: {
      lineStyle: {
        color: '#D8E3EA'
      }
    },
    axisLabel: {
      interval: 55,
      fontSize: 14,
      color: '#fff'
    }
  },
  series: {
    type: 'line',
    showSymbol: false,
    data: [1, 2, 3, 4, 5, 6, 7, 8],
    symbol: 'circle', // 折線點的圖形
    symbolSize: 10, // 圖形大小
    itemStyle: {
      // 圖形點和折線的顏色， 可以是單一的，也可以是漸變的
      // color:"#f00"  //單一
      color: {
        // 漸變  屬性值 同CSS
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: 'red' // 0% 處的顏色
          },
          {
            offset: 1,
            color: 'blue' // 100% 處的顏色
          }
        ]
      }
    },
    lineStyle: {
      // 單獨配置折線圖線條的顯示效果， 配置基本和 itemStyle差不多
      color: '#f0f', // 顏色
      width: 5 // 線寬
    },
    areaStyle: {
      // 折線下面區域塊的樣式
      color: '#fff'
    }
  }
}
// 案例myOption0
// 案例myOption1,這個可以實現點擊更換成單個展示信息的
let color = ''
const dataJson = {
  IsClickFlg: false
}
const myOption1 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: [
      '電話銷售',
      '紙質傳媒',
      '郵件營銷',
      '聯盟廣告',
      '視頻廣告',
      '直接訪問',
      '搜索引擎'
    ]
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '電話銷售',
      type: 'line',
      symbolSize: 2,
      stack: '總量',
      areaStyle: {},
      data: [10, 22, 11, 24, 10, 23, 21]
    },
    {
      name: '紙質傳媒',
      type: 'line',
      symbolSize: 2,
      stack: '總量',
      areaStyle: {},
      data: [12, 13, 10, 13, 90, 23, 21]
    },
    {
      name: '郵件營銷',
      type: 'line',
      stack: '總量',
      symbolSize: 2,
      areaStyle: {},
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '聯盟廣告',
      type: 'line',
      stack: '總量',
      symbolSize: 2,
      areaStyle: {},
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '視頻廣告',
      type: 'line',
      stack: '總量',
      symbolSize: 2,
      areaStyle: {},
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '直接訪問',
      type: 'line',
      stack: '總量',
      symbolSize: 2,
      areaStyle: {},
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '搜索引擎',
      type: 'line',
      stack: '總量',
      symbolSize: 2,
      label: {
        normal: {
          show: true,
          position: 'top'
        }
      },
      areaStyle: {},
      data: [220, 332, 401, 234, 590, 630, 320]
    }
  ]
}
// 案例myOption1
// 區域圖表myOption2  還不錯哦但是只支持一個線哦多了不好用
const myOption2 = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      areaStyle: {}
    }
  ]
}
// 區域圖表myOption2  還不錯哦但是只支持一個線哦多了不好用

export default {
  data() {
    return {}
  },
  methods: {
    // 設置圖表自定縮放1
    resizeTheChart() {
      // console.log('縮放執行中~~~');
      if (this.$refs && this.$refs.mapBox) {
        const myChartNode = document.getElementById('myChart')
        if (myChartNode) {
          myChartNode.style.height = myChartNode.offsetWidth * 0.5 + 'px'
        }
        this.myChart.resize()
      }
    }
    // 設置圖表自定縮放2
  },
  mounted() {
    // 初始化echarts實例
    this.myChart = echarts.init(this.$refs.mapBox) // 案例myOption
    this.myChart.setOption(myOption) // 案例myOption

    this.myChart0 = echarts.init(this.$refs.mapBox0)
    this.myChart0.setOption(myOption0) // 案例myOption0
    this.myChart1 = echarts.init(this.$refs.mapBox1)
    this.myChart1.setOption(myOption1) // 案例myOption1
    // 案例myOption1
    this.myChart1.getZr().on('click', params => {
      // 觸發了點擊事件
      dataJson.IsClickFlg = true
      // 記錄區域高亮前的顏色
      color = params.color
      console.log(this.myChart1)
      myOption1.tooltip.trigger = 'item'
      myOption1.series.symbolSize = 5
      // this.myChart1.clear()
      this.myChart1.setOption(myOption1)
      // 下面這個不曉得為何不生效
      // this.myChart1.setOption({
      //   tooltip: {
      //     trigger: 'item'
      //   },
      //   series: {
      //     name: params.seriesName,
      //     symbolSize: 5,
      //     lineStyle: {
      //       width: 5
      //     },
      //     areaStyle: {
      //       color: 'red'
      //     },
      //     tooltip: {
      //       textStyle: {
      //         color: 'white',
      //         fontSize: 14
      //       }
      //     }
      //   }
      // })
      // 這個不曉得為何不生效
    })

    this.myChart1.getZr().on('mouseout', params => {
      // 加上判斷是否點擊過的標志作用，避免鼠標監控事件一直觸發，導致區域顏色會改變，可以去掉這句代碼試下
      if (dataJson.IsClickFlg) {
        myOption1.tooltip.trigger = 'axis'
        myOption1.series.symbolSize = 2
        // this.myChart1.clear()
        this.myChart1.setOption(myOption1)
        // this.myChart1.setOption({
        //   tooltip: {
        //     trigger: 'axis'
        //   },
        //   series: {
        //     name: params.seriesName,
        //     symbolSize: 2,
        //     lineStyle: {
        //       width: 2
        //     },
        //     areaStyle: {
        //       color: color
        //     }
        //   }
        // })
        // 區域顏色還原，點擊標志還原
        dataJson.IsClickFlg = false
      }
    })
    // 案例myOption1
    // 案例myOption2
    this.myChart2 = echarts.init(this.$refs.mapBox2)
    this.myChart2.setOption(myOption2) // 案例0
    this.myChart2.getZr().on('click', params => {
      const pointInPixel = [params.offsetX, params.offsetY] // 鼠標點擊位置
      if (this.myChart2.containPixel('grid', pointInPixel)) { // 過濾繪制圖形的網格外的點擊事件
        const xIndex = this.myChart2.convertFromPixel({ seriesIndex: 0 }, [
          params.offsetX,
          params.offsetY
        ])[0] // 獲取點擊位置對應的x軸數據的索引值
        const a = this.myChart2.getOption().series[0].data[xIndex] // 獲取到對應的這個折現最近的折點y軸對應值
        // 事件處理代碼書寫位置
        console.log('第幾個節點', xIndex)
        console.log('y軸對應值', a)
      }
    })
    // 案例myOption2
    this.myChart3 = echarts.init(this.$refs.mapBox3)
    this.myChart4 = echarts.init(this.$refs.mapBox4)
    this.myChart5 = echarts.init(this.$refs.mapBox5)
    window.addEventListener('resize', this.resizeTheChart)
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeTheChart)
  }
}
</script>
<style lang='less'>
</style>

參考博文：
https://blog.csdn.net/lightpass/article/details/81457410
https://blog.csdn.net/qq_36330228/article/details/106629199
https://blog.csdn.net/qq_41619796/article/details/88661894
https://blog.csdn.net/yl640007010/article/details/79731604