Echarts仪表盘刻度线和标签配置

该案例只做参考

步骤：

1.首先设置好盒子的宽高

demo页面

css页面

2. 该方法在进入页面时加载

3. methods方法：

// 待处理阈值实时监听
handleRefGauge1() {const refGauge1 = this.$refs.refGauge1;this.initCharts(refGauge1, {//图表位置grid: {top: '2%',left: '2%',right: '2%',bottom: '10%'},title: [{//标题text: 'CPU利用率',left: 'center',top: '80%',textStyle: {//标题样式color: '#fff',fontSize:12,fontWeight: 600,}}],series: [{type: 'gauge',min: 0,//起始最小刻度值max: 200,//最大刻度值splitNumber: 10,//分隔份数axisLine: {lineStyle: {width: 3,  //仪表盘宽度color: [[0.2, '#228b22'],[0.8, '#0099ff'],[1, '#F1060B']],}},radius: '85%',//仪表盘大小markPoint: {// 仪表盘指针圆animation: false,silent: true,data: [{x: '50%',y: '50%',symbol: 'circle',symbolSize: 10, //指针中心圆大小itemStyle: {color: '#0099ff'},}],},pointer: {// 仪表盘指针//icon:'none',width:3,//指针的宽度length:"60%", //指针长度，按照半圆半径的百分比shadowColor : '#ccc', //默认透明shadowBlur: 5},axisTick: {//刻度样式distance: 0, //刻度线距仪表盘的距离length: 5, //刻度线长度lineStyle: {color: '#228b22',width: 1  //刻度线线宽}},//分隔线样式splitLine: {distance: 0, //分隔线与轴线的距离length: 3,lineStyle: {color: '#228b22',width: 1}},axisLabel: {//刻度标签color: '#3488db',distance: 10,  //标签与刻度线的距离fontSize: 8},detail: {//仪表盘详情，用于显示数据formatter: '{value}',color: '040755',fontSize: 12, //数据字体大小top:'60%'},data: [{value: 60,top:'60%'  //数据值位置}]},]})
},

Echarts仪表盘刻度线和标签配置相关推荐

echarts 仪表盘刻度线随进度条改变颜色
示例图 option = {series: [// 最小{type: 'gauge',radius: '15%', // 位置center: ['50%', '60%'],min: 0,max: 10 ...
Echarts坐标轴刻度线宽度美化
Echarts坐标轴刻度线宽度平时Echarts的y轴刻度线是一条细直线,现在有一个需求是美工设计的刻度线是有宽度的,即粗刻度线还有粗线条设置了颜色,效果比较好,所以这个是必须要实现的: - ech ...
python使用matplotlib可视化、移除可视化图像坐标轴的刻度线和标签( remove the default axis ticks and labels)
python使用matplotlib可视化.移除可视化图像坐标轴的刻度线和标签( remove the default axis ticks and labels) 目录
python使用matplotlib可视化、移除可视化图像X轴坐标轴的刻度线和标签( remove the default axis ticks and labels of x axis)
python使用matplotlib可视化.移除可视化图像X轴坐标轴的刻度线和标签( remove the default axis ticks and labels of x axis) 目录
matplotlib隐藏刻度线、标签和边线
一般情况 plt.figure(figsize=(3, 3)) plt.plot([0, 1], [0, 1]) 以下ax默认由plt.gca()或plt.subplots()获得隐藏所有刻度线和标 ...
echarts 刻度线
解决: yAxis: [{type: 'value',name: '',position: 'left',boundaryGap: false,axisTick: { // 刻度线show: fals ...
echarts bar 控制大小_echarts基本配置参数
网址:https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts 五分钟 ...
echarts 仪表盘文字位置_echarts仪表盘相关配置
指定图表的配置项和数据 var option = { backgroundColor: "#000", tooltip: { // 本系列特定的 tooltip 设定. show: ...
实现ECharts双Y轴左右刻度线一致
实现ECharts双Y轴左右刻度线一致原文链接:https://blog.csdn.net/qq_40845885/article/details/82108525 博主亲测可用哦,先上图: 这是未 ...

Echarts仪表盘刻度线和标签配置

Echarts仪表盘刻度线和标签配置相关推荐

最新文章

热门文章