Echarts 折线图Demo调色12种，可以直接使用~~~

测试Demo代码~~

<template>
  <div>
    <div id="myChart" ref="mapBox" style=" 100%; height: 400px"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import chartMock from '../co-assets/chart-mock.js'
const myOption = {
  title: {
    text: '折线图堆叠'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '1',
      type: 'line',
      stack: '总量',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '2',
      type: 'line',
      stack: '总量',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '3',
      type: 'line',
      stack: '总量',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '4',
      type: 'line',
      stack: '总量',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '5',
      type: 'line',
      stack: '总量',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    },
    {
      name: '6',
      type: 'line',
      stack: '总量',
      data: [920, 1032, 1101, 1134, 1390, 1430, 1420]
    },
    {
      name: '7',
      type: 'line',
      stack: '总量',
      data: [1020, 1132, 1201, 1234, 1490, 1430, 1520]
    },
    {
      name: '8',
      type: 'line',
      stack: '总量',
      data: [1220, 1332, 1301, 1334, 1590, 1530, 1620]
    },
    {
      name: '9',
      type: 'line',
      stack: '总量',
      data: [1320, 1432, 1801, 1834, 1890, 1830, 1820]
    },
    {
      name: '10',
      type: 'line',
      stack: '总量',
      data: [2220, 2232, 3201, 3334, 3490, 3530, 3620]
    },
    {
      name: '11',
      type: 'line',
      stack: '总量',
      data: [2420, 2432, 3401, 3434, 3790, 3730, 3820]
    },
    {
      name: '12',
      type: 'line',
      stack: '总量',
      data: [3220, 3232, 4201, 4334, 4490, 5530, 5620]
    }
  ]
}
export default {
  data() {
    return {}
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.mapBox)
    this.setChartOnion()
    window.addEventListener('resize', this.resizeTheChart)
  },
  methods: {
    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()
      }
    },
    setChartOnion() {
      myOption.series.forEach((item, i) => {
        item.areaStyle = { color: {} }
        item.itemStyle = { color: {} }
        // item = {
        //   name: item.name,
        //   type: 'line',
        //   symbol: 'none',
        //   // symbol:'circle', // 折线点设定为实心点
        //   // symbolSize: 9, // 设定折线点的大小
        //   // smooth: true, //折点是圆弧状的
        //   // showSymbol: true,
        //   // symbol: "circle", //折点设定为实心点
        //   // symbolSize: 20,
        //   stack: item.stack,
        //   data: item.data,
        //   itemStyle: { color: {} },
        //   areaStyle: { color: {} },
        //   lineStyle: {}
        // }
        // 設置折線圖顏色
        if (chartMock.itemStyleArr[i]) {
          item.itemStyle = chartMock.itemStyleArr[i].lineStyle
          item.areaStyle.color = chartMock.itemStyleArr[i]['color']
        }
      })
      this.myChart.setOption(myOption)
    }
  }
}
</script>

