vue使用echarts折线图,echarts折线图平滑
本文主要详细介绍了用vue echart实现平滑折线图。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue echart实现平滑折线图的具体代码，供大家参考。具体内容如下
效果图：
安装依赖关系：
npm安装电子图表-保存
从“echarts”导入e charts；
完整代码：
模板
差异
div id=demo/div
/div
/模板
脚本
导出默认值{
data() {
返回{
选项：{
标题：{
Text:趋势图，//标题设置为保险状态
//潜台词：‘纯属虚构’，
左：“中心”，//标题位置
},
工具提示：{
//鼠标悬停会覆盖提示框
触发器：轴，//坐标线提示
//trigger: item ，//根据item提示信息
//格式化程序：“{b}: {c}”，//提示内容
axisPointer: {
类型：十字，
标签:{
background color:“# 6a 7985”，
},
},
},
图例：{
底部：“5%”，
数据：[第一项，第二项]，
},
xAxis: {
轴棒：{
Show: false，//不显示坐标轴刻度线
},
轴线：{
Show: false，//不显示坐标轴
},
类型：“类别”，
数据：[周一，周二，周三，周四， Fri ，周六，周日]，
BoundyGap: false，//与X轴没有间隙
},
亚西斯：{
轴棒：{
Show: false，//不显示坐标轴刻度线
},
轴线：{
Show: false，//不显示坐标轴
},
类型：“值”，
//splitLine: {
//show: false，//不显示网格线。
//},
},
网格：{
左：“5%”，
对：“5%”，
底部：“20%”，
containLabel: true，
},
系列：[
{
Name:第一项，//设置名称，与数据没有关联。
Hoanimation: true，//鼠标悬停效果，默认为true
数据：[
{值：335，名称：“设备1”}，
{值：335，名称：“设备1”}，
{值：310，名称：“设备2”}，
{值：234，名称：“设备3”}，
{值：135，名称：“设备4”}，
{值：1548，名称：“设备5”}，
{值：135，名称：“设备4”}，
{值：1548，名称：“设备5”}，
],
类型：“行”，
//该区域有背景
区域样式：{
//color:“# 1 ada 6f”，
},
顺利：真的，
},
{
名称：第二项，
数据：[220，222，333，222，444，222，444]，
类型：“行”，
areaStyle: {}，
顺利：真的，
},
],
},
};
},
已安装(){
//此方法不能放在已创建的生命周期中，因为dom还没有初始化。
this . echarts()；
},
方法：{
echarts() {
//介绍ECharts主模块
var e charts=require( e charts/lib/e charts )；
//引入直方图(这个例子可以去掉)
要求( e charts/lib/chart/bar )；
//引入提示框和标题组件
require( e charts/lib/component/tooltip )；
require( e charts/lib/component/title )；
//根据准备好的dom初始化echarts实例
var mychart 1=echarts . init(document . getelementbyid( demo )；
//绘制饼图
my chart 1 . setoption(this . option)；
//绘制折线图
},
},
};
/脚本
样式lang=scss
#演示{
宽度：500px
高度：300px
}
/风格
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。