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: "{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>

关于“vue+echart怎么实现圆滑折线图”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue+echart怎么实现圆滑折线图”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。