仪表盘 echarts

仪表盘 echarts"/>

仪表盘 echarts

先看效果

 定义一个容器

注意：使用百分比 外层盒子要有高度和宽度

<div id="compass" style="width:500px;height: 500px;"></div>

引入echarts  直接全局引入 也可以按需引入

import * as echarts from 'echarts';

 使用的是vue3所以在onMounted中调用方法  等待nextTick()执行完调用 避免获取不到dom

onMounted(async () => {await nextTick()initEchart()
})

下面是方法 相应的属性都有备注 

function initEchart(){
let chart = echarts.init(document.getElementById('compass'));const gaugeData = [{value: 120.3,name: '航向',title: {color: "#626b71",offsetCenter: ['-30%', '-20%'] //设置标题位置 [水平 垂直]},itemStyle: {color: '#306CF0' //箭头颜色 图例颜色},detail: {fontSize: 16,color: "#306CF0", //value值颜色offsetCenter: ['30%', '-20%']}},{value: 40.8,name: '艏向',title: {color: "#626b71",offsetCenter: ['-30%', '20%']},itemStyle: {color: '#000000'},detail: {color: "#000000",fontSize: 16,offsetCenter: ['30%', '20%']}}]chart.setOption({series: [{type: "gauge", //图表类型max: 360,startAngle: 90, //开始角度 正上方endAngle: -270, radius: '60%', //大小splitNumber: 4, //分割份数axisLine: {lineStyle: {width: 6, //圆圈的宽度shadowBlur: 0,color: [[1, '#344047'] //圆圈颜色 可以多种颜色自己调]}},axisTick: {show: false //是否显示坐标轴刻度},splitLine: {show: false},//根据角度确定N E S WaxisLabel: {formatter: function (e) {switch (e + "") {case "0":return "N";case "360":return "N";case "180":return "S";case "90":return "E";case "270":return "W";default:return e;}},distance: -40,//标记与圆圈的距离 自己调整在内部或则外部fontSize: 17,},pointer: {icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",//设置圈上的图标length: '24%',//图标长度width: 10,offsetCenter: [0, '-88%'],//图标位置 [0,0]是中心点},data: gaugeData, //数据detail: {formatter: "{value}°" },}]})
}