vue+echart实现圆滑折线图
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341