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

作者:18844151806 时间:2024-04-27 15:51:07 

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)组件的方法

来源:http://blog.csdn.net/qq_37880968/article/details/79399600

标签:echarts,饼状图,vue,自定义
0
投稿

猜你喜欢

  • 详解如何使用Python编写vim插件

    2023-01-08 13:30:39
  • Linux下mysql 8.0安装教程

    2024-01-15 18:21:49
  • python Socket之客户端和服务端握手详解

    2021-11-29 18:48:21
  • js实现黑白div块画空心的图形

    2023-08-29 07:24:21
  • Tag的自定义类

    2010-03-18 15:53:00
  • Python CSS选择器爬取京东网商品信息过程解析

    2022-01-17 21:18:17
  • 让你Python到很爽的加速递归函数的装饰器

    2022-10-23 13:04:47
  • PHP策略模式定义与用法示例

    2024-05-13 09:21:04
  • python运行脚本文件的三种方法实例

    2022-07-08 11:10:21
  • 让goland支持proto文件类型的实现

    2024-05-25 15:12:24
  • 用python实现的可以拷贝或剪切一个文件列表中的所有文件

    2022-09-11 11:28:23
  • Oracle 9i轻松取得建表和索引的DDL语句

    2010-07-16 13:09:00
  • 用python爬虫爬取CSDN博主信息

    2023-06-13 08:11:10
  • 浅析Python编写函数装饰器

    2023-06-07 12:20:05
  • 你应该知道的Python3.6、3.7、3.8新特性小结

    2023-10-14 02:18:37
  • Python2.7+pytesser实现简单验证码的识别方法

    2022-01-18 02:37:33
  • 解决Git推送错误non-fast-forward的方法

    2022-09-28 11:07:49
  • 简单介绍Python中的filter和lambda函数的使用

    2023-05-30 18:18:36
  • Linux上使用Python统计每天的键盘输入次数

    2023-12-16 20:48:41
  • 利用Python实现好看的水波特效

    2023-05-26 22:23:53
  • asp之家 网络编程 m.aspxhome.com