echarts饼状图实战实例

谁借莪１个温暖的怀抱￠ 2022-11-18 13:47 290阅读 0赞

# 基于echarts的饼状图 #

### echarts本人也是用的很少的了，有缘碰到公司在用，于是便熟悉熟悉。这里就指出一些日常简单参数和图形做参考。 ###

来看看效果图吧！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwNjYyMQ_size_16_color_FFFFFF_t_70]

1.先上vue下的HTML

<template>
    	<view class="content">
    		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts"  id="pieChartLabel"
    			  class="echarts">
    		</view>
    		
    	</view>
    </template>

2、下面就是脚本配置代码

<script>
        export default { 
        //这里的props封装组件时候，传值可用到，此处下面的数据已给出具体初始化化数据此处可先不用
            props: { 
                color: {  //颜色顺序
                    type: Array,
                    default: () => [],
                },
                dataList: {  //数据列表
                    type: Array,
                    default: () => [],
                },
                centerTitle: {  //饼图中间数据
                    type: String,
                    default: ''
                },
                centerunit: {  //单位
                    type: String,
                    default: ''
                }
            },
            data() { 
                return { 
    
                }
            },
            computed: { 
                option() { 
                    return { 
                        tooltip: { 
                            show: false,
                            trigger: 'item',
                            formatter: "{b}:{d}%",
                            /*formatter:function(val){ //让series 中的文字进行换行 console.log(val);//查看val属性，可根据里边属性自定义内容 var content = var['name']; return content;//返回可以含有html中标签 },*/ //自定义鼠标悬浮交互信息提示，鼠标放在饼状图上时触发事件
                        }, //提示框，鼠标悬浮交互时的信息提示
                        graphic: { 
                            type: 'text',
                            left: 'center',
                            top: 'center',
                            style: { 
                                text: this.centerTitle + '\n\n' + this.centerunit, //使用“+”可以使每行文字居中
                                textAlign: 'center',
                                font: '12px cursive',
                                fill: '#A3A9AF',
                                width: 30,
                                height: 30
                            }
                        }, //此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
                        series: [{ 
                            name: '', //tooltip提示框中显示内容
                            type: 'pie', //图形类型，如饼状图，柱状图等
                            radius: ['50%', '65%'], //饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
                            //roseType:'area',是否显示成南丁格尔图，默认false
                            labelLine: { 
                                normal: { 
                                    length: 10,
                                    length2: 50
                                }
    
                            },
                            itemStyle: { 
                                normal: { 
                                    label: { 
                                        show: true,
                                        textStyle: { 
                                            color: '#5B616A',
                                            fontSize: "12"
                                        },
                                        formatter: '{b}\n\n{c}',
                                        padding: [0, -40], //取消hr线跟延长线之间的间隙
                                        /*formatter: function(val) { //让series 中的文字进行换行 return val.name.split("-").join("\n"); }*/
                                    } //饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
                                }, //基本样式
                                emphasis: { 
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)', //鼠标放在区域边框颜色
                                    textColor: '#000'
                                } //鼠标放在各个区域的样式
                            },
                            data: [{ name:"其他",fenbi:"32.90%",value:102},{ name:"股权投融资委员会",fenbi:"21.29%",value:66},{ name:"银行与保险",fenbi:"11.61%",value:36},{ name:"复星蜂巢",fenbi:"8.06%",value:25},{ name:"科技与金融",fenbi:"7.74%",value:24},{ name:"大快乐",fenbi:"7.10%",value:22},{ name:"智能制造与大宗",fenbi:"6.77%",value:21},{ name:"大健康",fenbi:"4.52%",value:14}], //数据，注意这里数据格式一定，数据中其他属性，查阅文档
                            color: ['#7A3409','#AE621A', '#D76C01', '#F29D47', '#FFDB7A','#FFF37A','#FF6464','#424242'], //各个区域颜色
                        }, //数组中一个{}元素，一个图，以此可以做出环形图
                            { 
                                name: '外边框',
                                type: 'pie',
                                clockWise: false, //顺时加载
                                hoverAnimation: false, //鼠标移入变大
                                center: ['50%', '50%'],
                                radius: ['45%', '45%'],
                                label: { 
                                    normal: { 
                                        show: false
                                    }
                                },
                                data: [{ 
                                    value: 0,
                                    name: '',
                                    itemStyle: { 
                                        normal: { 
                                            borderWidth: 1,
                                            borderColor: '#B8B8B8'
                                        }
                                    }
                                }]
                            }
                        ], //系列列表
                    }
                }
            },
            methods: { 
                changeOption() { 
                    const data = this.option.series[0].data
                    // 随机更新示例数据
                    data.forEach((item, index) => { 
                        data.splice(index, 1, Math.random() * 40)
                    })
                },
                onViewClick(options) { 
                    console.log(options)
                }
            }
        }
    </script>
    
    <script module="echarts" lang="renderjs">
    	let myChart
    	export default { 
    		name: 'pieChartLabel',
    		mounted() { 
    			if (typeof window.echarts === 'function') { 
    				this.initEcharts()
    			} else { 
    				// 动态引入较大类库避免影响页面展示
    				const script = document.createElement('script')
    				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
    				script.src = 'static/echarts.js'
    				script.onload = this.initEcharts.bind(this)
    				document.head.appendChild(script)
    			}
    		},
    		methods: { 
    			initEcharts() { 
    				myChart = echarts.init(document.getElementById('pieChartLabel'))
    				// 观测更新的数据在 view 层可以直接访问到
    				myChart.setOption(this.option)
    			},
    			// updateEcharts(newValue, oldValue, ownerInstance, instance) { 
    			// // 监听 service 层数据变更
    			// myChart.setOption(newValue)
    			// },
    			onClick(event, ownerInstance) { 
    				// 调用 service 层的方法
    				ownerInstance.callMethod('onViewClick', { 
    					test: 'test'
    				})
    			}
    		}
    	}
    </script>

