//\u0020pages/data_dashboard/age.js\nimport\u0020*\u0020as\u0020echarts\u0020from\u0020"../ec-canvas/echarts.min"\nconst\u0020api\u0020=\u0020require('../../../utils/o2Api.js');\n\nfunction\u0020initChart(canvas,\u0020width,\u0020height,\u0020dpr)\u0020{\n const\u0020chart\u0020=\u0020echarts.init(canvas,\u0020null,\u0020{\n width:\u0020width,\n height:\u0020height,\n devicePixelRatio:\u0020dpr\n });\n canvas.setChart(chart);\n \n var\u0020option\u0020=\u0020{\n //\u0020backgroundColor:\u0020'rgba(70,130,180,0.8)',\n tooltip:\u0020{\n trigger:\u0020'axis',\n formatter:\u0020(params)\u0020=>\u0020{\n for\u0020(let\u0020b\u0020of\u0020params){\n if\u0020(b.data\u0020<\u00200){\n var\u0020man\u0020=\u0020b;\n var\u0020man_number\u0020=\u0020-man.data;\n }else\u0020{\n var\u0020women\u0020=\u0020b.data;\n }\n }\n return\u0020man.name+'\n'+'男\u0020'+man_number\u0020+'人\n'+'女\u0020'+women\u0020+'人';\n \n },\n axisPointer:\u0020{\n type:\u0020'shadow'\n }\n },\n legend:\u0020{\n data:\u0020['男',\u0020'女'],\n textStyle:\u0020{\n color:\u0020"#fff",\n fontSize:16\n }\n },\n grid:\u0020{\n //\u0020left:\u0020'center',\n right:\u0020'5%',\n bottom:\u0020'3%',\n containLabel:\u0020true\n },\n xAxis:\u0020[\n {\n type:\u0020'value',\n axisLabel:\u0020{\n formatter(value)\u0020{\n return\u0020Math.abs(value)\u0020//\u0020负数取绝对值变正数(x轴本来数据是正负才能分开两边展示的,所以我们只是把负数处理为正数在视觉上显示)\n }\n }\n }\n ],\n yAxis:\u0020[\n {\n type:\u0020'category',\n axisTick:\u0020{\n show:\u0020false\n },\n //\u0020data:\u0020['21-25岁',\u0020'26-30岁',\u0020'31-35岁',\u0020'36-40岁',\u0020'41-45岁',\u0020'45-50岁',\u0020'50岁以上']\n data:\u0020this.data.typeList\n }\n ],\n series:\u0020[\n\n {\n name:\u0020'男',\n type:\u0020'bar',\n stack:\u0020'Total',\n label:\u0020{\n show:\u0020true,\n position:\u0020'left',\n normal:\u0020{\n show:\u0020true,\n\n formatter(value)\u0020{\n return\u0020Math.abs(value.value)\u0020//\u0020负数取绝对值变正数(x轴本来数据是正负才能分开两边展示的,所以我们只是把负数处理为正数在视觉上显示)\n }\n //\u0020formatter:\u0020function\u0020(params)\u0020{\n //\u0020 return\u0020Math.abs(params.values)\n //\u0020}\n }\n },\n emphasis:\u0020{\n focus:\u0020'series'\n },\n //\u0020data:\u0020[-25,-36,-38,-19,-20,-25,-36,-40]\n data:\u0020this.data.age_man\n },\n {\n name:\u0020'女',\n type:\u0020'bar',\n stack:\u0020'Total',\n label:\u0020{\n show:\u0020true,\n \n },\n emphasis:\u0020{\n focus:\u0020'series'\n },\n //\u0020data:\u0020[20,30,19,25,26,24,50,39]\n data:\u0020this.data.age_women\n },\n\n ]\n };\n chart.setOption(option);\n return\u0020chart;\n}\nPage({\n\n /**\n *\u0020页面的初始数据\n */\n data:\u0020{\n ec:\u0020{\n onInit:\u0020initChart\n },\n age_man\u0020:[],\n age_women\u0020:[],\n typeList:[]\n },\n onLoad:\u0020function\u0020()\u0020{\n this.loadAgeInfo();\n },\n loadAgeInfo:\u0020function()\u0020{\n //获取年龄信息\n api.getPersonInfo().then(info\u0020=>\u0020{\n //\u0020console.log(info)\n this.setData({\n age:\u0020info,\n age_man:info.age_man,\n age_women:info.age_women,\n typeList:\u0020info.typeList\n });\n }).catch(err\u0020=>\u0020{\n api.o2Error(err);\n });\n \n //加载年龄分布饼状图\u0020\u0020 \n var\u0020zhichengtongji\u0020=\u0020[];\n var\u0020nianlingtongji_man\u0020=\u0020[];\n var\u0020zhousui_man;\n var\u0020nianlingtongji_women\u0020=\u0020[];\n var\u0020zhousui_women;\n var\u0020zc;\n for\u0020(let\u0020i\u0020=\u00200;\u0020i\u0020<\u0020data.length;\u0020i++)\u0020{\n if(data[i].xb\u0020==\u0020"女"){\n zhousui_women\u0020=\u0020getAge(data[i].csrq);\u0020//周岁\n nianlingtongji_women.push(zhousui_women);\n }else{\n zhousui_man\u0020=\u0020getAge(data[i].csrq);\u0020//周岁\n nianlingtongji_man.push(zhousui_man);\n }\n \n\n zc\u0020=\u0020zcswag(data[i].zc);\n zhichengtongji.push(zc);\n }\n var\u0020women_json\u0020=\u0020getRepeatNum(nianlingtongji_women);\n var\u0020man_json\u0020=\u0020getRepeatNum(nianlingtongji_man);\n var\u0020zcempty\u0020=\u0020getRepeatNum(zhichengtongji);\n var\u0020zhichengxinxi\u0020=\u0020[];\n var\u0020typeList\u0020=\u0020[];\n var\u0020zc_value\u0020=\u0020[];\n\n var\u0020age_man\u0020=\u0020[{\u0020name:\u0020"21-25",\u0020value:\u00200\u0020},\u0020{\u0020name:\u0020"26-30",\u0020value:\u00200\u0020},\u0020{\u0020name:\u0020"31-35",\u0020value:\u00200\u0020},\u0020{\u0020name:\u0020"36-40",\u0020value:\u00200\u0020},\u0020{\u0020name:\u0020"41-45",\u0020value:\u00200\u0020},\u0020{\u0020name:\u0020"46-50",\u0020value:\u00200\u0020},\u0020{\u0020name:\u0020"50以上",\u0020value:\u00200\u0020}];\n for\u0020(let\u0020i\u0020=\u00200;\u0020i\u0020<\u0020nianlingtongji_man.length;\u0020i++)\u0020{\n if\u0020(20\u0020<\u0020nianlingtongji_man[i]\u0020&&\u0020nianlingtongji_man[i]\u0020<=\u002025)\u0020{\n //\u0020console.log(nianlingtongji[i]);\n age_man[0].value\u0020-=\u00201;\n }\u0020else\u0020if\u0020(25\u0020<\u0020nianlingtongji_man[i]\u0020&&\u0020nianlingtongji_man[i]\u0020<=\u002030)\u0020{\n age_man[1].value\u0020-=\u00201;\n }\u0020else\u0020if\u0020(30\u0020<\u0020nianlingtongji_man[i]\u0020&&\u0020nianlingtongji_man[i]\u0020<=\u002035)\u0020{\n age_man[2].value\u0020-=\u00201;\n }\u0020else\u0020if\u0020(35\u0020<\u0020nianlingtongji_man[i]\u0020&&\u0020nianlingtongji_man[i]\u0020<=\u002040)\u0020{\n age_man[3].value\u0020-=\u00201;\n }\u0020else\u0020if\u0020(40\u0020<\u0020nianlingtongji_man[i]\u0020&&\u0020nianlingtongji_man[i]\u0020<=\u002045)\u0020{\n age_man[4].value\u0020-=\u00201;\n }\u0020else\u0020if\u0020(45\u0020<\u0020nianlingtongji_man[i]\u0020&&\u0020nianlingtongji_man[i]\u0020<=\u002050)\u0020{\n age_man[5].value\u0020-=\u00201;\n }\u0020else\u0020if\u0020(50\u0020<\u0020nianlingtongji_man[i])\u0020{\n age_man[6].value\u0020-=\u00201;\n }\n }\n\n var\u0020age_women\u0020=\u0020[{\u0020name:\u0020"21-25",\u0020value:\u00200\u0020},\u0020{\u0020name:\u0020"26-30",\u0020value:\u00200\u0020},\u0020{\u0020name:\u0020"31-35",\u0020value:\u00200\u0020},\u0020{\u0020name:\u0020"36-40",\u0020value:\u00200\u0020},\u0020{\u0020name:\u0020"41-45",\u0020value:\u00200\u0020},\u0020{\u0020name:\u0020"46-50",\u0020value:\u00200\u0020},\u0020{\u0020name:\u0020"50以上",\u0020value:\u00200\u0020}];\n        for\u0020(let\u0020i\u0020=\u00200;\u0020i\u0020<\u0020nianlingtongji_man.length;\u0020i++)\u0020{\n            if\u0020(20\u0020<\u0020nianlingtongji_man[i]\u0020&&\u0020nianlingtongji_man[i]\u0020<=\u002025)\u0020{\n                //\u0020console.log(nianlingtongji[i]);\n                age_women[0].value\u0020+=\u00201;\n            } else if (25

ECharts 图表 data 未定义错误:修改代码示例

原文地址: https://www.cveoy.top/t/topic/qfkf 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录