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、效果图
来源: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