vue2.0 自定义 饼状图 (Echarts)组件的方法
程序员文章站
2023-12-26 14:28:03
1、自定义 图表 组件
echarts.vue
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)组件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。