|
|
@@ -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>
|
