Vue环境下,在单页面中遍历显示出多个Echarts图表

简介: Vue环境下,在单页面中遍历显示出多个Echarts图表

 在开发的过程中我们常常会用到 Echarts 图表,而有时候一个页面当中会有多处都使用到相同的一个图表只是数据有所差别;这个时候如果我们去一个个重新创建 dom、重新渲染,那就太麻烦了,代码量多不说还不便于修改。


       最好的方法就是借助Vue框架的便捷性,通过 v-for 来将一个已经创建好的图表进行遍历,显示出多个图表,随后动态修改数据。


       本文以横向柱状图为例。


Apache ECharts 的安装与引入此处省略,详情参见 Handbook - Apache ECharts ;


页面初始布局如下:

 注意图表被遍历时,不能再用id,而是应该用class。

<template>
  <div class="test">
    <div class="main">
      <!--自定义宽高的dom,用于放置图表-->
      <!--注意图表被遍历时,不能再用id,而是应该用class-->
      <div class="bar"></div>
    </div>
  </div>
</template>

image.png

进行遍历:完整代码如下

<template>
  <div class="test">
    <div class="content">
      <!-- v-for 遍历父级div-->
      <div class="main" v-for="(item,index) in title" :key="index">
        <!--自定义宽高的dom,用于放置图表-->
        <div class="bar"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "test",
    data() {
      return {
        title: ['测试柱图1', '测试柱图2', '测试柱图3', '测试柱图4', '测试柱图5'],//标题列表
        color: ['#5B8FF9', '#ca2df5', '#42CE92', '#f96950', '#047ff5'],//颜色列表
        value: [66, 90, 45, 12, 70]//数据(x轴的大小)
      }
    },
    methods: {
      // 方法:绘制柱状图
      draw_Bar() {
        var myEchart = document.getElementsByClassName('bar'); //获取类名
        //此处for循环多次初始化 echarts 实例
        for (var i = 0; i < myEchart.length; i++) {
          var myChart = this.$echarts.init(myEchart[i]); //初始化echarts实例要在for循环内
          const builderJson = {
            all: 100,
            charts: {
              map: this.value[i]
            }
          };
          let option = {
            title: {
              text: this.title[i],
              subtext: '总计 ' + builderJson.all,
              left: '170',
              top: '50',
              textAlign: 'center'
            },
            grid: {
              // 水平垂直居中
              top: 140,
              left: 'center',
              width: 310,
              height: 20,
              // grid 区域不包含坐标轴的刻度标签
              containLabel: false
            },
            // x轴y轴不显示
            xAxis: [
              {
                type: 'value',
                max: builderJson.all,
                show: false
              }
            ],
            yAxis: [
              {
                type: 'category',
                show: false
              }
            ],
            series: [
              // 蓝色条
              {
                type: 'bar',
                // 数据堆叠,设置相同的chart值便可堆叠放置
                stack: 'chart',
                color: this.color[i],
                z: 3,
                // 数据标签
                label: {
                  position: 'right',
                  show: true
                },
                data: Object.keys(builderJson.charts).map(function (key) {
                  return builderJson.charts[key];
                })
              },
              // 灰色条
              {
                type: 'bar',
                // 数据堆叠,设置相同的chart值便可堆叠放置
                stack: 'chart',
                silent: true,
                itemStyle: {
                  color: '#eee'
                },
                data: Object.keys(builderJson.charts).map(function (key) {
                  return builderJson.all - builderJson.charts[key];
                })
              }
            ]
          };
          //使用刚指定的配置项和数据显示图表
          myChart.setOption(option);
        }
      },
    },
    mounted() {
      //调用绘制柱状图的方法
      this.draw_Bar();
    }
  }
</script>
<style scoped>
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .main {
    width: 350px;
    margin: 30px 0;
    height: 200px;
    margin-left: 70px;
    background-color: #FFFFFF;
  }
  .main .bar {
    width: 100%;
    height: 100%;
  }
</style>

遍历后效果如下:

image.png

相关文章
|
2月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
186 1
|
3月前
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
162 2
|
2月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
61 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
2月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
66 1
|
1月前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
65 0
|
2月前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day04【28.详情页面Detail】
vue尚品汇商城项目-day04【28.详情页面Detail】
20 1
|
3月前
|
JavaScript
echarts根据上级元素的大小自动更新echarts(element-resize-detector)配合防抖解决大屏页面卡顿的问题
如何在Vue中使用`element-resize-detector`库来自动更新ECharts图表的大小,以适应其上级元素大小的变化,并结合使用防抖技术来解决大屏页面上的卡顿问题。
139 5
|
2月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
320 0
|
2月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
489 0
|
2月前
|
JSON JavaScript 定位技术
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
124 0

热门文章

最新文章