赞
踩
Echarts双环饼状图
Echarts官网:https://www.echartsjs.com/examples/zh/index.html
<template> <div :id="id" :style="chartSize" ref="chart"></div> </template> <script> // eslint-disable-next-line /* eslint-disable */ import echarts from "echarts"; export default { name: "hzyhChart", props: { className: { type: String, default: "chart" }, id: { type: String }, width: { type: String, default: "100%" }, height: { type: String, default: "400px" }, tzhyList:{ }, }, data() { return { chartSize: {}, }; }, created() { this.chartSize = { width: this.width, height: this.height }; }, mounted() { this.initChart(); }, methods: { initChart() { // this.chart = echarts.init(document.getElementById(this.id)); this.chart = echarts.init(this.$refs.chart); let option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient: 'vertical', //horizontal // backgroundColor:'#fff', color: '#fff', //bottom: '0%', x: 'right', data: ['data1', 'data2', 'data3'] }, series: [ //内圈 { name: '单位数', type: 'pie', roseType: 'area', //area比例缩放 ,radius radius: ['20%', '40%'], center: ['50%', '55%'], //位置 color: [ '#078686', '#00d0d0', '#034079', '#6f81da', '#00ffb4'], avoidLabelOverlap: false, label: { normal: { show: true, position: 'inner', //center formatter: '{d}%', //{d} textStyle: { color: '#fff', fontWeight: 'bold', fontSize: 14 } }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: [{ value: 11100, name: '物业服务' }, { value: 2220, name: '机关团体' }, { value: 3303, name: '事业单位' }, { value: 4404, name: '企业单位' }] }, //外圈 { name: '人员数', type: 'pie', radius: ['50%', '80%'], avoidLabelOverlap: false, label: { normal: { show: true, position: 'inner', //center formatter: function(param) { return param.name + ':\n' + Math.round(param.percent) + '%'; }, textStyle: { color: '#fff', fontWeight: 'bold', fontSize: 14 } }, emphasis: { show: false, } }, labelLine: { normal: { smooth: true, lineStyle: { width: 2 } } }, itemStyle: { normal: { shadowBlur: 30, shadowColor: 'rgba(0, 0, 0, 0.4)' } }, data: [{ value: 21321, name: '物业服务' }, { value: 1212, name: '机关团体' }, { value: 121, name: '事业单位' }, { value: 1212, name: '企业单位' }] } ] }; this.chart.setOption(option); } } }; </script> <style scoped> div { margin: 0 auto; } </style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。