折线图

<!--折线图-->
<template>
  <div class="chartBox">
    <!--echart图标-->
    <div id="lineChart" ref="lineChart"></div>
  </div>

</template>

<script>
// 引入基本模板
// const echarts = require('echarts');
import * as echarts from 'echarts' // 注意此处echarts高版本中需要使用此方式才可引入
export default {
  name: "scatterDiagram",
  props:{
    //折线是否平滑
    smooth:{
      type:Boolean,
      default:false
    },
    //填充的颜色
    areaColor:{
      type:String,
      default:'transparent'
    }
  },
  data() {
    return {
      lineChart: null,
    }
  },
  mounted() {
    this.initEchart();

  },
  methods: {
    initEchart() {
      // 基于准备好的dom，初始化echarts实例
      this.lineChart = echarts.init(this.$refs.lineChart);

      let option = {
        textStyle:{
          color:'#FFF',
          fontSize:12,
        },
        grid: {
          left:40,
          right:30,
          top:40,
          bottom:25
        },
        title: {
          subtext: "时长/h",
          top: -15,
          left: 0,
          subtextStyle: { // 设置二级标题的样式
            color: "#FFF"
          }
        },
        xAxis: {
          type: 'category',
          data: ['2022.01.02', '2022.01.03', '2022.01.04', '2022.01.05', '2022.01.06', '2022.01.07'],
          nameTextStyle:{
            color:'#FFF',
            fontSize:12
          },
          axisLine:{
            onZero: false,
            lineStyle:{
              color:'rgba(255,255,255,0.2)'
            }
          },
          axisLabel: {
            interval: 0,
            margin: 15
          },

          axisTick:{
            lineStyle:{
              color:'rgba(255,255,255,0.2)'
            }
          },
          // boundaryGap:false
        },
        yAxis: {
          type: 'value',
          splitLine:{
            lineStyle:{
              color:'rgba(255,255,255,0.2)'
            }
          },
        },
        series: [
          {
            data: [321, 624, 738, 922, 500,200],
            smooth: this.smooth,
            label:{
              show:true,
              position: 'top' ,

              distance: 14,
              textStyle:{
                color:'#FFF',
                fontSize:12
              }
            },
            symbolSize: 10, //折线点的大小
            symbol: 'circle', //折线点设置为实心点
            type: 'line',
            areaStyle: {
              color:this.areaColor
            },
            itemStyle: {
              normal: {
                shadowColor: 'rgba(83,206,253,0.2)',
                color:'#F8D501', //折线点的颜色
                borderColor: '#FFF', //拐点边框颜色
                borderWidth: 1, //拐点边框大小
              },
            },
            lineStyle: {
              color:'#53CEFD', //折线的颜色
            },
            emphasis:{
              disabled:false,
              focus:'series',

              itemStyle:{
                shadowColor: 'rgba(248,213,1, 0.5)',
                shadowBlur: 1000
              },
              areaStyle: {
                shadowColor: 'rgba(248,213,1, 0.5)',
                shadowBlur: 1000
              }
            },
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.lineChart.setOption(option);
    }
  }
}
</script>

<style scoped lang="scss">
.chartBox {
  width: 100%;
  box-sizing: border-box;
  padding: 1.6rem 1.6rem 0;
  flex: 1;

  #lineChart {

    height: calc(100% - 16px);

  }
}
</style>