当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue2.0 自定义 饼状图 (Echarts)组件的方法

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

2019年06月06日  | 移动技术网IT编程  | 我要评论

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)组件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网