|
|
@ -17,7 +17,11 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tongjitu"></div> |
|
|
<div |
|
|
|
|
|
class="tongjitu" |
|
|
|
|
|
id="homebar" |
|
|
|
|
|
style="height: 230px; width: 680px" |
|
|
|
|
|
></div> |
|
|
|
|
|
|
|
|
<div class="qushiBaifb"> |
|
|
<div class="qushiBaifb"> |
|
|
<div class="baifbLeft"> |
|
|
<div class="baifbLeft"> |
|
|
@ -261,13 +265,14 @@ |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
|
|
|
// 引入echarts |
|
|
|
|
|
import * as echarts from "echarts"; |
|
|
|
|
|
|
|
|
var uChartsInstance = {}; |
|
|
var uChartsInstance = {}; |
|
|
export default { |
|
|
export default { |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
msg: "Welcome to Your Vue.js App", |
|
|
|
|
|
selectVal: 1, |
|
|
selectVal: 1, |
|
|
keliuList: [ |
|
|
keliuList: [ |
|
|
{ |
|
|
{ |
|
|
@ -281,17 +286,129 @@ export default { |
|
|
}, |
|
|
}, |
|
|
], |
|
|
], |
|
|
selectVal1: "年", |
|
|
selectVal1: "年", |
|
|
|
|
|
|
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
|
|
|
mounted() { |
|
|
|
|
|
// 首页线图 |
|
|
|
|
|
this.home_bar(); |
|
|
|
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
|
|
|
|
|
|
clickItme(val) { |
|
|
clickItme(val) { |
|
|
this.selectVal = val; |
|
|
this.selectVal = val; |
|
|
}, |
|
|
}, |
|
|
clickQushi(val) { |
|
|
clickQushi(val) { |
|
|
this.selectVal1 = val; |
|
|
this.selectVal1 = val; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 透明背景柱状统计图 |
|
|
|
|
|
home_bar() { |
|
|
|
|
|
var chartDom = document.getElementById("homebar"); |
|
|
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
|
|
var option; |
|
|
|
|
|
|
|
|
|
|
|
option = { |
|
|
|
|
|
xAxis: { |
|
|
|
|
|
type: "category", |
|
|
|
|
|
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun","0c","90","10"], |
|
|
|
|
|
}, |
|
|
|
|
|
yAxis: { |
|
|
|
|
|
type: "value", |
|
|
|
|
|
//网格线 |
|
|
|
|
|
splitLine:{ |
|
|
|
|
|
lineStyle:{ |
|
|
|
|
|
type:"soild", |
|
|
|
|
|
color:'#2F00FF' |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
series: [ |
|
|
|
|
|
{ |
|
|
|
|
|
data: [120, 200, 150, 80, 70, 110, 130,630,530,460], |
|
|
|
|
|
type: "bar", |
|
|
|
|
|
showBackground: true, |
|
|
|
|
|
// 设置顶部圆形 |
|
|
|
|
|
symbolSize:function(d){ |
|
|
|
|
|
console.log(d) |
|
|
|
|
|
return d>0?[10,barWidth]:[0,0] |
|
|
|
|
|
}, |
|
|
|
|
|
symbolPosition:'end', |
|
|
|
|
|
|
|
|
|
|
|
// symbolPosition:'end', |
|
|
|
|
|
// 背景颜色 |
|
|
|
|
|
backgroundStyle: { |
|
|
|
|
|
symbolPosition:'end', |
|
|
|
|
|
symbolSize:[20,20], |
|
|
|
|
|
symbolOffset:[0,"-20%"], |
|
|
|
|
|
opacity:0.75, |
|
|
|
|
|
//color: 'rgba(180, 180, 180, 0.2)' |
|
|
|
|
|
color: { |
|
|
|
|
|
type: "linear", |
|
|
|
|
|
x: 0, |
|
|
|
|
|
y: 1, |
|
|
|
|
|
x2: 1, |
|
|
|
|
|
y2: 1, |
|
|
|
|
|
colorStops: [ |
|
|
|
|
|
{ |
|
|
|
|
|
offset: 0, |
|
|
|
|
|
color: "#2F00FF", // 0% 处的颜色 |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
offset: 0.2, |
|
|
|
|
|
color: "#000", // 50% 处的颜色 |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
offset: 0.8, |
|
|
|
|
|
color: "#000", // 50% 处的颜色 |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
offset: 1, |
|
|
|
|
|
color: "#2F00FF", // 0% 处的颜色 |
|
|
|
|
|
} |
|
|
|
|
|
], |
|
|
|
|
|
global: false, // 缺省为 false |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// |
|
|
|
|
|
// itemStyle:{ |
|
|
|
|
|
// normal:{ |
|
|
|
|
|
// barBorderRadius:[2,2,0,0] |
|
|
|
|
|
// } |
|
|
|
|
|
//symbolOffset:[14,14], |
|
|
|
|
|
//borderRadius:[15,15,0,0] |
|
|
|
|
|
// }, |
|
|
|
|
|
|
|
|
|
|
|
// 条柱颜色 |
|
|
|
|
|
color: { |
|
|
|
|
|
type: "linear", |
|
|
|
|
|
x: 0, |
|
|
|
|
|
y: 1, |
|
|
|
|
|
x2: 1, |
|
|
|
|
|
y2: 1, |
|
|
|
|
|
colorStops: [ |
|
|
|
|
|
{ |
|
|
|
|
|
offset: 0, |
|
|
|
|
|
color: "#00B4FF", // 0% 处的颜色 |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
offset:0.6,color:"#2f00ff" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
offset:0.8,color:"#2f00ff", |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
offset: 1, |
|
|
|
|
|
color: "#00B4FF", // 100% 处的颜色 |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
global: false, // 缺省为 false |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
