| | |
| | | default: "" |
| | | } |
| | | }, |
| | | watch:{ |
| | | pieData:{ |
| | | immediate:true, |
| | | handler(newval,oldval){ |
| | | if (newval) { |
| | | // console.log(newval) |
| | | const series=[ |
| | | { |
| | | name: '', |
| | | type: 'pie', |
| | | radius: ['40%', '70%'], |
| | | avoidLabelOverlap:false, |
| | | label: { |
| | | formatter: '{b}\n{d}%', |
| | | fontSize:14 |
| | | }, |
| | | itemStyle: { |
| | | color: function(params) { |
| | | // 根据具体需求设置颜色 |
| | | const colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9']; |
| | | return colorList[params.dataIndex % colorList.length]; |
| | | } |
| | | }, |
| | | data:newval[0].map((value, index) => { |
| | | return { |
| | | value: value, |
| | | name: this.getMonthName(index), |
| | | newValue: newval[1][index] |
| | | }; |
| | | }), |
| | | } |
| | | ] |
| | | this.chartOptions.series = series; |
| | | } |
| | | } |
| | | }, |
| | | chartName:{ |
| | | handler(newval,oldval){ |
| | | if(newval){ |
| | | this.chartOptions.title.text = newval + "数据统计" |
| | | } |
| | | }, |
| | | immediate:true, |
| | | deep:true |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | chartOptions: { |
| | |
| | | top: 'middle', |
| | | data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '', |
| | | type: 'pie', |
| | | radius: ['40%', '70%'], |
| | | avoidLabelOverlap:false, |
| | | label: { |
| | | formatter: '{b}\n{d}%', |
| | | fontSize:14 |
| | | }, |
| | | itemStyle: { |
| | | color: function(params) { |
| | | // 根据具体需求设置颜色 |
| | | const colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9']; |
| | | return colorList[params.dataIndex % colorList.length]; |
| | | } |
| | | }, |
| | | data: [ |
| | | { value: 110, name: '一月', newValue: 10, totalValue: 110 }, |
| | | { value: 220, name: '二月', newValue: 20, totalValue: 220 }, |
| | | { value: 330, name: '三月', newValue: 30, totalValue: 330 }, |
| | | { value: 440, name: '四月', newValue: 40, totalValue: 440 }, |
| | | { value: 550, name: '五月', newValue: 50, totalValue: 550 }, |
| | | { value: 660, name: '六月', newValue: 60, totalValue: 660 }, |
| | | { value: 770, name: '七月', newValue: 70, totalValue: 770 }, |
| | | { value: 880, name: '八月', newValue: 80, totalValue: 880 }, |
| | | { value: 990, name: '九月', newValue: 90, totalValue: 990 }, |
| | | { value: 1100, name: '十月', newValue: 100, totalValue: 1100 }, |
| | | { value: 1210, name: '十一月', newValue: 110, totalValue: 1210 }, |
| | | { value: 1320, name: '十二月', newValue: 120, totalValue: 1320 } |
| | | ] |
| | | } |
| | | ] |
| | | series: [] |
| | | }, |
| | | } |
| | | }, |
| | | methods:{ |
| | | getMonthName(index){ |
| | | const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']; |
| | | return monthNames[index]; |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | |
| | | </el-dialog> |
| | | <!-- echarts组件--> |
| | | <div> |
| | | <lineChart v-for="(item,index) in lineList" :key="index" :chartName="item.menuName" |
| | | :lineData="item.menuData"></lineChart> |
| | | <!-- <pieChart :pieData="pieData" :chartName="chartName"></pieChart>--> |
| | | <ColumnarChart v-for="(item,index) in columnarList" :key="index" :chartName="item.menuName" |
| | | :columnarData="item.menuData"></ColumnarChart> |
| | | <mixCart v-for="(item,index) in mixList" :key="index" :chartName="item.menuName" |
| | | :mixData="item.menuData"></mixCart> |
| | | <lineChart v-for="(item,index) in lineList" :key="index" :chartName="item.menuName" :lineData="item.menuData"></lineChart> |
| | | <pieChart v-for="(item,index) in pieList" :key="index" :pieData="item.menuData" :chartName="item.menuName"></pieChart> |
| | | <ColumnarChart v-for="(item,index) in columnarList" :key="index" :chartName="item.menuName" :columnarData="item.menuData"></ColumnarChart> |
| | | <mixCart v-for="(item,index) in mixList" :key="index" :chartName="item.menuName" :mixData="item.menuData"></mixCart> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | }, |
| | | { |
| | | menuName: "测试sc", |
| | | codeType: "2", |
| | | codeType: null, |
| | | menuData: [ |
| | | [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234], |
| | | [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80], |
| | |
| | | }, |
| | | { |
| | | menuName: "产品型号", |
| | | codeType: "0", |
| | | codeType: null, |
| | | menuData: [ |
| | | [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234], |
| | | [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80], |
| | |
| | | }, |
| | | //保存 |
| | | addSaveHandler() { |
| | | debugger |
| | | if (this.selectData.length <= 0) { |
| | | this.$message.warning('请至少选择一条数据!'); |
| | | return; |