折线图样式Demo01

<template>
  <div>
    <div class="line-picture" style="width: 100%">
      <div id="taskRunStatusLine" style="width: 100%;height: 400px;border: 1px solid green"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TaskRunStatusLine',
    description: '任务运行情况折线图',
    mixins: [],
    components: {},
    // props: {
    //   lineObj: Object
    // },
    data() {
      return {
        yData: [],
        xData: []
      }
    },
    //监听，解决第一次加载页面时无法渲染第一个echart图,和切换图例时，点击搜索按钮无法加载数据问题
    // watch: {
    //   lineObj() {
    //     this.initFailureBarVertical()
    //   }
    // },
    mounted() {
      this.initFailureBarVertical()
    },
    methods: {
      initFailureBarVertical() {
        // console.log('获取父组件的数据<----------', this.lineObj)
        // this.yData = this.lineObj.yData
        // this.xData = this.lineObj.xData
        // this.yData = [55, 35, 62, 55, 97, 64, 44, 66, 78, 82, 33, 77]
        // this.xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']


        const that = this
        let myChart = that.$echarts.init(document.getElementById('taskRunStatusLine'))

        let option = {
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['2018', '2019']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,//坐标轴两边留白
            data: ['12201', '12202', '12203', '12204', '12301', '12302', '12303', '12304', '12401', '12402', '12403', '12404'],
            axisLabel: { //坐标轴刻度标签的相关设置。
              interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
              //	margin:15,
              textStyle: {
                color: '#1B253A',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12
              },
              formatter: function(params) {
                var newParamsName = ''
                var paramsNameNumber = params.length
                var provideNumber = 4  //一行显示几个字
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ''
                    var start = p * provideNumber
                    var end = start + provideNumber
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr
                  }

                } else {
                  newParamsName = params
                }
                return newParamsName
              }
              //rotate:50,
            },
            axisTick: {//坐标轴刻度相关设置。
              show: false
            },
            axisLine: {//坐标轴轴线相关设置
              lineStyle: {
                color: '#E5E9ED'
                // opacity:0.2
              }
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线。
              show: true,
              lineStyle: {
                color: '#E5E9ED'
                // 	opacity:0.1
              }
            }
          },
          yAxis: [
            {
              type: 'value',
              splitNumber: 5,
              axisLabel: {
                textStyle: {
                  color: '#a8aab0',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12
                }
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#E5E9ED'
                  // 	opacity:0.1
                }
              }

            }
          ],
          series: [
            {
              name: '2018',
              type: 'line',
              itemStyle: {
                normal: {
                  color: '#3A84FF',
                  lineStyle: {
                    color: '#3A84FF',
                    width: 1
                  },
                  areaStyle: {
                    color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: 'rgba(58,132,255,0)'
                    }, {
                      offset: 1,
                      color: 'rgba(58,132,255,0.35)'
                    }]),
                  }
                }
              },
              data: [1, 2, 3, 3, 5, 6, 5, 3, 6, 5, 5, 4]
            },
            {
              name: '2019',
              type: 'line',
              itemStyle: {
                normal: {
                  color: 'rgba(255,80,124,1)',
                  lineStyle: {
                    color: 'rgba(255,80,124,1)',
                    width: 1
                  },
                  areaStyle: {
                    color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: 'rgba(255,80,124,0)'
                    }, {
                      offset: 1,
                      color: 'rgba(255,80,124,0.35)'
                    }])
                  }
                }
              },
              data: [9, 5, 7, 8, 6, 7, 8, 7, 7, 6, 8, 6]
            }
          ]
        }
        that.myChart = myChart
        myChart.setOption(option)
      }
    }

  }
</script>
<style lang="scss" scoped>

  .line-picture {
    padding: 0 10px;
  }

</style>