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面向对象之体会[总结]
Nov 13 Javascript
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 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/11/16 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
jQuery bind事件使用详解
2011/05/05 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
python如何将图片转换为字符图片
2020/08/19 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
使用django自带的user做外键的方法
2020/11/30 Python
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
Servlet如何得到客户端机器的信息
2014/10/17 面试题
25岁生日感言
2014/01/13 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
廉洁使者实施方案
2014/03/29 职场文书
卖车协议书范例
2014/09/16 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书