You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by GitBox <gi...@apache.org> on 2018/11/16 12:13:40 UTC
[GitHub] luruxi commented on issue #9383: echarts渲染不出来报错
luruxi commented 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:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org