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>