vue+echart怎么實現圓滑折線圖

這篇文章主要介紹了vue+echart怎么實現圓滑折線圖的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇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: " : {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>

關于“vue+echart怎么實現圓滑折線圖”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue+echart怎么實現圓滑折線圖”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。