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中的delete运算符
Nov 30 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
webpack proxy 使用(代理的使用)
Jan 10 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
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
wordpress之js库集合研究介绍
2007/08/17 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
Python编程中的异常处理教程
2015/08/21 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Python如何生成树形图案
2018/01/03 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
学习和使用python的13个理由
2019/07/30 Python
python列表推导式操作解析
2019/11/26 Python
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
高中军训感想800字
2014/02/23 职场文书
语文复习计划
2015/01/19 职场文书
感谢信模板大全
2015/01/23 职场文书
冰峪沟导游词
2015/02/09 职场文书
大学军训心得体会800字
2016/01/11 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