vue2.0 自定义 饼状图 (Echarts)组件的方法


Posted in Javascript onMarch 02, 2018

1、自定义 图表 组件

Echarts.vue

<!-- 自定义 echart 组件 -->
<template>
 <div>
 <!-- echart表格 -->
 <div id="myChart" :style="echartStyle"></div>
 </div>
</template>
 
<script>
 export default {
 props: {
  // 样式
  echartStyle: {
  type: Object,
  default(){
   return {}
  }
  },
  // 标题文本
  titleText: {
  type: String,
  default: ''
  },
  // 提示框键名
  tooltipFormatter: {
  type: String,
  default: ''
  },
  // 扇形区域名称
  opinion: {
  type: Array,
  default(){
   return []
  }
  },
  // 提示框标题
  seriesName: {
  type: String,
  default: ''
  },
  // 扇形区域数据
  opinionData: {
  type: Array,
  default(){
   return []
  }
  },
 },
 data(){
  return {
  //
  }
 },
 mounted(){
  this.$nextTick(function() {
  this.drawPie('myChart')
  })
 },
 methods: {
  // 监听扇形图点击
  eConsole(param) {
  // 向父组件传值
  this.$emit("currentEchartData",param.name);
  },
  // 绘制饼状图
  drawPie(id){
  this.charts = this.$echarts.init(document.getElementById(id));
  this.charts.on("click", this.eConsole);
  this.charts.setOption({
   title: {
   text: this.titleText, // 标题文本
   left: 'center'
   },
   tooltip : {
   trigger: 'item',
   formatter: "{a} <br/> " + this.tooltipFormatter + ":{c}"
   },
   legend: {
   bottom: 20,
   left: 'center',
   data: this.opinion // 扇形区域名称
   },
   series : [
   {
    name:this.seriesName, // 提示框标题
    type: 'pie',
    radius : '65%',
    center: ['50%', '50%'],
    selectedMode: 'single',
    data:this.opinionData, // 扇形区域数据
    itemStyle: {
    emphasis: {
     shadowBlur: 10,
     shadowOffsetX: 0,
     shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
    }
   }
   ]
  })
  }
 }
 }
</script>
 
<style lang="less" scoped>
 #myChart{
 width: 100%;
 }
</style>

2、页面调用

Diagram.vue

<!-- 图表 -->
<template>
 <div>
 <!-- 标题栏 -->
 <mt-header title="图表">
  <router-link to="/" slot="left">
  <mt-button icon="back">返回</mt-button>
  </router-link>
 </mt-header>
 <!-- 内容 -->
 <m-echarts
  :echartStyle="s"
  :titleText="a"
  :tooltipFormatter="b"
  :opinion="c"
  :seriesName="d"
  :opinionData="e"
  v-on:currentEchartData="getEchartData"
 ></m-echarts>
 </div>
</template>
 
<script>
 import mEcharts from '../components/Echarts'
 
 export default {
 name: 'Diagram',
 components: {
  mEcharts
 },
 data(){
  return {
  a:'水果销售统计',
  b:'销售数量',
  c:['香蕉','苹果','橘子'],
  d:'销售统计',
  e:[
   {value:3, name:'香蕉'},
   {value:3, name:'苹果'},
   {value:3, name:'橘子'}
   ],
  s: {
   height: ''
  }
  }
 },
 created(){
  // 获取屏幕高度
  this.s.height = document.documentElement.clientHeight - 44 + 'px';
 },
 methods: {
  getEchartData(val){
  console.log(val);
  }
 }
 }
</script>
 
<style lang="less" scoped>
 //
</style>

3、效果图

vue2.0 自定义 饼状图 (Echarts)组件的方法

以上这篇vue2.0 自定义 饼状图 (Echarts)组件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript动画浅析
Aug 30 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 #Javascript
详解node.js 下载图片的 2 种方式
Mar 02 #Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 #Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 #Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 #Javascript
浅谈FastClick 填坑及源码解析
Mar 02 #Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 #Javascript
You might like
信用卡效验程序
2006/10/09 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
php实现购物车功能(上)
2020/07/23 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
详解参数传递四种形式
2015/07/21 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
python字典改变value值方法总结
2019/06/21 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
python装饰器代码深入讲解
2021/03/01 Python
编程实现去掉XML的重复结点
2014/05/28 面试题
建筑人员岗位职责
2013/12/25 职场文书
《寓言两则》教学反思
2014/02/27 职场文书
高校教师自荐信范文
2014/03/13 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
小学社会实践活动总结
2014/07/03 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
五心教育心得体会
2014/09/04 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书