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 相关文章推荐
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
JS读取XML文件示例代码
Nov 15 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
JavaScript实现旋转木马轮播图
Mar 16 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
elgg 获取文件图标地址的方法
2010/03/20 PHP
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
回顾Javascript React基础
2019/06/15 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
一百多行python代码实现抢票助手
2018/09/25 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
python的setattr函数实例用法
2020/12/16 Python
三星美国官网:Samsung美国
2017/02/06 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
30年同学聚会邀请函
2014/01/25 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
预防传染病方案
2014/06/14 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2015年党总支工作总结
2015/05/25 职场文书
爱国教育主题班会
2015/08/14 职场文书