echarts折线图

案例

  zheEchart () {
      this.myChart = echarts.init(this.$refs.zheDom)

      const option = {
        xAxis: {
          type: 'category',
          boundaryGap: false, // 紧挨边缘
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          // 轴刻度
          axisLabel: {
            show: true,
            textStyle: {
              color: '#75bcff'
            }
          },
          // 轴线
          axisLine: {
            lineStyle: {
              color: '#5b7b80'
            }
          },
          splitLine: {
            // 显示垂直网格线
            show: true,
            lineStyle: {
              color: '#75bcff'
            }
          }
        },
        yAxis: {
          type: 'value',
          // 轴刻度
          axisLabel: {
            show: true,
            textStyle: {
              color: '#75bcff'
            }
          },
          // 轴线
          axisLine: {
            lineStyle: {
              color: '#5b7b80'
            }
          },
          // 显示垂直网格线
          splitLine: {
            show: false
          }
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {
              // 阴影面积
              color: '#135877'
            },
            // 数据连线的线设置
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#58b0f0'
                }
              }
            }
          }
        ]
      }

      this.myChart.setOption(option)
    }

==================

说明

前提说明：xAxis表示x轴，yAxis表示y轴，series表示数据区域

以官网案例中的基础面积图来示例：Examples - Apache ECharts

案例中的折线图已经很完美了，但是在实际中根据不同的需求要对此作出调整，比如：

（一）x轴方面的

 紧挨边缘 boundaryGap

轴刻度值：通过axisLabel来控制

axisLabel: {//坐标轴的刻度值
    textStyle: {
       color: 'red',//坐标值得具体的颜色
       fontSize: 10,
    }
}

x轴轴线：通过axisLine来控制

axisLine: {
        show: true,    // 是否显示坐标轴轴线
        lineStyle: {
            color: 'pink',    // 坐标轴线的颜色
            width: '1',    // 坐标轴线线宽
            type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点                                        // 状类型）
        },
    },

刻度颜色和形状：通过axisTick控制

axisTick: {//坐标轴刻度
        inside: true,//刻度标签朝内
        length: 1,//刻度标签长度
        lineStyle: {
            color: 'green',//刻度标签的颜色
            width: 3,//刻度标签的宽
            cap: 'round',//刻度标签的形状：round圆形，具体参考官网给的形状
        }
    },

x轴轴刻度线：通过splitLine来控制

splitLine: {//坐标轴刻度线
        show: true,
        lineStyle: {
            color: '#000',    // 坐标轴线线的颜色
            width: '0.2',    // 坐标轴线线宽
            type: 'slide',
        }
    },

（二）y轴方面的：其实和x轴一样，区别在于需将配置写在yAxis里面，方可生效

1、y轴自定义轴刻度段，需要做以下配置

  max: 2000,    //设置最大值
  min: 0,  //最小值
  splitNumber: 4,//分割几段

（三）数据连线的线

 3.1 series.lineStyle.type

说明：线条类型。

默认值：'solid'。

参数类型：string

 series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20],
        itemStyle:{
            normal:{
                lineStyle:{
                    width:2,
                    type:'dotted'  //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
                }
            }
        }, 
    }]

 

 最终效果图（dotted点型虚线）：

最终效果图（dashed线型虚线）： 

 

 

3.2曲线圆滑度：

 smooth: true,//连线的圆滑

 3.3线的粗细和颜色

itemStyle: {
  normal: {
     lineStyle: {//折线图连线的设置
     color: '#47B5FF',
     width: 1//设置线条粗细
     }
  }
},

（四）阴影面积

       通过areaStyle来控制，不添加任何内容，有自己默认的颜色，需要修改阴影面积颜色，通过color来修改

 

 

color: {
   x: 0,
   y: 0,
   x2: 1,
   y2: 0,
   colorStops: [{
      offset: 0, color: '#FFFFFF' // 0% 处的颜色
   },
   {
      offset: 1, color: '#47B5FF' // 100% 处的颜色
   }],
}

（五）最高点显示标签和圆点【难点】

 symbol：控制数据是否展示圆点

 label：控制是否展示提示文本

 formatter：标签内容格式器，详细用法参考文档

思路：

     1、将数据抽离出去，每个添加一个symbol——none:无；circle：圆

     2、对抽离出去的数据进行数据筛选，选出最大值索引

     3、选出最大值给其添加样式并返回

var temp = [
    { value: 820, symbol: '' },
    { value: 932, symbol: '' },
    { value: 901, symbol: '' },
    { value: 934, symbol: '' },
    { value: 1290, symbol: '' },
    { value: 1330, symbol: '' },
    { value: 1320, symbol: '' }]
series中：

data: temp,//引用抽离的数据
label: {
   normal: {
     show: true,
     position: [10, -5],
     formatter: function (params) {
        let maxIndex = 0;
        for (let i in temp) {//获取最大值的索引
          maxIndex = temp[i].value > temp[maxIndex].value ? i : maxIndex
        }
        if (params.dataIndex == maxIndex) {//找到数组中最大的数，给其添加圆点和样式
          temp[params.dataIndex].symbol = "circle"
          temp[params.dataIndex].itemStyle = {
             normal: {
               color: '#60AFFF',
               borderColor: '#60AFFF',
             }
           }
           return `{resStyle|${params.data.value}}`
 
        } else {
          temp[params.dataIndex].symbol = "none"
          return ""
        }
      },
      rich: {//提示文本样式
        resStyle: {
          backgroundColor: '#47B5FF',
          color: "#fff",
          fontSize: 10,
          width: 22,
          height: 15,
          lineHeight: 15,
          boderWidth: 1,
          fontFamily: 'D-DIN',
          fontStyle: 'normal',
          fontWeight: 'normal',
          align: "center",
        }
       }
   }
 
},