Echarts 折線圖

示例圖：

————————————————————————————————————————————

<template>
  <div id="main" style="width: 100%;height: 220px"></div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    name: "securit",
    data() {
      return {
        lineData:[820, 932, 901, 934, 1290, 1330, 1620],
        lineBottom: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      }
    },
    methods: {
      lineChartDisplay() {
        let myChart = echarts.init(document.getElementById('main'));
        let option = {
          tooltip: {
            trigger: 'axis',
            // axisPointer: {
            //   type: 'cross',
            //   label: {
            //     backgroundColor: 'red'
            //   }
            // }
          },
          xAxis: {
          	name: '月數',
            type: 'category',
            boundaryGap: false,
            data: this.lineBottom  // 折線圖底部資料顯示
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data:this.lineData, // 折線圖資料顯示
            type: 'line',
            // label: {
            //   normal: {
            //     show: true,
            //     position: 'top'
            //   }
            // },
            areaStyle: {}
          }]
        };
        option && myChart.setOption(option);
      }
    },
    mounted() {
     this.lineChartDisplay()
    }
  }
</script>

<style scoped>

</style>