export default {
  
  itemStyleArr: [
    {
      // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#d7f4f8' // 0% 处的颜色
          },
          {
            offset: 0.5,
            color: '#b8eff7' // 100% 处的颜色
          },
          {
            offset: 1,
            color: '#fff' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }, // 背景渐变色
      lineStyle: {
        normal: {
          color: '#4fd6d2', // 图例的颜色
          lineStyle: {
            // 系列级个性化折线样式
             2,
            type: 'solid',
            color: '#4fd6d2'
          }
        }
      },
      emphasis: {
        color: '#4fd6d2',
        lineStyle: {
          // 系列级个性化折线样式
           2,
          type: 'dotted',
          color: '#4fd6d2' // 折线的颜色
        }
      }
    }, // 线条样式1
    {
      // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#81befd' // 0% 处的颜色
          },
          {
            offset: 0.4,
            color: '#bad7f5' // 100% 处的颜色
          },
          {
            offset: 1,
            color: '#fff' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }, // 背景渐变色
      lineStyle: {
        normal: {
          color: '#0180ff', // 图例的颜色
          lineStyle: {
            // 系列级个性化折线样式
             2,
            type: 'solid',
            color: '#0180ff'
          }
        }
      },
      emphasis: {
        color: '#0180ff',
        lineStyle: {
          // 系列级个性化折线样式
           2,
          type: 'dotted',
          color: '0180ff'
        }
      }
    }, // 线条样式2
    {
      // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#b581fd' // 0% 处的颜色
          },
          {
            offset: 0.4,
            color: '#f9e4ff' // 40% 处的颜色
          },
          {
            offset: 1,
            color: '#fff' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }, // 背景渐变色
      lineStyle: {
        normal: {
          color: '#b581fd', // 图例的颜色
          lineStyle: {
            // 系列级个性化折线样式
             2,
            type: 'solid',
            color: '#b581fd'
          }
        }
      },
      emphasis: {
        color: 'red',
        lineStyle: {
          // 系列级个性化折线样式
           1,
          type: 'dotted',
          color: 'red'
        }
      }
    }, // 线条样式3
    {
      // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#6699FF' // 0% 处的颜色
          },
          {
            offset: 0.4,
            color: '#9ebbf5' // 100% 处的颜色
          },
          {
            offset: 1,
            color: '#fff' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }, // 背景渐变色
      lineStyle: {
        normal: {
          color: '#6699FF', // 图例的颜色
          lineStyle: {
            // 系列级个性化折线样式
             2,
            type: 'solid',
            color: '#6699FF'
          }
        }
      },
      emphasis: {
        color: '#6699FF',
        lineStyle: {
          // 系列级个性化折线样式
           1,
          type: 'dotted',
          color: '#6699FF'
        }
      }
    }, // 线条样式4
    {
      // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#FF99FF' // 0% 处的颜色
          },
          {
            offset: 0.4,
            color: '#f7d2f7' // 100% 处的颜色
          },
          {
            offset: 1,
            color: '#fff' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }, // 背景渐变色
      lineStyle: {
        normal: {
          color: '#FF99FF', // 图例的颜色
          lineStyle: {
            // 系列级个性化折线样式
             2,
            type: 'solid',
            color: '#FF99FF'
          }
        }
      },
      emphasis: {
        color: '#FF99FF',
        lineStyle: {
          // 系列级个性化折线样式
           1,
          type: 'dotted',
          color: '#FF99FF'
        }
      }
    }, // 线条样式5
    {
      // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#2d2df7' // 0% 处的颜色
          },
          {
            offset: 0.4,
            color: '#9898f7' // 100% 处的颜色
          },
          {
            offset: 1,
            color: '#fff' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }, // 背景渐变色
      lineStyle: {
        normal: {
          color: '#2d2df7', // 图例的颜色
          lineStyle: {
            // 系列级个性化折线样式
             2,
            type: 'solid',
            color: '#2d2df7'
          }
        }
      },
      emphasis: {
        color: '#2d2df7',
        lineStyle: {
          // 系列级个性化折线样式
           1,
          type: 'dotted',
          color: '#2d2df7'
        }
      }
    }, // 线条样式6
    {
      // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#7a4ffb' // 0% 处的颜色
          },
          {
            offset: 0.4,
            color: '#beacf5' // 100% 处的颜色
          },
          {
            offset: 1,
            color: '#fff' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }, // 背景渐变色
      lineStyle: {
        normal: {
          color: '#7a4ffb', // 图例的颜色
          lineStyle: {
            // 系列级个性化折线样式
             2,
            type: 'solid',
            color: '#7a4ffb'
          }
        }
      },
      emphasis: {
        color: '#7a4ffb',
        lineStyle: {
          // 系列级个性化折线样式
           1,
          type: 'dotted',
          color: '#7a4ffb'
        }
      }
    }, // 线条样式7
    {
      // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#cc3399' // 0% 处的颜色
          },
          {
            offset: 0.4,
            color: '#d08cb9' // 100% 处的颜色
          },
          {
            offset: 1,
            color: '#fff' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }, // 背景渐变色
      lineStyle: {
        normal: {
          color: '#cc3399', // 图例的颜色
          lineStyle: {
            // 系列级个性化折线样式
             2,
            type: 'solid',
            color: '#cc3399'
          }
        }
      },
      emphasis: {
        color: '#cc3399',
        lineStyle: {
          // 系列级个性化折线样式
           1,
          type: 'dotted',
          color: '#cc3399'
        }
      }
    }, // 线条样式8
    {
      // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#ce3df3' // 0% 处的颜色
          },
          {
            offset: 0.4,
            color: '#df9cf1' // 100% 处的颜色
          },
          {
            offset: 1,
            color: '#fff' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }, // 背景渐变色
      lineStyle: {
        normal: {
          color: '#ce3df3', // 图例的颜色
          lineStyle: {
            // 系列级个性化折线样式
             2,
            type: 'solid',
            color: '#ce3df3'
          }
        }
      },
      emphasis: {
        color: '#ce3df3',
        lineStyle: {
          // 系列级个性化折线样式
           1,
          type: 'dotted',
          color: '#ce3df3'
        }
      }
    }, // 线条样式9
    {
      // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#ff6666' // 0% 处的颜色
          },
          {
            offset: 0.4,
            color: '#f3a0a0' // 100% 处的颜色
          },
          {
            offset: 1,
            color: '#fff' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }, // 背景渐变色
      lineStyle: {
        normal: {
          color: '#ff6666', // 图例的颜色
          lineStyle: {
            // 系列级个性化折线样式
             2,
            type: 'solid',
            color: '#ff6666'
          }
        }
      },
      emphasis: {
        color: '#ff6666',
        lineStyle: {
          // 系列级个性化折线样式
           1,
          type: 'dotted',
          color: '#ff6666'
        }
      }
    }, // 线条样式10
    {
      // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#f7aa37' // 0% 处的颜色
          },
          {
            offset: 0.4,
            color: '#f1bf75' // 100% 处的颜色
          },
          {
            offset: 1,
            color: '#fff' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }, // 背景渐变色
      lineStyle: {
        normal: {
          color: '#f7aa37', // 图例的颜色
          lineStyle: {
            // 系列级个性化折线样式
             2,
            type: 'solid',
            color: '#f7aa37'
          }
        }
      },
      emphasis: {
        color: '#f7aa37',
        lineStyle: {
          // 系列级个性化折线样式
           1,
          type: 'dotted',
          color: '#f7aa37'
        }
      }
    }, // 线条样式11
    {
      // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#ffcc33' // 0% 处的颜色
          },
          {
            offset: 0.4,
            color: '#f5d77e' // 100% 处的颜色
          },
          {
            offset: 1,
            color: '#fff' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }, // 背景渐变色
      lineStyle: {
        normal: {
          color: '#ffcc33', // 图例的颜色
          lineStyle: {
            // 系列级个性化折线样式
             2,
            type: 'solid',
            color: '#ffcc33'
          }
        }
      },
      emphasis: {
        color: '#ffcc33',
        lineStyle: {
          // 系列级个性化折线样式
           1,
          type: 'dotted',
          color: '#ffcc33'
        }
      }
    }, // 线条样式12
    {
      // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#efef33' // 0% 处的颜色
          },
          {
            offset: 0.4,
            color: '#fbfb87' // 100% 处的颜色
          },
          {
            offset: 1,
            color: '#fff' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }, // 背景渐变色
      lineStyle: {
        normal: {
          color: '#efef33', // 图例的颜色
          lineStyle: {
            // 系列级个性化折线样式
             2,
            type: 'solid',
            color: '#efef33'
          }
        }
      },
      emphasis: {
        color: '#efef33',
        lineStyle: {
          // 系列级个性化折线样式
           1,
          type: 'dotted',
          color: '#efef33'
        }
      }
    } // 线条样式11
  ]
};