diff --git a/src/components/charts/pies/index.html b/src/components/charts/pies/index.html new file mode 100644 index 0000000..d60fced --- /dev/null +++ b/src/components/charts/pies/index.html @@ -0,0 +1 @@ +
diff --git a/src/components/charts/pies/index.js b/src/components/charts/pies/index.js new file mode 100644 index 0000000..15f7430 --- /dev/null +++ b/src/components/charts/pies/index.js @@ -0,0 +1,221 @@ +import * as echarts from 'echarts'; +import elementResizeDetectorMaker from 'element-resize-detector'; +export default { + props: { + id: { + type: String, + default: 'one222' + }, + data: { + type: Array, + default: function () { + return [ + { + name: '债务规模', + value: '570', + unit: '万' + }, + { + name: '负债规模', + value: '300', + unit: '万' + }, + { + name: '集体资产', + value: '130', + unit: '万' + } + ]; + } + }, + titlePer: {}, + title: { + type: String, + default: '溢价率' + }, + color: { + type: [Array], + default: function () { + return ['rgba(134, 91, 252, 1)', 'rgba(15, 252, 252, 1)', 'rgba(49, 129, 246, 1)'] + } + } + }, + data () { + return { + chart: null + }; + }, + mounted () { + this.initChart(); + }, + methods: { + // 设置监听器 页面尺寸变化重新绘制图表 + initResizeCallBack () { + const erd = elementResizeDetectorMaker(); + erd.listenTo(document.getElementById(this.id), () => { + this.$nextTick(() => { + this.chart.resize(); + }); + }); + }, + initChart () { + this.chart = echarts.init(document.getElementById(this.id)); + this.chartSetOption(); + }, + chartSetOption () { + + let seriesArr = []; + let max = 0 + this.data.forEach((item, index) => { + max += item.value * 1 + seriesArr.push( + { + name: item.name, + type: "bar", + coordinateSystem: 'polar', + roundCap: true, + barWidth: 5, + showBackground: true, + backgroundStyle: { + color: "RGBA(9, 35, 75, 1)", + }, + data: [item.value], + polarIndex: index, + itemStyle: { + normal: { + color: this.color[index] + }, + }, + } + ) + }); + const option = { + tooltip: { + trigger: 'item', + formatter: (params) => { + return params.seriesName + '\n' + params.value + '万元'; + } + }, + polar: [ + { + index: 0, // polarIndex为0 + radius: ["45%", "50%"], + center: ["30%", "45%"] + }, + { + index: 1, // polarIndex为0 + radius: ["55%", "60%"], + center: ["30%", "45%"] + }, + { + index: 2, // polarIndex为0 + radius: ["65%", "70%"], + center: ["30%", "45%"] + } + ], + legend: { + show: true, + bottom: 'center', + orient: 'vertical', + icon: 'circle', + right: 15, + itemGap: 30, + itemHeight: '8', + itemWidth: 12, + textStyle: { + fontSize: 14, + color: 'rgba(210, 238, 255, 1)', + rich: { + unit0: { + fontSize: 14, + color: 'rgba(134, 91, 252, 1)' + }, + unit1: { + fontSize: 14, + color: 'rgba(15, 252, 252, 1)' + }, + unit2: { + fontSize: 14, + color: 'rgba(49, 129, 246, 1)' + } + } + }, + formatter: (name) => { + let str = '' + this.data.find((item, i) => { + if (item.name === name) { + str = name + ' ' + `{unit${i}|${item.value + item.unit}}` + } + }) + return str; + } + }, + angleAxis: [ + { + polarIndex: 0, + max: max, + show: false, + }, + { + polarIndex: 1, + max: max, + show: false, + }, + { + polarIndex: 2, + max: max, + show: false, + } + ], + radiusAxis: [ + { + type: "category", + polarIndex: 0, + show: true, + axisLabel: { + show: false, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + }, + { + type: "category", + polarIndex: 1, + show: true, + axisLabel: { + show: false, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + }, + { + type: "category", + polarIndex: 2, + show: true, + axisLabel: { + show: false, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + } + ], + series: seriesArr, + }; + this.chart.setOption(option); + this.initResizeCallBack(); + + } + } +}; diff --git a/src/components/charts/pies/index.scss b/src/components/charts/pies/index.scss new file mode 100644 index 0000000..8f5690d --- /dev/null +++ b/src/components/charts/pies/index.scss @@ -0,0 +1,4 @@ +.chart { + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/src/components/charts/pies/index.vue b/src/components/charts/pies/index.vue new file mode 100644 index 0000000..5ca257a --- /dev/null +++ b/src/components/charts/pies/index.vue @@ -0,0 +1,3 @@ +