vue饼图组件_vue2.0 自定义 饼状图 (Echarts)组件
1.自定义 图表 组件
Echarts.vue
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}
" + 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)'
}
}
}
]
})
}
}
}
#myChart{
width: 100%;
}
2.页面调用
Diagram.vue
返回
:echartStyle="s"
:titleText="a"
:tooltipFormatter="b"
:opinion="c"
:seriesName="d"
:opinionData="e"
v-on:currentEchartData="getEchartData"
>
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);
}
}
}
//
3.效果图
vue饼图组件_vue2.0 自定义 饼状图 (Echarts)组件相关推荐
- vue2.0 自定义 饼状图 (Echarts)组件
1.自定义 图表 组件 Echarts.vue <!-- 自定义 echart 组件 --> <template><div><!-- echart表格 - ...
- 在vue中使用antV-G2展示半径饼状图
介绍 在vue中使用antV-G2展示半径饼状图 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实 ...
- 安卓饼状图设置软件_安卓(Android)开发之自定义饼状图
先来看看效果图 先分析饼状图的构成,非常明显,饼状图就是一个又一个的扇形构成的,每个扇形都有不同的颜色,对应的有名字,数据和百分比. 经以上信息可以得出饼状图的最基本数据应包括:名字 数据值 百分比 ...
- python画饼图函数_python的matplotlib饼状图
在python的matplotlib画图函数中,饼状图的函数为pie pie函数参数解读 plt.pie(x, explode=None, labels=None, colors=None, auto ...
- Android自定义饼状图
1.啥都别说,先上效果图. 2.这效果是平时真实项目开发可能用到的.我也是看到Android交流群里有人要这种效果,于是开始动手写一写. 3.分析:这个自定义View效果 的实现大概分为几步 3.1. ...
- echars ajax 饼状图,echarts饼状图实现方法
当前位置:我的异常网» Web前端 » echarts饼状图实现方法 echarts饼状图实现方法 www.myexceptions.net 网友分享于:2015-09-27 浏览:0次 echa ...
- 在vue中使用antV-G2展示基础饼状图
介绍 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 ...
- python 可视化饼图_Python可视化学习(饼状图,坐标系...)
写在前面的话 01 今天资源君带大家学习一下Python的可视化,何谓可视化呢?我们常常听说Python的数据分析,数据分析中很重要的一个就是将数据展示出来,如何展示出来呢?这就得靠我们的Python ...
- java饼状图_使用Vue+echars+Java后端数据生成饼状图
效果图: 后端controller代码: //图表 @AuthIgnore @PostMapping("getData") public R getData() { long[] ...
最新文章
- spring 使用@Async注解实现异步调用
- 常见的网络***有哪些?
- Jmeter对服务器的压测
- php 检测密码,php 密码强度检测代码
- OpenGl绘制螺旋线
- CGIC库的移植及使用
- 设计干货之插画模板|彩色手绘自然风景城市风景
- linux软件包管理解析,linux学习笔记_09_软件包管理解析.doc
- 很多人把红薯当成减肥餐,吃红薯到底是增肥还是减肥?
- 利用GDI+ for.NET 给图片加水印标记
- Word转换pdf技巧之pdf虚拟打印机怎么用教程
- 机器人学导论复习笔记
- Synology NAS加域
- idea连接mysql数据库下载驱动失败
- ACCESS实例2 资料管理2——窗体创建方法
- Python读写超大文件
- matlab练习(11.7)
- webday02-选择器-基本选择器
- GIS领域的一些机器学习和人工智能的案例
- 洞态IAST自动检测S2-001漏洞
热门文章
- 环状进度条progress bar circle
- Jerry的SAP Kyma和Kubernetes讲座的幻灯片分享
- Word2019上面的MathType7.4插件忽然消失了【终极解决办法记录】
- 经典汉诺塔(Java初学递归篇)
- 航飞原始影像外方位元素_【技术】无人机倾斜摄影建模技术在虚拟现实中的应用...
- 验证二叉搜索树Python解法
- html5 页面 参数传递,详解html中页面跳转传递参数的问题
- rtsp协议_基于libVLC的视频播放器(支持RTSP协议)
- C语言实现寻找极值点,九之再续:教你一步一步用c语言实现sift算法、上
- ediplus 复制编辑一列_EditPlus等编辑器选中列(块)的方法