diff --git a/src/components/charts/pie-legend/index.html b/src/components/charts/pie-legend/index.html new file mode 100644 index 0000000..755e112 --- /dev/null +++ b/src/components/charts/pie-legend/index.html @@ -0,0 +1,5 @@ +
+
+
+
+ diff --git a/src/components/charts/pie-legend/index.js b/src/components/charts/pie-legend/index.js new file mode 100644 index 0000000..9c9d5e2 --- /dev/null +++ b/src/components/charts/pie-legend/index.js @@ -0,0 +1,213 @@ +import * as echarts from 'echarts'; +import elementResizeDetectorMaker from 'element-resize-detector'; +export default { + props: { + id: { + type: String, + default: 'pie' + }, + data: { + type: Array, + default: function () { + return [ + { + value: 2154, + unit: '万元', + name: "项目一", + }, + { + value: 3854, + unit: '万元', + name: "项目二", + }, + { + value: 3854, + unit: '万吨', + name: "项目三", + }, + { + value: 3854, + unit: '万吨', + name: "项目四", + }, + { + value: 3854, + unit: '万吨', + name: "项目五", + } + ]; + } + } + }, + data () { + return { + unit: '万', + chart: null + }; + }, + mounted () { + this.initChart(); + }, + computed: { + }, + 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 () { + var scale = 1; + var echartData = [ + ...this.data + ]; + var rich = { + color0: { + color: "rgba(15, 252, 252, 1)", + fontSize: 18 * scale, + padding: [5, 4], + align: "center", + }, + color1: { + color: "rgba(29, 197, 104, 1)", + fontSize: 18 * scale, + padding: [5, 4], + align: "center", + }, + color2: { + color: "rgba(49, 129, 246, 1)", + fontSize: 18 * scale, + padding: [5, 4], + align: "center", + }, + color3: { + color: "rgba(18, 51, 255, 1)", + fontSize: 18 * scale, + padding: [5, 4], + align: "center", + }, + color4: { + color: "rgba(134, 91, 252, 1)", + fontSize: 18 * scale, + padding: [5, 4], + align: "center", + }, + hr: { + // borderColor: "#0b5263", + width: "100%", + borderWidth: 1, + height: 0, + }, + }; + const option = { + title: [ + { + text: "总债务", + left: "23%", + top: "40%", + padding: [0, 0], + textStyle: { + color: "#fff", + fontSize: 18 * scale, + align: "center", + }, + }, + { + text: "1000 万元", + left: "20%", + top: "50%", + padding: [0, 0], + textStyle: { + color: "#fff", + fontSize: 18 * scale, + align: "center", + }, + } + ], + legend: { + show: true, + top: 'center', + orient: 'vertical', + icon: 'rect', + itemWidth: 8, + itemHeight: 8, + right: 15, + itemGap: 0, + textStyle: { + fontSize: 14, + color: 'rgba(210, 238, 255, 1)', + rich: rich + }, + formatter: (params) => { + var total = 0; //考生总数量 + var percent = 0; //考生占比 + var itemvalue = 0 + let index = 0 + echartData.forEach((value, i, array) => { + total += value.value; + if (value.name === params) { + index = i + itemvalue = value.value + } + }); + percent = ((itemvalue / total) * 100).toFixed(1); + return ( + '{blue|' + params + '}\n{hr|}' + '\n' + + `{color${index}|` + percent + '%' + '}' + '' + + `{color${index}|` + itemvalue + this.unit + '}' + ); + }, + }, + series: [ + { + name: "", + type: "pie", + radius: ["48%", "70%"], + center: ['30%', '50%'], + color: ["rgba(15, 252, 252, 1)", "rgba(29, 197, 104, 1)", "rgba(49, 129, 246, 1)", "rgba(18, 51, 255, 1)", 'rgba(134, 91, 252, 1)'], + label: { + normal: { + show: false, + formatter: function (params) { + var total = 0; + var percent = 0; + echartData.forEach(function (value) { + total += value.value; + }); + percent = ((params.value / total) * 100).toFixed(1); + return ( + "{white|" + + percent + "%" + + "}\n{blue|" + + params.name + + "}\n{hr|}\n{yellow|" + + params.value + params.data.unit + '}' + ); + }, + rich: rich, + }, + }, + labelLine: { + normal: { + length: 10 * scale, + length2: 20 * scale, + }, + }, + data: echartData, + }, + ], + }; + this.chart.setOption(option); + this.initResizeCallBack(); + + } + } +}; diff --git a/src/components/charts/pie-legend/index.scss b/src/components/charts/pie-legend/index.scss new file mode 100644 index 0000000..80044d7 --- /dev/null +++ b/src/components/charts/pie-legend/index.scss @@ -0,0 +1,25 @@ +.pie_full { + width: 100%; + height: 100%; + position: relative; + + .chart { + overflow: visible; + width: 100%; + height: 100%; + z-index: 2; + } + + .cir { + position: absolute; + top: 50%; + left: 30%; + transform: translate(-50%, -50%); + width: 200px; + height: 200px; + border-radius: 50%; + border: 1px solid rgba(49, 129, 246, 1); + box-shadow: inset 0 0 10px 2px rgba(27, 123, 204, 0.8); + /* 添加内发光效果 */ + } +} \ No newline at end of file diff --git a/src/components/charts/pie-legend/index.vue b/src/components/charts/pie-legend/index.vue new file mode 100644 index 0000000..5ca257a --- /dev/null +++ b/src/components/charts/pie-legend/index.vue @@ -0,0 +1,3 @@ +