在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端后退强制刷新功能（详细教程）