vue echarts 动态数据,vue调用echarts
在我最近的项目中总结一下使用echarts动态获取界面数据和画图的方法。下面文章主要介绍在vue中使用echarts实现动态数据绑定，获取后端接口数据的相关信息。有需要的朋友可以参考一下。
目录
前言1。直方图2。折线图3。饼图4。地图摘要
前言
echarts之前的几篇文章实现了静态直方图，折线图，饼状图，地图。在项目中，我们肯定需要获取后端接口，并在图表上显示后端返回的数据，所以这次我们将记录如何实现echarts的动态数据绑定。
简单来说就是从界面获取的数据，需要在chart方法中重新定义，然后使用setOption方法获取即可。
1.柱状图
先看接口传来的数据，传来的是一个数组。第一年是2021年，数量是1，第二年是2022年，数量是3。
因为直方图中有两个数据，横坐标和纵坐标，所以我们制作一个传输数据的数组，横坐标和纵坐标。
首先在数据中定义
LwData: {}，//论文数据
LwndArr: []，///年度数组
LwtsArr: []，///论文发表的天数数组
然后获取接口数据，处理接口数据并放入两个数组。以年为横坐标，将数据中的年周期放入年数组中。天数是纵坐标，数据中的天数循环放入天数数组中。
this.axios.post(this.counturl，{
类型：“纸张”
}).然后(res={
if (res.result===00000) {
this.lwData=res.data
for(设I=0；ithis . lwdata . length；i ) {
this.lwndArr[i]=this.lwData[i]。钕
}
for(设I=0；ithis . lwdata . length；i ) {
this.lwtsArr[i]=this.lwData[i]。数数
}
lwndArr=this.lwndArr
lwtsArr=this.lwtsArr
}否则{
这个。$ message . error(RES . data . info)
}
})
echarts与其他接口数据采集的区别在于，echarts需要重新定义数组，然后将接口采集的数据放入其中。你不能直接引用这里面的数据。
在获取echarts图表的方法中，定义横坐标和纵坐标两个数据，然后用setOption方法引用定义好的数据，就可以显示界面中的数据了。(不再需要const选项)
//论文发表天数直方图
getLwBar () {
设lwndArr=[]
设lwtsArr=[]
constlwbar=echarts . init(document . getelementbyid( lwbar )//图标初始化
this.axios.post(this.counturl，{
类型：“纸张”
}).然后(res={
if (res.result===00000) {
this.lwData=res.data
for(设I=0；ithis . lwdata . length；i ) {
this.lwndArr[i]=this.lwData[i]。钕
}
for(设I=0；ithis . lwdata . length；i ) {
this.lwtsArr[i]=this.lwData[i]。数数
}
lwndArr=this.lwndArr
lwtsArr=this.lwtsArr
lwBar.setOption({
标题：{
文本：“论文发表天数直方图”
},
工具提示：{
},
图例：{
数据：[论文发表的天数]
},
xAxis:{
名称：年份，
数据：lwndArr
},
亚西斯：{
名称：“纸质出版天数”，
类型：“值”
},
系列：[
{
名称：“纸质出版天数”，
类型：条形图，//类型是直方图。
数据：lwtsArr，
BarWidth: 20% ，//列宽每列的宽度是类别宽度的20%。
//列的样式
项目样式：{
颜色： #5574c2
}
}
]
})
}否则{
这个。$ message . error(RES . data . info)
}
})
//根据屏幕大小调整图表
window . addevent listener( resize ，()={
lwBar.resize()
})
},
效果：
2.折线图
折线图和柱状图一样，需要把横坐标和纵坐标分开。
首先在数据中定义
zzData: {}，//著作数据
zzndArr: []，//著作年度数组
zzslArr: []，//著作出版数量数组
接着获取接口数据，setOption
//著作折线图
getZzLine () {
设zzndArr=[]
让zzslArr=[]
const ZZ line=echarts。init(文档。getelementbyid( ZZ line )//图标初始化
this.axios.post(this.counturl，{
类型："书"
}).然后(res={
if (res.result===00000) {
this.zzData=res.data
对于(设I=0；这是。zzdata。长度；i ) {
this.zzndArr[i]=this.zzData[i].钕
}
对于(设I=0；这是。zzdata。长度；i ) {
this.zzslArr[i]=this.zzData[i].数数
}
zzndArr=this.zzndArr
zzslArr=this.zzslArr
zzLine.setOption({
标题：{
文本： 著作出版数量折线图
},
工具提示：{
触发器："轴"//轴项目无三个值
},
图例：{
数据：[著作]
},
xAxis:{
名称： 年份，
数据：zzndArr
},
亚西斯：{
名称：数量，
类型："值"
},
系列：[
{
名称： 著作出版数量，
类型：行,//类型为z折线图
数据：zzslArr，
类型："行",
堆栈：“x”，
项目样式：{
颜色： #ef6567 ，
宽度：4
}
}
]
})
}否则{
这个$消息。错误(参考数据。信息)
}
})
//随着屏幕大小调节图表
窗户。addevent侦听器( resize ，()={
zzLine.resize()
})
},
效果：
3.饼状图
饼状图和柱状、折线图的区别在于，饼状图只需要获取一个数据，数据格式如下：
数据：[
{
价值：335,
名称： 初级会计师
},
{
价值：200,
名称： 中级会计师
},
]
所以我们只需要后端传过来的数据也是这样的就可以了，要注意在图表方法中再定义一次。
接口数据：
除此之外，饼状图还有一个表头数据很重要，因为它有很多个表头数据，所以不能和柱状、折线
一样直接定义，也需要从接口获取一下，所以我们先在数据中定义这两个数据。
scaleData: []，//饼状图数据
scaleLegend: []，//饼状图标注
接着获取接口，把对应的数据获取到，使用setOption
//毕业人数
getPieEcharts () {
设scaleData=[]
设scaleLegend=[]
const kjjgPie=echarts。init(文档。getelementbyid( kjjgPie )//图标初始化
this.axios.post(this.scaleurl，{
类型：this.selectedScale
}).然后(res={
if (res.result===00000) {
this.scaleData=res.data
scaleData=this.scaleData
对于(设I=0；IRES。数据。长度；i ) {
这个。比例图例[I]=分辨率数据[I].名字
}
scaleLegend=this.scaleLegend
kjjgPie.setOption({
图例：{
数据：比例尺图例
},
工具提示：{},
颜色：[#5470c6 ， #91cc75 ， #fac858 ， #ee6666 ， #73c0de ， #3ba272 ， #fc8452 ， #9a60b4 ， #ea7ccc]，
系列：[
{
半径："50%",
//名称： 毕业人数，
类型： pie ，//类型为柱状图
标签:{
//电子海图饼图内部显示百分比设置
秀：真的，
位置："外部",//外部外部显示里面的内部显示
格式化程序：" {b}({d}%)"，
},
数据：刻度数据
}
]
})
}否则{
这个$消息。错误(参考数据。信息)
}
})
//随着屏幕大小调节图表
窗户。addevent侦听器( resize ，()={
kjjgPie.resize()
})
},
效果：
这里右上角有一个选择框，可以根据选择的数据，显示对应的饼状图。
在这里可以简单提一下，首先是挑选选择框：
select v-model= selected scale style= display:inline-block；宽度：200像素浮动：对；右边距：10px@on-change=scaleChange
选项选择列表中的v-for=项。 scale :value= item。“code”:key=“item。代码“placeholder=”请选择
{{ item.name }}
/选项
/选择
在数据中定义默认的数据：
selectedScale: zyzg ，//被选择的饼状图类别
用挑选选择框的变化中事件，当选项改变时，将改变的价值传给定义的选定比例，接口会根据选定比例的内容，返回不一样的数据。
缩放变化(值){
this.selectedScale=value
this.getPieEcharts()
},
4.地图
地图的具体内容可以看之前两篇地图的文章。需求是鼠标放在某一个地区，要显示对应的内容，新增的需求是要提供多个散点，还有个全省的数据。
地图和饼状图一样，可以要求后端按照规定的格式传过来，会方便很多，散点图的数据就获取对应的几条就可以了。
传过来的接口数据：
数据中定义：
profileData: []，//地图数据
sdData: []，//散点数据
qsljnumber: ，//全省领军人数
qslwnumber: ，//全省论文数量
qszznumber: ，//全省著作数量
接口数据：
initCharts () {
const charts=echarts.init(this .$refs[charts])
让airData=[]
let currentSdData=[]
这个。axios。贴(这个。个人资料URL，{
}).然后(res={
if (res.result===00000) {
this.profileData=res.data
airData=this.profileData
this.sdData[0]=res.data[0]
this.sdData[1]=res.data[14]
this.sdData[2]=res.data[15]
this.sdData[3]=res.data[16]
currentSdData=this.sdData
这个。qsljnumber=RES . data[17]。文字。ljnumber
这个。qslwnumber=RES . data[17]。文字。lw数
这个。qszz数=RES . data[17]。文字。ZZ数
charts.setOption({
系列：[
{
类型："地图",
数据：airData
},
{
类型： effectScatter ，
数据：当前数据
}
]
})
}否则{
这个$消息。错误(参考数据。信息)
}
})
常量选项={
//背景颜色
背景颜色：白色，
//提示浮窗样式
工具提示：{
秀：真的，
触发器："项目",
alwayshowcontent:false，
背景颜色：“# 0c 121 c”，
borderColor: rgba(0，0，0，0.16)；,
hideDelay: 100，
triggerOn:"鼠标移动",
可输入：真，
textStyle: {
颜色： #哒哒哒，
fontSize: 12 ，
宽度：20,
身高：30,
溢出："中断"
},
格式化程序（参数){
console.log(参数)
返回地区：${params.data.name}/br领军人数：$ { params。数据。文字。LJ编号}/br论文数量：$ { params。数据。文字。lw编号}/br著作数量：${params.data.text.zznumber} `
},
显示延迟：100
},
//地图配置
地理位置：{
地图：江苏，
//地图文字
标签:{
//通常状态下的样式
正常：{
//默认是否显示地区名称
秀：真的，
textStyle: {
颜色：黑色
}
},
//鼠标放上去的样式
重点：{
textStyle: {
颜色：黑色
}
}
},
//地图区域的样式设置
项目样式：{
正常：{
//地图边界颜色
边框颜色： #fff ，
//地图区域背景颜色
areaColor: #AAD5FF ，
},
//鼠标放上去高亮的样式
重点：{
//鼠标放上去地图区域背景颜色
areaColor: #0057da ，
边框宽度：0
}
}
},
系列：[
{
数据：airData，
地理索引：0,
类型："地图"
},
{
类型： effectScatter ，
坐标系统："地理",
效果类型：波纹，
显示效果于：“渲染”，
rippleEffect: {
周期：1,
比例尺：2,
画笔类型："填充"
},
symbolSize: [15，15]，
//这里渲染标志里的内容以及样式
工具提示：{
秀：真的，
格式化程序（值){
返回地区：${value.data.name}/br领军人数：${value.data.text.ljnumber}/br论文数量：${value.data.text.lwnumber}/br著作数量：${value.data.text.zznumber} `
},
颜色： #fff
},
悬停动画：没错，
//标志的样式
项目样式：{
正常：{
颜色： rgba(255，235，59，7),
暗影模糊：10,
阴影颜色： #333
}
},
zlevel: 1，
数据：当前数据
}
],
//视觉映射组件
视觉图：{
最小：1,
max:300，
范围：{
颜色：[#e0ffff ， #006edd]
},
可计算：true //出现滑块
}
}
//地图注册，第一个参数的名字必须和选项。地理地图一致
echarts.registerMap(江苏，中国)
图表。设置选项(选项)
},
效果：
总结
到此这篇关于某视频剪辑软件中使用展示实现动态数据绑定以及获取后端接口数据的文章就介绍到这了，更多相关某视频剪辑软件使用展示动态数据绑定内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。