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: {
<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>