echarts饼状图实战实例

基于echarts的饼状图

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

来看看效果图吧！

1.先上vue下的HTML

<template>
	<view class="content">
		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts"  id="pieChartLabel"
			  class="echarts">
		</view>
		<!--
		<button @click="changeOption">更新数据</button>
		-->
	</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>

<

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