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 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
Vue.js一个文件对应一个组件实践
Oct 27 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
用JS实现简单的登录验证功能
Jul 28 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
微信小程序HTTP接口请求封装代码实例
Sep 05 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实例分享之html转为rtf格式
2014/06/02 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
Vue实现简易计算器
2020/02/25 Javascript
详解python开发环境搭建
2016/12/16 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
Python timeit模块原理及使用方法
2020/10/10 Python
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
通信工程专业毕业生推荐信
2013/12/25 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS
关于python中模块和重载的问题
2021/11/02 Python
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android