3.最后css代码

<style scoped> .content { 
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    
    	.echarts { 
    		width: 690rpx;
    		height: 400rpx;
    	}
    </style>

<

↓↓↓ 个人写的一个公众号，还在完善中 ，欢迎加入↓↓↓ | ᴥ•́ )✧ ↓↓↓

![在这里插入图片描述][a80b70e78aaf41db8f9f71ddea35bdb6.jpg_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwNjYyMQ_size_16_color_FFFFFF_t_70]: /images/20221022/7fe9c3b6afdb45608c76f49e033e5619.png
[a80b70e78aaf41db8f9f71ddea35bdb6.jpg_pic_center]: /images/20221022/f9cff4483f374f00b3bfd471527ce4e0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，290人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts的饼状图变成环形图

首先实现一个饼状图 <!DOCTYPE html> <html> <head> <met

末蓝、/ 2022年12月23日 00:49/ 0 赞/ 264 阅读

相关修改echarts饼状图位置

目录一：修改方法二：效果三：参考一：修改方法 1. `属性` series-pie.center 2. 官方文档

Dear 丶/ 2022年12月19日 11:38/ 0 赞/ 467 阅读

相关 echarts饼状图实战实例

基于echarts的饼状图 echarts本人也是用的很少的了，有缘碰到公司在用，于是便熟悉熟悉。这里就指出一些日常简单参数和图形做参考。来看看效果图吧！ !

谁借莪１个温暖的怀抱￠/ 2022年11月18日 13:47/ 0 赞/ 291 阅读

相关 echarts饼状图指定颜色

为每个饼图的扇面指定不同的颜色指定PIE饼图扇形每个扇面的颜指定PIE饼图扇形每个扇面的颜 > 指定PIE饼图扇形每个扇面的颜色，修改每个data

- 日理万妓/ 2022年11月07日 05:47/ 0 赞/ 351 阅读

相关 ECharts饼图实例

ECharts饼图实例 1、引入jQuery的js文件 2、引入echarts的js文件 test.html页面 <!DOCTYPE html PU

柔情只为你懂/ 2022年06月18日 12:29/ 0 赞/ 411 阅读

相关 ECharts图表------饼状图

效果图: ![SouthEast][] <!DOCTYPE html> <html> <head> <meta charset=

谁借莪１个温暖的怀抱￠/ 2022年06月01日 01:14/ 0 赞/ 374 阅读

相关 echarts饼状图

使用echarts实现个人月消费统计，下面是我写的一个案例：效果图： ![70][] html代码： <html> <head> <me

川长思鸟来/ 2022年05月14日 01:41/ 0 赞/ 410 阅读

相关 Echarts使用笔记--饼图，柱状图

开始做前端了，感觉自己是要变成全栈工程师了。。。今天使用了echart，用之前觉得好高大上好厉害，肯定很复杂。用了以后才发现，使用起来超简单，当然，精通很难，里面的各种配

痛定思痛。/ 2022年01月26日 09:35/ 0 赞/ 428 阅读

相关 ECharts之饼状图

效果图 ![在这里插入图片描述][20190725130341211.gif] 背景图片 ![20190725170845879.png][] 下载EChar

╰+哭是因爲堅強的太久メ/ 2021年09月30日 05:32/ 0 赞/ 999 阅读

相关 echart生成饼状图

//绘制图表. echarts.init(document.getElementById('main')).setOption(\{ tooltip : \{ tr

女爷i/ 2021年09月29日 09:08/ 0 赞/ 529 阅读