Echarts实现一张图现切换不同的X轴(实例代码)

效果图

如果大家想实现如下图的效果那么久继续往下看吧,直接上动图!

方法

因为项目需要展示的数据图表比较多我选择的是把每一张图表封装成一个vue组件来引用。
先上一个完整的代码,引用时注意在从数据库获取数据是要换成自己的数据库以及要自己定义好你需要的对象加到你设定好的数组中:

<template>
  <div>
    <div id="main" style="height:350px;width:100%"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
 data() {
    return {
      ans:[],
      // dayX: [], // 当天的 X轴
      weekX: [], // 当周的 X轴
      monthX: [], // 当月的 X轴
      yearX: [], // 当年的 X轴
      timeX:[],//任意时间段的X轴
      dataY: [] // Y 轴
    }
  },
 created() {
    this.fetchData()
  },

methods: {
//获取数据库中的数据
    fetchData() {
    this.axios({
          method: 'GET',
          url: 'http://localhost:8080/xxxx/xxxx' }).then(function(resp) {
          console.log("oxygen ===>",resp.data)
          let num = resp.data.length //获取数组的长度
          for (let i = 0; i <num; i++) {
            //创建一个对象
            let arr = {}
            arr.timeX = resp.data[i].chkDate.slice(5, 10)
            arr.timeY = resp.data[i].oxgnSaturation
            vm.ans.push(arr)

          }

        })
     },
       init(dataX, dataY) {
      this.myChart = echarts.init(document.getElementById('main'))

      let option = {
        legend: {
          icon: 'stack',
          // data: ['当天', '当月', '当年'],
          data: ['当周', '当月','当年','所选时间段'],
          selectedMode: 'single', // 单选
          selected: {
            当周: true,
            当月: false,
            当年: false,
            所选时间段: false
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          //自定义显示标签
          formatter:function(params) {
            return params[0].name + '<br>血氧 : '+params[0].data+' %'
          }
        },
        // 工具栏
        toolbox: {
          feature: {
            saveAsImage: {} //可对折线图进行截图保存
          }
        },
        grid: {
          left: 10, //组件距离容器左边的距离
          right: 10,
          top: 30,
          bottom: 20,
          containLabel: true
        },

        dataZoom: [ //通过鼠标控制折线图的放大缩小
          {
            show: true,
            type: 'inside',
            filterMode: 'none',
            xAxisIndex: [0]

          },
          {
            show: true,
            type: 'inside',
            filterMode: 'none',
            yAxisIndex: [0]

          }
        ],
        xAxis: {
          type: 'category',
          miniInterval: 3,
          boundaryGap: false,
          axisTick: {
            show: false
          },
          splitLine: {
            // X 轴分隔线样式
            show: true,
            lineStyle: {
              color: ['#f3f0f0'],
              width: 1,
              type: 'solid'
            }
          },
          data: dataX
        },
        yAxis: [
          {
            name: "血氧趋势图",
            type: 'value',
            splitLine: {
              // Y 轴分隔线样式
              show: true,
              lineStyle: {
                color: ['#f3f0f0'],
                width: 1,
                type: 'solid'
              }
            }
          }
        ],
        series: dataY

      }

  		this.myChart.on('legendselectchanged', obj => {
        var options = this.myChart.getOption()
        //这里是选择切换什么样的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(options, true)
      })

      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option)

  },
    mounted() {

    setTimeout(() => {
      this.$nextTick(() => {

        this.monthX = (this.res.map(item => item.monthX)).filter(Boolean) //过滤掉undefined、NaN、null、空串
        this.weekX = (this.res.map(item => item.weekX)).filter(Boolean) //过滤掉undefined、NaN、null、空串
        this.yearX = (this.res.map(item => item.yearX)).filter(Boolean) //过滤掉undefined、NaN、null、空串
        this.timeX = (this.ans.map(item => item.timeX)).filter(Boolean) //过滤掉undefined、NaN、null、空串

        //对dataY进行赋值,如果这里想一个X轴对应多个Y值那么可以在加一个{}
        this.dataY.push({
          name: '当月',
          type: 'line', // 直线ss
          itemStyle: {
            normal: {
              color: '#2E2E2E',
              lineStyle: {
                color: '#2E2E2E',
                width: 2
              }
            }
          },
          data: this.res.map(item => item.monthY)
        })

        this.dataY.push({ //这边就可以自定义一个折线显示的方式和颜色
          name: '当周',
          type: 'line',
          itemStyle: {
            normal: {
              color: '#FF0000',
              lineStyle: {
                color: '#FF0000',
                width: 2
              }
            }
          },
          data: this.res.map(item => item.weekY)
        })

        this.dataY.push({ //这边就可以自定义一个折线显示的方式和颜色
          name: '当年', //这个必须和lengen 那边的保持一致才行
          type: 'line',
          itemStyle: {
            normal: {
              color: '#0404B4',
              lineStyle: {
                color: '#0404B4',
                width: 2
              }
            }
          },
          data: this.res.map(item => item.yearY)
        })

        this.dataY.push({ //这边就可以自定义一个折线显示的方式和颜色
          name: '所选时间段',
          type: 'line',
          itemStyle: {
            normal: {
              color: '#DF01D7',
              lineStyle: {
                color: '#DF01D7',
                width: 2
              }
            }
          },
          data: this.ans.map(item => item.timeY)
        })

        this.init(this.weekX, this.dataY) //初始化的数据显示
        window.onresize = this.myChart.resize //窗口大小图标自适应
      })
    }, 1000)
  }
}
</script>

