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中点击事件的写法
Jun 28 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
谈谈PHP的输入输出流
2007/02/14 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
js表格分页实现代码
2009/09/18 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
为什么使用接口?
2014/08/13 面试题
行政人员岗位职责
2013/12/08 职场文书
2014年党支部承诺书
2014/05/30 职场文书
2015年春节标语口号
2014/12/09 职场文书
毕业实习单位意见
2015/06/04 职场文书
水知道答案观后感
2015/06/08 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python