luruxi edited a comment on issue #9383: echarts渲染不出来报错 URL: https://github.com/apache/incubator-echarts/issues/9383#issuecomment-439375444 <template> <div class="Business_opportunity_template"> <div class="dahuikuai"> </div> <div class="Business_opportunity_template_title"> <div class="Business_opportunity_template_nei"> <img src="../../assets/images/lantiao_title.png" alt="" class="lantiao_title"> <span class="Business_opportunity_template_text">商机</span> <img src="../../assets/images/xiazuan_title.png" alt="" class="xiazuan_title" @click="tiaoerjiyemian"> </div> <div class="huixian_fenge"> </div> </div> <div class="Business_opportunity_template_bing"> <div class="Business_ji" ref="Business_ji"> </div> <div class="Business_opportunity_template_biaoshi"> <div class="neibushangji"> <div class="neibushangji_kuai"> </div> <div class="neibushangji_text"> 内部商机 </div> <div class="neibushangji_shuliang"> 数量 :  <span>{{neibushangjishu|quzhengl}}个</span> </div> <div class="neibushangji_jine"> 金额 :  <span>{{neibushangjijine|quzhengl}}万元</span> </div> </div> <div class="neibushangji"> <div class="waibushangji_kuai"> </div> <div class="neibushangji_text"> 外部商机 </div> <div class="neibushangji_shuliang"> 数量 :  <span>{{waibushangjishu|quzhengl}}个</span> </div> <div class="neibushangji_jine"> 金额 :  <span>{{waibushangjijine|quzhengl}}万元</span> </div> </div> </div> </div> </div> </template> <style scoped> .dahuikuai{ width: 100%; height: 14px; background: #f2f2f2; } .neibushangji_text{ position: relative; top:-3px; font-size: 26px; color: #111111; } .Business_opportunity_template_biaoshi .neibushangji:nth-child(2){ margin-top: 15px; } .Business_opportunity_template_biaoshi .neibushangji:first-child{ margin-top: 40px; } .neibushangji_jine{ margin-left:28px; font-size: 26px; color: #111111; } .neibushangji_shuliang{ margin-left:28px; font-size: 26px; color: #111111; } .waibushangji_kuai{ width: 24px; height: 24px; background:#59CA92; display: inline-block; } .neibushangji_text{ display: inline-block; } .neibushangji_kuai{ width: 24px; height: 24px; background:#FED350 ; display: inline-block; } .Business_opportunity_template_biaoshi{ width: 50%; height: 340px; float: right; } .Business_ji{ width: 50%; height: 340px; float: left; } .Business_opportunity_template_bing{ width: 100%; height: 340px; background: #ffffff; } .huixian_fenge{ width: 95%; border-bottom: 2px solid #606870; opacity:0.13; float: right; } .Business_opportunity_template_text{ font-size: 30px; color: #222222; } .xiazuan_title{ width: 14px; height: 24px; float: right; margin-top: 40px; } .lantiao_title{ width: 6px; height:18px; } .Business_opportunity_template_nei{ width: 90%; margin: 0 auto; height: 100px; line-height: 100px; } .Business_opportunity_template_title{ width: 100%; height: 100px; background: #ffffff; } .Business_opportunity_template{ width: 100%; } </style> <script> import commonJS from '@/common/js/common.js'; export default { data() { return { // 内部商机数 neibushangjishu:'', // 内部商机金额 neibushangjijine:'', // 外部商机数 waibushangjishu:'', // 外部商机金额 waibushangjijine:'', } }, props:['shangji_moban'], mounted() { this.$nextTick(function () { let _this = this; _this.shangjiU() }) }, created() { // this.$nextTick(function () { // let _this = this; // setTimeout(function () { // _this.clickFlag = true; // },1000) // console.log('++++++++++++++++++++++++++++++++++++++++') // }) }, watch:{ // 监听时间日期插件 "shangji_moban":function (val) { let _this=this // _this.resourceDatachushi() } }, filters:{ quzhengl(el){ if(el!=''&&el!='null'&&el!=null){ return Number(el).toFixed(0) } } }, methods: { shangjiU(){ let _this=this // 商机的请求 _this.$axios({ method: 'post', url: '/edata-icome/icomeIot/getIotList', params: { zqid:'TC000151', // zqid:_this.$store.state.zqid, dataTable:'icome_teche_marketqs_kpi_h', kpi_id:'I_04000072,I_04000076,I_04000064,I_04000068', count_date:_this.$store.state.dateOnly.substring(0,6) } }).then((response) => { // _this.shangjishuzu=response.data.data console.log(response.data.data) // setTimeout(function () { _this.resourceDatachushi(response.data.data) // },500) }).catch((response) => { console.log(response) }) }, // 饼图方法 resourceDatachushi(el){ let _this=this let dataT=el let xinshuzu=[] for(let i=0;i<dataT.length;i++){ if(dataT[i].kpi_id=='I_04000072'){ _this.neibushangjishu=dataT[i].year_complete }else if(dataT[i].kpi_id=='I_04000076'){ _this.neibushangjijine=dataT[i].year_complete xinshuzu.push({name:'内部商机',value:dataT[i].year_complete}) }else if(dataT[i].kpi_id=='I_04000064'){ _this.waibushangjishu=dataT[i].year_complete }else if(dataT[i].kpi_id=='I_04000068'){ _this.waibushangjijine=dataT[i].year_complete xinshuzu.push({name:'外部商机',value:dataT[i].year_complete}) } } alert(JSON.stringify(xinshuzu)) // if(this.$echarts.getInstanceByDom(this.$refs.Business_ji)){ // this.$echarts.getInstanceByDom(this.$refs.Business_ji).dispose(); // } let myChart = this.$echarts.init(this.$refs.Business_ji) let option = { // color:['#FD9D67', '#FED350', '#A9D3FE', '#8FD3DE', '#A9D371', '#85E1CA', '#E7BD81', '#DBB1E1'], color:['#FED350', '#59CA92'], title:{ // text:zongrenhus+"人"+"\n"+"员工总数", x:"center", y:"center", textStyle:{ fontSize:"28px", color:"rgb(88,88,88)", }, }, tooltip: { confine:true, show:false, trigger: 'item', formatter: "{b}:{d}%" }, legend: { data:['教育事业','环保事业','赈灾扶贫','其他公益事业'], bottom: 0, left: 'center', }, series: [ { type: 'pie', avoidLabelOverlap:true, clockwise:false, silent: true, // radius: ["20%","38%"], // center: ['50%', '50%'], radius: ["45%","65%"], center: ['50%', '50%'], // minAngle:10, labelLine:{ show:true, length2:28 // length:10, // length2:5 }, label: { normal: { show: false, // formatter:function (params) { // let name = params.name; // let tmp = ""; // if(name.length <= 5) // tmp = name; // else { // if(name.length > 5){ // tmp += name.substring(0,4) + "\n"; // name = name.substring(4) // } // tmp += name; // } // return tmp +"\n"+params.percent+"%"+"\n"+params.value+'个' // }, }, emphasis: { show: false, textStyle: { fontSize: '10', fontWeight: 'bold' } } }, itemStyle: { normal: { color: function (p){ if ( p.name == "外部商机" ) { return "#59CA92"; } else if ( p.name == "内部商机" ) { return "#FED350"; } } } }, data:xinshuzu } ] }; alert(JSON.stringify(option.series[0].data)) myChart.setOption(option); alert(JSON.stringify(myChart.getOption())) $(window).resize(function () { myChart.resize(); }) }, tiaoerjiyemian(){ this.$router.push({ path: '/second/chuanyueshangji_erjiyemian', // query: { // dataObj: $(el.currentTarget).attr("att"), // secondTil:$(el.currentTarget).attr("bss"), // } }) } } } </script>
---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] With regards, Apache Git Services --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
