echarts实现x轴拖动,echarts设置x轴移动
本文主要介绍了Echarts如何在一张图片中切换不同的X轴，通过移动图片的方式把效果展示给大家。示例代码的组合很详细，有需要的朋友可以参考一下。
效果图
想达到下图这么久的效果，继续往下看，直接移图！
方法
因为项目中要显示很多数据图表，所以我选择将每个图表封装成一个vue组件，以供参考。
首先，一个完整的代码。报价时，请注意将数据库中的数据更改到您自己的数据库中，并自己定义您需要的对象，然后将它们添加到您的集合数组中：
模板
差异
div id= main style= height:350 px；宽度：100% /格
/div
/模板
脚本
从“电子海图”导入电子海图
导出默认值{
data() {
返回{
答案：[]，
//dayX: []，//当前日期的x轴
WeekX: []，//当前周的X轴
MonthX: []，///当前月份的X轴
YearX: []，//当前年份的X轴
TimeX:[]，//任意时间段的X轴
DataY: [] //Y轴
}
},
已创建(){
this.fetchData()
},
方法：{
//获取数据库中的数据
fetchData() {
this.axios({
方法：“GET”，
URL: http://localhost:8080/xxxx/xxxx })。然后(函数(响应){
console.log(oxygen===，resp.data)
让=resp.data.length//Get数组的长度
for(设I=0；i numi ) {
//创建一个对象
设arr={}
arr . Timex=resp . data[I]. chk date . slice(5，10)
arr.timeY=resp.data[i]。氧饱和度
虚拟机ans.push(arr)
}
})
},
init(dataX，dataY) {
this . mychart=echarts . init(document . getelementbyid( main ))
let option={
图例：{
图标：“堆栈”，
//数据：[今天，月份，年份]，
数据：[当前周，当前月，当前年，选定时间段]，
SelectedMode: single ，//单项选择
已选择：{
当：真，
当月：假，
年份：假，
选定的时间段：假
}
},
工具提示：{
触发器：“轴”，
axisPointer: {
类型：“交叉”
},
//自定义显示标签
格式化程序：函数(参数){
返回参数[0]。name br血氧： params[0]。数据“%”
}
},
//工具栏
工具箱：{
功能：{
SaveAsImage: {} //可以截图折线图保存。
}
},
网格：{
Left: 10，//组件距容器左侧的距离
右：10，
top: 30，
底部：20，
containLabel: true
},
DataZoom: [//用鼠标控制折线图的放大和缩小。
{
秀：真的，
类型：“内部”，
filterMode:“无”，
xAxisIndex: [0]
},
{
秀：真的，
类型：“内部”，
filterMode:“无”，
yAxisIndex: [0]
}
],
xAxis: {
类型：“类别”，
miniInterval: 3，
boundaryGap:假，
轴棒：{
显示：假
},
分割线：{
//X轴分隔符线条样式
秀：真的，
线型：{
颜色：[#f3f0f0]，
宽度：1，
类型：“实心”
}
},
数据：dataX
},
亚西斯：[
{
名称：血氧趋势图，
类型：“值”，
分割线：{
//Y轴分隔线线条样式
秀：真的，
线型：{
颜色：[#f3f0f0]，
宽度：1，
类型：“实心”
}
}
}
],
系列：数据
}
这个。我的图表。on( legendselectchanged ，obj={
var options=this。我的图表。获取选项()
//这里是选择切换什么样的x轴，那么他会进行对Y值的切换
if (obj.name==当周){
options.xAxis[0].data=this.weekX
}else if (obj.name==当月){
options.xAxis[0].data=this.monthX
}else if (obj.name==当年){
options.xAxis[0].data=this.yearX
}else if (obj.name==所选时间段){
options.xAxis[0].data=this.timeX
}
this.myChart.setOption(选项，真)
})
//使用刚指定的配置项和数据显示图表。
this.myChart.setOption(选项)
},
已安装(){
setTimeout(()={
这个. nextTick(()={
这个。monthx=(这个。RES . map(item=item。monthx).过滤器（布尔值)//过滤掉未定义、南、空、空串
这个。weekx=(这个。RES . map(item=item。weekx)).过滤器（布尔值)//过滤掉未定义、南、空、空串
这个。yearx=(这个。RES . map(item=item。yearx)).过滤器（布尔值)//过滤掉未定义、南、空、空串
这个。Timex=(这个。ans。map(item=item。天美时).过滤器（布尔值)//过滤掉未定义、南、空、空串
//对数据进行赋值，如果这里想一个X轴对应多个Y值那么可以在加一个{}
this.dataY.push({
名称： 当月，
类型：行,//直线悬浮物
项目样式：{
正常：{
颜色： #2E2E2E ，
线型：{
颜色： #2E2E2E ，
宽度：2
}
}
},
数据：this.res.map(item=item.monthY)
})
this.dataY.push({ //这边就可以自定义一个折线显示的方式和颜色
名称： 当周，
类型："行",
项目样式：{
正常：{
颜色： #FF0000 ，
线型：{
颜色： #FF0000 ，
宽度：2
}
}
},
数据：this.res.map(item=item.weekY)
})
this.dataY.push({ //这边就可以自定义一个折线显示的方式和颜色
名称： 当年, //这个必须和伦根那边的保持一致才行
类型："行",
项目样式：{
正常：{
颜色： #0404B4 ，
线型：{
颜色： #0404B4 ，
宽度：2
}
}
},
数据：this.res.map(item=item.yearY)
})
this.dataY.push({ //这边就可以自定义一个折线显示的方式和颜色
名称： 所选时间段，
类型："行",
项目样式：{
正常：{
颜色： #DF01D7 ，
线型：{
颜色： #DF01D7 ，
宽度：2
}
}
},
数据：this.ans.map(item=item.timeY)
})
this.init(this.weekX，this.dataY) //初始化的数据显示
窗户。调整大小时=this。我的图表。调整大小//窗口大小图标自适应
})
}, 1000)
}
}
/脚本
结束，完工
到此这篇关于展示如何实现一张图现切换不同的X轴的文章就介绍到这了，更多相关展示实现一张图现切换不同的X轴内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。