|
|
@@ -2,11 +2,7 @@
|
|
|
<div>
|
|
|
<div style="width: 95%; height: 220px; margin: 0 auto">
|
|
|
<!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
|
|
|
- <div
|
|
|
- id="gauge_canvas"
|
|
|
- class="echart"
|
|
|
- style="width: 100%; height: 100%"
|
|
|
- ></div>
|
|
|
+ <div id="gauge_canvas" class="echart" style="width: 100%; height: 100%"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -17,83 +13,77 @@ export default {
|
|
|
return {
|
|
|
chartObj: null,
|
|
|
gaugeOption: {
|
|
|
- // grid: {
|
|
|
- // top: "center",
|
|
|
- // left: "center",
|
|
|
- // right: "auto",
|
|
|
- // bottom: "auto",
|
|
|
- // containLabel: true,
|
|
|
- // },
|
|
|
series: [
|
|
|
{
|
|
|
- type: "gauge",
|
|
|
startAngle: 180,
|
|
|
endAngle: 0,
|
|
|
- center: ["50%", "70%"],
|
|
|
- radius: "120%",
|
|
|
+ type: 'gauge',
|
|
|
min: 0,
|
|
|
- max: 1,
|
|
|
- splitNumber: 6,
|
|
|
+ max: 100,
|
|
|
+ radius:'110%',
|
|
|
+ center: ['50%', '70%'],
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
width: 10,
|
|
|
color: [
|
|
|
- [0.25, "#E73FF1"],
|
|
|
- [0.5, "#89DCBE"],
|
|
|
- [0.75, "#89DCBE"],
|
|
|
- [1, "#2836F6"],
|
|
|
- ],
|
|
|
- },
|
|
|
+ [
|
|
|
+ 1,
|
|
|
+ this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
+ {
|
|
|
+ offset: 0.1,
|
|
|
+ color: '#E73FF1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.2,
|
|
|
+ color: '#89DCBE'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: '#89DCBE'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#2836F6'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ ]
|
|
|
+ ]
|
|
|
+ }
|
|
|
},
|
|
|
axisTick: {
|
|
|
- length: 0,
|
|
|
- lineStyle: {
|
|
|
- color: "inherit",
|
|
|
- width: 2,
|
|
|
- },
|
|
|
+ show:false
|
|
|
},
|
|
|
splitLine: {
|
|
|
- length: 15,
|
|
|
+ length: 10,
|
|
|
lineStyle: {
|
|
|
- color: "inherit",
|
|
|
width: 2,
|
|
|
- },
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
},
|
|
|
axisLabel: {
|
|
|
- show: false,
|
|
|
- color: "#464646",
|
|
|
- fontSize: 20,
|
|
|
- // distance: 0,
|
|
|
- // formatter: function (value) {
|
|
|
- // if (value === 1) {
|
|
|
- // return "优秀";
|
|
|
- // } else if (value === 0) {
|
|
|
- // return "待提升";
|
|
|
- // }
|
|
|
- // return "";
|
|
|
- // },
|
|
|
- },
|
|
|
- title: {
|
|
|
- offsetCenter: [0, "-10%"],
|
|
|
- fontSize: 20,
|
|
|
+ distance: 20, // 文字距表盘的距离
|
|
|
+ formatter: function (v) {
|
|
|
+ let c = parseInt(v);
|
|
|
+ switch (
|
|
|
+ c + '' // 这是每块的注释，算法是刻度最大值/设置间隔区域的显示数量，我这里是1300/6，具体显示位置自己根据需要调节
|
|
|
+ ) {
|
|
|
+ case '0':
|
|
|
+ return '待提升';
|
|
|
+ case '100':
|
|
|
+ return '优秀';
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
detail: {
|
|
|
- show: false,
|
|
|
- fontSize: 30,
|
|
|
- offsetCenter: [0, "-35%"],
|
|
|
- valueAnimation: true,
|
|
|
- formatter: function (value) {
|
|
|
- return Math.round(value * 100) + "";
|
|
|
- },
|
|
|
- color: "inherit",
|
|
|
+ show: false
|
|
|
},
|
|
|
data: [
|
|
|
{
|
|
|
- value: 0.2,
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
+ value: 80
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
@@ -108,15 +98,10 @@ export default {
|
|
|
});
|
|
|
//然后异步执行echarts的初始化函数
|
|
|
newPromise.then(() => {
|
|
|
- // const setEcharWH = {
|
|
|
- // width: 500,
|
|
|
- // height: 260,
|
|
|
- // };
|
|
|
+
|
|
|
const chartObj = this.$echarts.init(
|
|
|
//劳动课程
|
|
|
this.$el.querySelector("#gauge_canvas"),
|
|
|
- // null,
|
|
|
- // setEcharWH
|
|
|
);
|
|
|
// 初始化雷达图
|
|
|
this.chartObj = chartObj;
|
zengyicheng