echarts vue 动态数据,vue解决多个echarts切换
本文主要介绍Vue联动电子海图实现大屏幕数据的显示实例。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
:
目录
1.安装echarts.js2创建新的vue接口3。介绍ECharts4。创建Vue方法和图表信息5。效果样式6。通过官网找到自己喜欢的款式7。重复使用部件1。组件复用的定义2。在当前页面的数据传输子组件中。
1.安装echarts.js
npm安装电子图表-保存
2.新建vue界面
模板
！-定义echarts需要控制的dom元素-
div :style={height:height，width:width} /
/模板
3.引入 ECharts
脚本
从“电子海图”导入电子海图
要求( e图表/主题/暗)//e图表主题
//.下面是配置vue和图标风格的方法，我打算拿出来单独说明。
/脚本
4.创建Vue方法和图表信息
创建导出默认模块
导出默认值{
//方法和变量
}
在上述基础上添加数据()。
data() {
返回{
图表：空，//echarts实例
图表数据： ，//图表数据
Height: 250px ，//设置默认高度
宽度： 50% ，//设置默认宽度
}
},
手表监控
观察：{//监视数据变化
图表数据：{
深：真，//深听
处理器(val) {
This.setOptions(val)//重新绘制图表数据
}
}
},
Mounted创建echarts实例
已安装(){
DOM元素加载后执行。
这个。$nextTick(()={
//初始化echarts实例
this.initEcharts()
})
},
这些方法包括initEcharts和setOptions
方法：{
initEcharts(){}，
setOptions({expectedData，actualData}){}，
}
initEcharts方法创建一个实例对象。
initEcharts() {
//定义一个图表数据
this.chartData={
预期数据：[190，100，10，9，170，110，160]，
实际数据：[120，200，150，80，70，110，130]
}
//参数一：这个。$el指向当前组件模板中的根标签(仅在已安装的生命周期中有效)
//参数2: echarts主题颜色
this.chart=echarts.init(this。$el，“黑暗”)
this . set选项(this.chartData)
},
至于图标样式，需要注意的是需要引入echarts主题，否则无效。可以看看官方的主题风格点击跳转，也可以根据自己的喜好自定义主题，下载到本地引入项目。
SetOptions方法呈现图表数据。
setOptions({expectedData，actualData}) {
Var={//setOption方法可以接受一个对象作为参数。更多配置参数请参考官网。
标题：{//标题组件
文本：“电子海图简介示例”
},
工具提示：{//提示框组件
触发器：“轴”//轴触发器主要用于使用分类轴以及“项目”和“无”的图表，如条形图和折线图
},
图例：{//图例组件
数据：[预期，实际]
},
Grid: {//在直角坐标系中绘制网格
左：“3%”，
对：“4%”，
底部：“3%”，
containLabel: true
},
工具箱：{//工具栏。内置五个工具：导出图片、数据视图、动态类型切换、数据区缩放和重置。
功能：{
SaveImage: {}，//另存为图片。
DataView: {}，//数据视图工具，可以显示当前图表使用的数据，编辑后可以动态更新。
}
},
XIS:{//直角坐标系网格中的X轴
类型：“类别”，
boundaryGap:假，
数据：[星期一，星期二，星期三，星期四，星期五，星期六，星期日]
},
YAxis: {//直角坐标系网格中的Y轴
类型：“值”
},
系列：[//图表类型
{
名称：“应为”，
类型：“行”，
堆栈：“总金额”，
Data: expectedData，//对象中已解析的参数
},
{
名称：实际，
类型：“行”，
堆栈：“总金额”，
Data: actualData，//对象中解析的参数
}
]
}
this.chart.setOption(选项)
}
更多配置项目点击查看官网。
您可能对setOptions方法中的{expectedData，actualData}有疑问，所以您计划单独解释它。
在initEcharts()方法中，我们调用setOptions方法，传递一个对象信息，{}中的元素就是解析对象中对应的元素信息。接下来我用控制台展示一下。
这个要理解。
5.效果样式
工具提示参数类型设置为轴，所以移动到坐标轴触发，主要在直方图，折线图等。
6.通过官网查找自己喜欢的样式
我们也可以通过官网查看我们需要的样本，粘贴到项目中点击直接。
找到你需要的，点击进入复制代码。
把选项换成官网的代码就行了。
可以看到效果出来了，我们也可以替换里面显示的数据。
这不是很简单，但有时我们需要在其他界面中使用类似的风格。我们应该使用这个模板，然后替换其中的数据进行显示，而不是创建一个新页面并复制代码。你明白我的意思吗？
7.组件重复使用
现在我需要在主页面上使用之前的模板，操作非常简单。按照步骤操作。
1.组件重复使用定义
1.在要引用的接口中导入模块。
脚本
//导入模板
从“”导入TestTemplate。/仪表板/测试模板
脚本
2.向组件添加模板
导出默认值{
组件：{
//向组件添加模板
测试模板
},
data() {
返回{
}
},
}
3.添加组件标签
测试模板/测试模板
您可能想知道为什么引用的组件标签被称为this，因为我们导入的组件的名称是TestTemplate，那么为什么标签中使用的kebab-case(短横线名称)被命名为this而不是hump name？因为HTML不识别大小写的特点，所以需要使用短横线名称，首字母小写。如果遇到大写字母，需要加短横线，改成小写，比如TestTemplate改成短横线test-template。
至此可以看出，首页已经可以显示我们之前写的组件了。简单来说，有三步！
2.当前页面数据传递子组件中
但是还没有达到我们的要求。不同的页面应该显示不同的数据，所以我们需要将当前页面的数据传递给组件。简单来说就是把父代的数据转移给子代。
父接口转换
1.在父接口data()中添加要传输的数据对象
2.将创建的数据添加到标签中。
测试模板：图表数据= LineChartData /测试模板
子接口转换(可重用组件)
1.子接口定义了接收父组件传递的数据的props。
//接收父组件传递的参数
道具：{
ChartData: {//接收父组件传递的参数名
Type: Object，//父组件传递的数据类型
必选：true //表示必须通过
}
},
2.您需要注释原始页面定义的数据，因为我们可以直接使用父页面传递的chartData数据。
可以看出数据已经被父页面使用了。
我们还可以在同一页面上添加多个相同的组件。
通过不同的数据展现不同的数据信息。
如图所示
以上是Vue联动Echarts大屏展示数据的详细内容。更多关于Vue Echarts大屏数据的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。