结束,完工

到此这篇关于Echarts 如何实现一张图现切换不同的X轴的文章就介绍到这了,更多相关Echarts 实现一张图现切换不同的X轴内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • echarts实现地图定时切换散点与多图表级联联动详解

    1.  摘要 最近做项目遇到个统计相关需求,一个页面中大概四个或更多图形统计,百度地图.饼图.柱状图.线型图.百度地图上显示所有店面在全国各地大概位置,目前暂定每省一个,在地图上显示散点.如默认显示郑州散点闪动,其他图形显示郑州相关数据:5秒切换下一个区域点,其他的图表数据对应改变.先上个图,各位有需要的可以再接着往下 2.  引入ECharts以及地图相关json ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器.因此引入方式简单了很多,只需要像普

  • Bootstrap标签页(Tab)插件切换echarts不显示问题的解决

    问题: 1.  在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表. 2.  echarts自适应怎么实现? 解决办法: //解决tab切换不显示问题 在加载窗口后重新渲染. $('a[data-toggle="pill"]').on('shown.bs.tab', function(e) { for(var i = 0; i < charts.length; i+

  • echarts同一页面中四个图表切换的js数据交互方法示例

    需求: 点击tab页,切换四个不同的图表,ajax向后台请求数据,展示在四个不同的图表中. 其余的就不多说,直接上js代码了 示例代码: $(function() { $("#heart").on("click", function() { $('.heart-car').show(); $('.sleep-car').hide(); $('.breathe-car').hide(); $('.sport-car').hide(); }); $("#bre

  • vue tab切换,解决echartst图表宽度只有100px的问题

    解决思路:直接将图表的宽高写死,根据实际代码进行改写,提供一个思路 1.将图表放进一个div里面 <div class="echarts"> <div id="myChart" :style="{width: '100%', height: '150px'}"></div> </div> 2.定义一个方法,并在mounted视图更新的时候执行 <script> export defaul

  • 基于Echarts图表在div动态切换时不显示的解决方式

    简单粗暴,先上图,大概长这样: 在使用vue时有遇到像上图下拉框change事件切换div,change切完后大概会变成这个样子: 上代码: <div class="test"> <p class="title"> <select v-model="selected" v-on:change="change"> <option v-for="option in options

  • Echarts实现一张图现切换不同的X轴(实例代码)

    效果图 如果大家想实现如下图的效果那么久继续往下看吧,直接上动图! 方法 因为项目需要展示的数据图表比较多我选择的是把每一张图表封装成一个vue组件来引用. 先上一个完整的代码,引用时注意在从数据库获取数据是要换成自己的数据库以及要自己定义好你需要的对象加到你设定好的数组中: <template> <div> <div id="main" style="height:350px;width:100%"></div> &

  • Android-实现切换Fragment页功能的实现代码

    场景:使用Fragment实现切页. 类结构: 一:Activity Activity中使用getSupportFragmentManager().beginTransaction()来填充一个Fragment(管理用的FragmentA) Activity部分代码: FragmentA fragment = FragmentA.newInstant(null); getSupportFragmentManager().beginTransaction().add(R.id.f_tab_frag

  • 微信小程序左右滑动切换页面详解及实例代码

    微信小程序--左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X,Y坐标. touchstart在触摸开始时触发事件; touchend在触摸结束时触发事件; touchmove触摸的过程中不断激发这个事件; 这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart => touchmove=> touchmov

  • Android 系统语言切换监听和设置实例代码

    最近项目上产品经理提了个需求,要求关闭语言国际化,不管手机系统设置那个国家的语言,都要显示汉语,好吧,既然有需求,那就做吧.但是项目中已经有英文的配置了,且是作为默认String提供的,这么多翻译好的文字,直接删除掉替换成中文为默认String又感觉弃之可惜.故网上Google下解决方案.就开始往下看吧. 一.代码中动态设置应用显示语言(手动控制使用values-zh-rCN下字符串) 这个方法是通过改变Resource中的配置来实现的,代码如下: public static void init

  • js实现三张图(文)片一起切换的banner焦点图

    本文实例讲述了js实现三张图(文)片一起切换的banner焦点图.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的三张图(文)片一起切换的banner焦点图,带有左右箭头,同一个焦点图,三个位置的图片可以同时实现切换,图片中间可以穿插文字说明. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js实现三张图(文)片一起切换的banner焦点图代

  • js实现移动端轮播图滑动切换

    本文实例为大家分享了js实现移动端轮播图滑动切换的具体代码,供大家参考,具体内容如下 移动端手势 轮播图分析 1.自动轮播且无缝 [定时器.过渡动画] 2.分页器要随着图片的轮播而改变 [根据索引切换] 3.滑动效果 [touch事件] 4.图片随着分页器变化 5.滑动结束的时候,如果滑动的距离不超过屏幕的1/3,就恢复回去 [过渡] 6.滑动结束的时候,如果滑动的距离超过屏幕的1/3,就切换 [滑动方向 + 过渡]] html页面结构 <!--轮播图--> <div class=&qu

  • R语言 实现将两张图放在同一张画布

    我就废话不多说了,大家还是直接看代码吧~ ts1<-ts(test_data$tot_num,frequency = 365,start=c(2017,11,21)) plot(ts1,col='blue',lty='dotted',ylim=c(50,550)) par(new=TRUE) ts2<-ts(test_data$pre_result,frequency = 365,start=c(2017,11,21)) plot(ts2,col='red',ylim=c(50,550)) 好

  • js实现轮播图自动切换

    本文实例为大家分享了js实现轮播图自动切换的具体代码,供大家参考,具体内容如下 先看效果图 第一种  //点击按钮,序号变化 showIdx++; if (showIdx == imgArr.length) {                 showIdx = 0;  }   //所有盒子左移动 for (let i = 0; i <items.length; i++) {   items[i].style.left = parseFloat(items[i].style.left) - lo

  • 一张图看尽Linux内核运行原理

    众所周知的是,几乎整个互联网都运行在 Linux 上,从网络协议,到服务器,到你平常访问的绝大多数网站,都能看到它的身影.Linux 内核就是最复杂最流行的开源项目之一.如果你希望学习内核知识,在网上可以搜到无数的资料,但是 Linux 内核还是一个非常难弄明白的项目. 俗话说:一图胜千言,今天我们就为大家介绍一张完整的 Linux 内核运行原理图,通过这张图,你可以很方便地学习内核知识. 在 Linux 内核中,有许多层次.模块.功能调用和函数:要把其中的每一块儿都弄明白很不容易,不过 Mak

  • Wordpress ThickBox 点击图片显示下一张图的修改方法

    以wordpress 3.0.2为例,打开 wp-includes/js/thickbox/thickbox.js,找到以下代码行: 复制代码 代码如下: jQuery("#TB_window").append("<a href='' id='TB_ImageOff' title='"+thickboxL10n.close+"'><img id='TB_Image' src='"+url+"' width='"

随机推荐