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 三击事件实现代码
Sep 11 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
vue 中固定导航栏的实例代码
Nov 01 Javascript
原生JS实现留言板功能
Feb 08 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
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 mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
python去掉字符串中重复字符的方法
2014/02/27 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
python日志logging模块使用方法分析
2019/05/23 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
postman传递当前时间戳实例详解
2019/09/14 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
python openpyxl模块的使用详解
2021/02/25 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
护理自荐信范文
2013/10/05 职场文书
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
公司成立感言
2014/01/11 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
先进个人自荐书
2015/03/06 职场文书
安全生产培训心得体会
2016/01/18 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP