vue+echart實現圓滑折線圖

npm install echarts --save    
import echarts from "echarts";

<template>
  <div>
    <div id="demo"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      option: {
        title: {
          text: "走勢圖", //標題設定‘參保情況'
          // subtext: "純屬虛構",
          left: "center", //標題位置
        },
        tooltip: {
          //滑鼠hover覆蓋提示框
          trigger: "axis", //座標線提示
          // trigger: "item", //根據item提示資訊
          // formatter: "{b} : {c} ", //提示內容
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          bottom: "5%",
          data: ["第一項", "第二項"],
        },
        xAxis: {
          axisTick: {
            show: false, //不顯示座標軸刻度線
          },
          axisLine: {
            show: false, //不顯示座標軸線
          },
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          boundaryGap: false, //與x軸無縫隙
        },
        yAxis: {
          axisTick: {
            show: false, //不顯示座標軸刻度線
          },
          axisLine: {
            show: false, //不顯示座標軸線
          },
          type: "value",
          // splitLine: {
          //   show: false, //不顯示格線
          // },
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "20%",
          containLabel: true,
        },
        series: [
          {
            name: "第一項", //設定名稱，跟資料無相關性
            hoverAnimation: true, //滑鼠懸停效果，預設是true
            data: [
              { value: 335, name: "裝置1" },
              { value: 335, name: "裝置1" },
              { value: 310, name: "裝置2" },
              { value: 234, name: "裝置3" },
              { value: 135, name: "裝置4" },
              { value: 1548, name: "裝置5" },
              { value: 135, name: "裝置4" },
              { value: 1548, name: "裝置5" },
            ],
            type: "line",
            // 區域有背景
            areaStyle: {
             //color: "#1ADA6F",
             },
            smooth: true,
          },
          {
            name: "第二項",
            data: [220, 222, 333, 222, 444, 222, 444],
            type: "line",
            areaStyle: {},
            smooth: true,
          },
        ],
      },
    };
  },
  mounted() {
    //   這個方法不能放在greated生命週期,因為那時候dom還沒初始化完成
    this.echarts();
  },
  methods: {
    echarts() {
      // 引入 ECharts 主模組
      var echarts = require("echarts/lib/echarts");
      // 引入柱狀圖(這個例子可以去掉)
      require("echarts/lib/chart/bar");
      // 引入提示框和標題元件
      require("echarts/lib/component/tooltip");
      require("echarts/lib/component/title");
      // 基於準備好的dom，初始化echarts範例
      var myChart1 = echarts.init(document.getElementById("demo"));
      // 繪製餅圖
      myChart1.setOption(this.option);
      // 繪製折線圖
    },
  },
};
</script>

<style lang="scss">
#demo {
  width: 500px;
  height: 300px;
}
</style>