内蒙古建筑培训网官网_莆田征婚交友网_chatgpt 网站_盐城seo营销

<template><div id="echartBasic"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {mounted() {var chartDom = document.getElementById('echartBasic')var myChart = echarts.init(chartDom)const dataObject = [{name: 'E',value: 3000},{name: 'S',value: 3000},{name: 'T',value: 3000},{name: 'J',value: 2000},{name: 'I',value: 3000},{name: 'N',value: 2500},{name: 'F',value: 3500},{name: 'P',value: 4000}]const dataArray = dataObject.map(n => n.value)const minNum = Math.min(...dataArray)const maxNum = Math.max(...dataArray)const zhongNum = (maxNum - minNum) / 3 + minNumconst option = {title: {},legend: {data: []},radar: [// 虚线{center: ['50%', '50%'],radius: 70,shape: 'circle',splitNumber: 4,color: ['#FFA939'],axisName: {formatter: '{value}',fontSize: 16,fontWeight: 'bolder',color: 'rgba(1, 242, 182, 1)'},splitArea: {areaStyle: {color: ['transparent', 'transparent', 'rgba(114, 172, 209, 0)', 'transparent', 'rgba(114, 172, 209, 0)']}},axisLine: {lineStyle: {color: '#E3E3E3'}},splitLine: {lineStyle: {color: '#E3E3E3',type: 'dashed' //dashed  solid dotted 射线类型【实线 虚线】}},indicator: dataObject.map(n => ({name: n.name,max: maxNum,color: n.value >= zhongNum ? '#01F2B6' : '#D9D9D9'}))},// 实线{center: ['50%', '50%'],radius: 70,indicator: dataObject.map(() => ({max: maxNum})),splitNumber: 1,shape: 'circle',splitArea: {show: false},axisLine: {show: false},splitLine: {lineStyle: {color: '#E3E3E3',type: 'solid',width: 4}}}],series: [{name: 'Budget vs spending',type: 'radar',data: [// 真实的{symbol: 'none',value: dataArray,itemStyle: {normal: {color: 'rgba(25, 255, 198, 0.8)' //拐点颜色}},lineStyle: {width: 2,labelLine: {color: 'rgba(25, 255, 198, 0.8)' //拐点边框颜色}},areaStyle: {// 区域颜色color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'rgba(171, 255, 129, 1)'},{offset: 1, color: 'rgba(25, 255, 198, 1)'}])}},// 虚假的{symbol: 'none',value: dataObject.map(() => zhongNum),itemStyle: {normal: {color: 'rgba(182, 235, 255, 0.5)' //拐点颜色}},lineStyle: {width: 2,labelLine: {color: 'rgba(182, 235, 255, 0.5)' //拐点边框颜色}},areaStyle: {// 区域颜色color: new echarts.graphic.LinearGradient(0, 0, 0, 0.1, [{offset: 0, color: 'rgba(226, 249, 255, 0.5)'},{offset: 1, color: 'rgba(182, 235, 255, 0.5)'}])}},// 拐点...dataObject.map((n, index) => {return {type: 'radar',// 除了当前的，其他的设置无限大value: dataObject.map((_, i) => (i == index ? maxNum : maxNum * 100)),z: 2,itemStyle: {normal: {color: n.value >= zhongNum ? '#01F2B6' : '#D9D9D9'}},lineStyle: {width: 0,labelLine: {show: false //隐藏标示线}}}})// {//   value: dataObject.map(() => maxNum),//   itemStyle: {//     normal: {//       color: '#01F2B6'//     }//   },//   lineStyle: {//     width: 0,//     labelLine: {//       show: false //隐藏标示线//     }//   }// }]}]}option && myChart.setOption(option)},
}
</script>
<style>#echartBasic {width: 210px;height: 210px;margin: 10px auto 8px auto;}
</style>