vue 封裝圖表組件

<template>

<div class="layout">

<div id="main" style="height:15rem; width:15rem"></div>

</div>

</template>

<script>

module.exports = {

props: {

name: { type: String },

numer: { type: Number }

},

data: function() {

return {

option: (option = {

tooltip: {

formatter: "{a} <br/>{b} : {c}%"

},

series: [

{

type: "gauge",

min: 0,

max: 100,

splitNumber: 10, // 分割段數，默認爲5

axisLine: {

// 座標軸線

lineStyle: {

// 屬性lineStyle控制線條樣式

color: [[0.2, "#228b22"], [0.8, "#48b"], [1, "#ff4500"]],

width: 8

}

},

axisTick: {

// 座標軸小標記

splitNumber: 10, // 每份split細分多少段

length: 12, // 屬性length控制線長

lineStyle: {

// 屬性lineStyle控制線條樣式

color: "auto"

}

},

axisLabel: {

// 座標軸文本標籤，詳見axis.axisLabel

textStyle: {

// 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE

color: "auto"

}

},

splitLine: {

// 分隔線

show: true, // 默認顯示，屬性show控制顯示與否

length: 15, // 屬性length控制線長

lineStyle: {

color: "auto"

}

},

//指針大小

pointer: {

width: 5

},

title: {

show: true,

offsetCenter: [0, "-20%"], // x, y，單位px

textStyle: {

// 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE

// fontWeight: "bolder"

color: "#fff"

}

},

detail: {

formatter: "{value}%",

textStyle: {

// 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE

color: "auto",

//設置文字大小

fontSize: 25,

fontWeight: "bold"

}

},

data: [{ value: 0, name: "未定義" }]

}

]

})

};

},

mounted() {

this.init();

},

methods: {

init() {

var myChart = echarts.init(document.getElementById("main"));

console.log("執行："+this.name );

this.option.series[0].data = [{ value: this.numer, name: this.name }];

myChart.setOption(this.option);

},

clickBtn: function() {

console.log(this.value1);

},

ChangeState: function() {

this.$emit("ChangeStateEvent");

}

}

};

</script>

 

<style scoped>

.layout {

position: fixed;

width: 100%;

height: 90%;

background: url(../../img/background-bg.jpg) no-repeat;

background-attachment: fixed;

background-size: 100%100%;

overflow: -Scroll;

overflow-x: hidden;

}

._layout {

margin-left: 5rem;

height: 4rem;

line-height: 4rem;

display: flex;

word-wrap: break-word;

}

</style>