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 相关文章推荐
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
js实现select跳转功能代码
Oct 22 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
Vue实现手机计算器
Aug 17 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 ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
PHP的反射机制实例详解
2017/03/29 PHP
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
import的本质解析
2017/10/30 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Django中间件基础用法详解
2019/07/18 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
毕业生自荐书
2014/02/02 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
婚庆主持词大全
2015/06/30 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
python绘制箱型图
2021/04/27 Python
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
浅谈python中的多态
2021/06/15 Python
MySQL8.0的WITH查询详情
2021/08/30 MySQL