实现步骤：

* 寻找官方的类似示例，给予分析, 引入到HTML页面中
* 按照需求来定制它。

第一步：寻找官方的类似示例，给予分析。

// 销售统计模块
(function() {// 1. 实例化对象var myChart = echarts.init(document.querySelector(".line"));// 2. 指定配置和数据var option = {tooltip: {trigger: "axis"},legend: {data: ["邮件营销", "联盟广告"]},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true},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]}]};// 3. 把配置和数据给实例对象myChart.setOption(option);
})();

 第二步：按照需求来定制他

• 需求1： 修改折线图大小，显示边框设置颜色：#012f4a，并且显示刻度标签。 

    // 设置网格样式grid: { top: '20%',left: '3%',right: '4%',bottom: '3%',show: true,// 显示边框borderColor: '#012f4a',// 边框颜色containLabel: true // 包含刻度文字在内},

• 需求2： 修改图例组件中的文字颜色 #4c9bfd， 距离右侧 right 为 10% 

 // 图例组件legend: {textStyle: {color: '#4c9bfd' // 图例文字颜色},right: '10%' // 距离右边10%},

• 需求3： x轴相关配置

* 刻度去除
* x轴刻度标签字体颜色：#4c9bfd
* 剔除坐标轴线颜色（将来使用Y轴分割线)
* 轴两端是不需要内间距 boundaryGap 

    xAxis: {type: 'category',data: ["周一", "周二"],axisTick: {show: false // 去除刻度线},axisLabel: {color: '#4c9bfd' // 文本颜色},axisLine: {show: false // 去除轴线},boundaryGap: false  // 去除轴内间距},

•  需求4： y轴的定制

* 刻度去除
* 字体颜色：#4c9bfd
* 分割线颜色：#012f4a 

    yAxis: {type: 'value',axisTick: {show: false  // 去除刻度},axisLabel: {color: '#4c9bfd' // 文字颜色},splitLine: {lineStyle: {color: '#012f4a' // 分割线颜色}}},

•  需求5： 两条线形图定制

* 颜色分别：#00f2f1 #ed3f35
* 把折线修饰为圆滑 series 数据中添加 smooth 为 true 

    color: ['#00f2f1', '#ed3f35'],series: [{name:'预期销售额',data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',// 折线修饰为圆滑smooth: true,},{name:'实际销售额',data: [100, 331, 200, 123, 233, 543, 400],type: 'line',smooth: true,}]

•  需求6： 配置数据

// x轴的文字
xAxis: {type: 'category',data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

// 图标数据series: [{name:'预期销售额',data:  [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],type: 'line',smooth: true},{name:'实际销售额',data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],     type: 'line',smooth: true}}]

全部的html代码