vue+echart怎么实现圆滑折线图

vue+echart怎么实现圆滑折线图

这篇文章主要介绍了vue+echart怎么实现圆滑折线图的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue+echart怎么实现圆滑折线图文章都会有所收获，下面我们一起来看看吧。

效果图：

安装依赖：

npminstallecharts--saveimportechartsfrom"echarts";

完整代码：

<template><div><divid="demo"></div></div></template><script>exportdefault{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,//鼠标悬停效果，默认是truedata:[{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主模块varecharts=require("echarts/lib/echarts");//引入柱状图(这个例子可以去掉)require("echarts/lib/chart/bar");//引入提示框和标题组件require("echarts/lib/component/tooltip");require("echarts/lib/component/title");//基于准备好的dom，初始化echarts实例varmyChart1=echarts.init(document.getElementById("demo"));//绘制饼图myChart1.setOption(this.option);//绘制折线图},},};</script><stylelang="scss">#demo{width:500px;height:300px;}</style>

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