00

src/components/oldStatistics/3.vue

@@ -0,0 +1,118 @@
+<template>
+  <div id="myChartold3" style="width: 100%; height: 100%; "></div>
+</template>
+
+<script>
+    export default {
+        //老年人关爱服务统计
+        name: "RadarChart2",
+        data() {
+          return {
+            dataArr: [
+              { label: '生活照料', value: '10%' },
+              { label: '生产帮助', value: '50%' },
+              { label: '精神慰藉', value: '90%' },
+              { label: '医疗保健', value: '70%' },
+              { label: '权益维护', value: '30%' },
+              { label: '安全监护', value: '50%' },
+              { label: '文化娱乐', value: '60%' },
+              { label: '紧急救助', value: '90%' },
+              { label: '其他', value: '60%' }
+            ]
+          }
+        },
+        methods: {
+          draw() {
+            const valueArr = this.dataArr.map((item) => {
+              return parseInt(item.value);
+            });
+
+            const labelArr = this.dataArr.map((item) => {
+              return {
+                name: item.label + '：' + item.value,
+                max: 100,
+
+              };
+            });
+
+            let myChart = this.$echarts.init(document.getElementById('myChartold3'));
+            myChart.setOption({
+              normal: {
+                top: 200,
+                left: 300,
+                width: 500,
+                height: 400,
+                zIndex: 6
+              },
+              radar: {
+                center: ["50%", "52%"],
+                radius: "55%",
+                startAngle: 90,
+                splitNumber: 0,
+                splitArea: {
+                  areaStyle: {
+                    color: ["transparent"]
+                  }
+                },
+                name:{
+                  textStyle:{
+                    // color:'#000'
+                    fontSize: 16
+                  }
+                },
+                axisLabel: {
+                  show: false,
+                  fontSize: 18,
+                  color: "#fff",
+                  fontStyle: "normal",
+                  fontWeight: "normal"
+                },
+                axisLine: {
+                  show: true,
+                  lineStyle: {
+                    color: "white"
+                  }
+                },
+                splitLine: {
+                  show: true,
+                  lineStyle: {
+                    color: 'white'
+                  }
+                },
+                indicator: labelArr
+              },
+              series: [{
+                type: "radar",
+                symbol: "circle",
+                symbolSize: 10,
+                areaStyle: {
+                  normal: {
+                    color: "#dcf7ff"
+                  }
+                },
+                itemStyle:{
+                  color:'#75beff',
+                  borderColor:'#ffcb00',
+                  borderWidth:3,
+                },
+                lineStyle: {
+                  normal: {
+                    type: "solid",
+                    color: "#83cfff",
+                    width: 2
+                  }
+                },
+                data: [ valueArr ]
+              }]
+            });
+          }
+        },
+        mounted() {
+          this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>