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 相关文章推荐
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
js创建元素(节点)示例
Jan 02 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
vue 扩展现有组件的操作
Aug 14 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
js作用域及作用域链工作引擎
Jul 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中进行身份认证
2006/10/09 PHP
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
Javascript Global对象
2009/08/13 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
详解JS面向对象编程
2016/01/24 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
python中with用法讲解
2020/02/07 Python
Django如何使用redis作为缓存
2020/05/21 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
终端业务员岗位职责
2013/11/27 职场文书
双语教学实施方案
2014/03/23 职场文书
党风廉政建设责任书
2014/04/14 职场文书
语文教师求职信范文
2015/03/20 职场文书
初中家长意见
2015/06/03 职场文书
oracle数据库去除重复数据
2022/05/20 Oracle