echarts.js 动态生成多个图表 使用vue封装组件操作


Posted in Javascript onJuly 19, 2020

组件只做了简单的传值处理,记录开发思路及echarts简单使用。

这里默认所有图表样式一致,都为柱状图,如需其他类型,可查阅echarts官网文档,再动态传值即可。

vue 使用组件 ------在外层用v-for 循环,传不同值进charts 即可

<!-- 传入对应的数据给子组件 -->
   <charts
    :options="item.select" 
    :id='"charts" +index'
    :index="index"
    style="width: 900px;height:400px;"
   ></charts>
   <!-- 传入对应的数据给子组件 end -->

vue创建子组件-----初始化空模板

<!-- 图表组件 -->
 <template>
  <div></div>
 </template>
 <!-- 图表组件 end -->

主要部分 ------ 初始化echarts.js

Vue.component('charts', {
  template: '#charts',  
  // 传入对应的数值与动态index
  props: ['options', 'index'],
  methods: {
   initOption() {
   var that = this
   var arr1 = [] // x轴刻度
   var arr2 = [] // y轴数据值
 
    // 取出需要的数据
   this.options.forEach(element => {
    arr1.push(element.selectedTopic)
    arr2.push(element.peopleNum)
   })
 
   // 基于准备好的dom,初始化echarts实例
   var myChart = echarts.init(
    document.getElementById('charts' + this.index)
   )
 
   // 指定图表的配置项和数据
   var option = {
    color: ['#3582F8'],
    tooltip: {
    trigger: 'axis',
    axisPointer: {
     // 坐标轴指示器,坐标轴触发有效
     type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
    }
    },
    grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
    },
    xAxis: [
    {
     type: 'category',
     data: arr1, // X轴的刻度
     axisTick: {
     alignWithLabel: true
     }
    }
    ],
    yAxis: [
    // y轴的刻度值自动调整
    {
     type: 'value'
    }
    ],
    series: {
    name: 'y轴数值',
    type: 'bar',
    barWidth: '60%',
    data: arr2 // 具体选择数值
    }
   }
 
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option)
   }
  },
  mounted() {
   this.initOption()
  },
  created() {}
  })

补充知识:vue根据获取的数据动态循环渲染多个echart(多个dom节点,多个ID)

//在dom节点加载之后调用渲染echart仪表盘方法,this.$nextTick(function(){ }

<div class="chart">
 
     <div class="geo" v-for="(dataval, index) in dataVal" :key="index" :id="forId(index)"></div>
 
</div>
methods: {
 forId:function(index){
  return "geo_" +index
 },
 
 mapTree() {
   this.$nextTick(function(){
    for(var i=0;i<this.dataVal.length;i++){
      //获取id放入数组中,以便下面渲染echart仪表盘使用
     this.getId.push(this.$echarts.init(document.getElementById('geo_'+i)));
     this.getId[i].setOption({
      title: {
       text: this.dataVal[i].name+'栋',
       textStyle: {
        color: '#00f2f1',
        fontSize: 14
       },
       left: 'center',
       top: 5
      },
      tooltip: {
       formatter: '{a} <br/>{c}'
      },
      series:[
      {
       name: '工作电表数',
       type: 'gauge',
       radius: '80%',
       min: 0,
       max: Number(this.dataVal[i].sum),
       splitNumber: 10,
       axisLine: {      // 坐标轴线
        lineStyle: {    // 属性lineStyle控制线条样式
          color: [[0.30, '#ff4500'], [0.80, '#1e90ff'], [1, 'lime']],
          width: 1,
          shadowColor: '#fff', //默认透明
        }
       },
       axisLabel: {      // 坐标轴小标记
        color: '#fff',
        shadowColor: '#fff', //默认透明
        shadowBlur: 10
       },
       axisTick: {      // 坐标轴小标记
        length: 4,    // 属性length控制线长
        lineStyle: {    // 属性lineStyle控制线条样式
          color: 'auto',
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        }
       },
       splitLine: {      // 分隔线
        length: 7,     // 属性length控制线长
        lineStyle: {    // 属性lineStyle(详见lineStyle)控制线条样式
         width: 2,
         color: '#fff',
         shadowColor: '#fff', //默认透明
         shadowBlur: 10
        }
       },
       pointer: {      // 分隔线
        width:4,//指针的宽度
        length:"70%", //指针长度,按照半圆半径的百分比
        shadowColor: '#fff', //默认透明
        shadowBlur: 5
       },
       title: {
        textStyle: {    // 其余属性默认使用全局文本样式,详见TEXTSTYLE
         fontWeight: 'bolder',
         fontSize: 10,
         fontStyle: 'italic',
         color: '#fff',
         shadowColor: '#fff', //默认透明
         shadowBlur: 10
        }
       },
       detail: {
        fontSize: 12,
       },
       data: [{value: this.dataVal[i].normalSum, name: ''}]
      }]
     });
    }
   })
  }
}

以上这篇echarts.js 动态生成多个图表 使用vue封装组件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
jQuery实现滚动效果
Nov 17 jQuery
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 #Javascript
JS中作用域以及变量范围分析
Jul 18 #Javascript
JS中的变量作用域(console版)
Jul 18 #Javascript
js里面的变量范围分享
Jul 18 #Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 #Javascript
深入理解 ES6中的 Reflect用法
Jul 18 #Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 #Javascript
You might like
坏狼php学习 计数器实例代码
2008/06/15 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
django框架模板语言使用方法详解
2019/07/18 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
Python如何急速下载第三方库详解
2020/11/02 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
最新的大学生找工作自我评价
2013/09/29 职场文书
人事任命书范文
2014/06/04 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
团代会闭幕词
2015/01/28 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
使用Redis实现分布式锁的方法
2022/06/16 Redis