72 lines
1.9 KiB
JavaScript
72 lines
1.9 KiB
JavaScript
|
import Vue from 'vue'
|
||
|
|
Vue.component("chart-bar", {
|
||
|
|
template: `
|
||
|
|
<div class='chart-bar' style="position: relative" @click="doClick">
|
||
|
|
<div :style="{'height': height+'px'}" ref="warningPieChart">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
`,
|
||
|
|
props: {
|
||
|
|
fn:{
|
||
|
|
type:Function
|
||
|
|
},
|
||
|
|
height:{
|
||
|
|
type:Number
|
||
|
|
},
|
||
|
|
optData:{
|
||
|
|
type:Array,
|
||
|
|
default:()=>[]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
this.init()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
doClick(){
|
||
|
|
this.$emit("clickme");
|
||
|
|
},
|
||
|
|
init(){
|
||
|
|
this.getChartData()
|
||
|
|
},
|
||
|
|
getChartData(){
|
||
|
|
//品类金额占比 饼图
|
||
|
|
var chChartPie = echarts.init(this.$refs.warningPieChart);
|
||
|
|
this.echartPie(chChartPie)
|
||
|
|
},
|
||
|
|
echartPie(chChart){
|
||
|
|
let newPromise = new Promise((resolve) => {
|
||
|
|
resolve()
|
||
|
|
})
|
||
|
|
|
||
|
|
//然后异步执行echarts的初始化函数
|
||
|
|
newPromise.then(() => {
|
||
|
|
this.option = {
|
||
|
|
legend: {
|
||
|
|
show:false
|
||
|
|
},
|
||
|
|
tooltip: { trigger: 'axis',
|
||
|
|
},
|
||
|
|
dataset: {
|
||
|
|
source: this.optData
|
||
|
|
},
|
||
|
|
xAxis: { type: 'category' },
|
||
|
|
yAxis: {},
|
||
|
|
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
|
||
|
|
}
|
||
|
|
if(this.fn){
|
||
|
|
this.option=this.fn(this.option);
|
||
|
|
}
|
||
|
|
chChart.setOption(this.option);
|
||
|
|
window.onresize = chChart.resize;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
})
|