|
|
@@ -1,123 +1,119 @@
|
|
|
<template>
|
|
|
- <div class="pie-chart-content">
|
|
|
- <div ref="myPieChart" :id="chartId" style="width: 100%;height: 200px;"></div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <script>
|
|
|
- export default {
|
|
|
- name: "pieChart",
|
|
|
- components: {},
|
|
|
- props: {
|
|
|
- options: {
|
|
|
- type: Array,
|
|
|
- default: function () {
|
|
|
- return []
|
|
|
- },
|
|
|
- },
|
|
|
- chartId: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- chartName: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
+ <div class="pie-chart-content">
|
|
|
+ <div ref="myPieChart" :id="chartId" style="width: 100%; height: 200px"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "pieChart",
|
|
|
+ components: {},
|
|
|
+ props: {
|
|
|
+ options: {
|
|
|
+ type: Array,
|
|
|
+ default: function () {
|
|
|
+ return [];
|
|
|
},
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- color: ['#FCEF9A', '#D54039', '#56743E', '#FF917C'],
|
|
|
- pieData: [],
|
|
|
- }
|
|
|
+ chartId: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
},
|
|
|
- // mounted() {
|
|
|
- // this.myPieEcharts(this.options);
|
|
|
- // },
|
|
|
- computed: {},
|
|
|
- watch: {
|
|
|
- options() {
|
|
|
- this.myPieEcharts(this.options);
|
|
|
- }
|
|
|
+ chartName: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
},
|
|
|
- methods: {
|
|
|
- myPieEcharts(pieData) {
|
|
|
- console.log('pieData', pieData)
|
|
|
- let myChart = this.$echarts.init(document.getElementById(this.chartId));
|
|
|
- console.log(myChart);
|
|
|
- //配置图表
|
|
|
- let option = {
|
|
|
- title: {
|
|
|
- text: this.chartName,
|
|
|
- subtext: "百分比",
|
|
|
- left: "center",
|
|
|
- top: '60%'
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: "item",
|
|
|
- },
|
|
|
- legend: {
|
|
|
- orient: "vertical",
|
|
|
- left: "left",
|
|
|
- // top: "38%",
|
|
|
- // bottom:0
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "",
|
|
|
- type: "pie",
|
|
|
- radius: "40%",
|
|
|
- center: ["50%", "40%"],
|
|
|
- // data: [
|
|
|
- // { value: 1048, name: 'Search Engine' },
|
|
|
- // { value: 735, name: 'Direct' },
|
|
|
- // { value: 580, name: 'Email' },
|
|
|
- // { value: 484, name: 'Union Ads' },
|
|
|
- // { value: 300, name: 'Video Ads' }
|
|
|
- // ],
|
|
|
- data: pieData,
|
|
|
- emphasis: {
|
|
|
- itemStyle: {
|
|
|
- shadowBlur: 10,
|
|
|
- shadowOffsetX: 0,
|
|
|
- shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
- },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ color: ["#FCEF9A", "#D54039", "#56743E", "#FF917C"],
|
|
|
+ pieData: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // mounted() {
|
|
|
+ // this.myPieEcharts(this.options);
|
|
|
+ // },
|
|
|
+ computed: {},
|
|
|
+ watch: {
|
|
|
+ options() {
|
|
|
+ this.myPieEcharts(this.options);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ myPieEcharts(pieData) {
|
|
|
+ console.log("pieData", pieData);
|
|
|
+ let myChart = this.$echarts.init(document.getElementById(this.chartId));
|
|
|
+ console.log(myChart);
|
|
|
+ //配置图表
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: this.chartName,
|
|
|
+ subtext: "百分比",
|
|
|
+ left: "center",
|
|
|
+ top: "60%",
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: "vertical",
|
|
|
+ left: "left",
|
|
|
+ // top: "38%",
|
|
|
+ // bottom:0
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ radius: "40%",
|
|
|
+ center: ["50%", "40%"],
|
|
|
+ // data: [
|
|
|
+ // { value: 1048, name: 'Search Engine' },
|
|
|
+ // { value: 735, name: 'Direct' },
|
|
|
+ // { value: 580, name: 'Email' },
|
|
|
+ // { value: 484, name: 'Union Ads' },
|
|
|
+ // { value: 300, name: 'Video Ads' }
|
|
|
+ // ],
|
|
|
+ data: pieData,
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
},
|
|
|
},
|
|
|
- ],
|
|
|
- };
|
|
|
-
|
|
|
- pieData && option && myChart.setOption(option);
|
|
|
-
|
|
|
- window.onresize = function () {
|
|
|
- myChart.resize();
|
|
|
- };
|
|
|
- },
|
|
|
- pieDataHandle(param) {
|
|
|
-
|
|
|
- this.pieData = [];
|
|
|
-
|
|
|
- // param.groupData.map((item,index) => {
|
|
|
- //
|
|
|
- // this.lineData.push({
|
|
|
- // type: 'line',
|
|
|
- // name: item.name,
|
|
|
- // data: item.value,
|
|
|
- // });
|
|
|
- //
|
|
|
- // });
|
|
|
- //
|
|
|
- // this.myLineEcharts(param.category,this.lineData);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ pieData && option && myChart.setOption(option);
|
|
|
+
|
|
|
+ window.onresize = function () {
|
|
|
+ myChart.resize();
|
|
|
+ };
|
|
|
+ },
|
|
|
+ pieDataHandle(param) {
|
|
|
+ this.pieData = [];
|
|
|
+
|
|
|
+ // param.groupData.map((item,index) => {
|
|
|
+ //
|
|
|
+ // this.lineData.push({
|
|
|
+ // type: 'line',
|
|
|
+ // name: item.name,
|
|
|
+ // data: item.value,
|
|
|
+ // });
|
|
|
+ //
|
|
|
+ // });
|
|
|
+ //
|
|
|
+ // this.myLineEcharts(param.category,this.lineData);
|
|
|
},
|
|
|
- }
|
|
|
- </script>
|
|
|
-
|
|
|
- <style scoped>
|
|
|
- .pie-chart-content {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- </style>
|
|
|
-
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.pie-chart-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+</style>
|
