在vue2.0中如何实现自定义饼状图(Echarts)组件

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了在vue2.0中如何实现自定义饼状图(Echarts)组件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2573字，纯文字阅读大概需要4分钟。

内容图文

下面我就为大家分享一篇vue2.0 自定义 饼状图 (Echarts)组件的方法，具有很好的参考价值，希望对大家有所帮助。

1、自定义 图表 组件

Echarts.vue

<!-- 自定义 echart 组件 -->
<template>
 <p>
 <!-- echart表格 -->
 <p id="myChart" :style="echartStyle"></p>
 </p>
</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>
 <p>
 <!-- 标题栏 -->
 <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>
 </p>
</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、效果图

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Vue.directive中发现有关自定义指令的问题

详细讲解JavaScript图片处理与合成技术（详细教程）

如何实现微信web端后退强制刷新功能（详细教程）

以上就是在vue2.0中如何实现自定义 饼状图 (Echarts)组件的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的在vue2.0中如何实现自定义饼状图(Echarts)组件全部内容，希望文章能够帮你解决在vue2.0中如何实现自定义饼状图(Echarts)组件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---