echarts自定义仪表盘实现特殊功能：轴线渐变（半透明） + 刻度颜色变化 + 仪表盘轴线宽度自适应_qq_37766810

网络投稿 02-07 1840

如图是我画的两个仪表盘第一个仪表盘，实现了：轴线渐变（半透明） + 刻度颜色变化 + 仪表盘轴线宽度自适应第二个仪表盘，实现了：仪表盘轴线宽度自适应

关于轴线的渐变：本来打算使用img。但是由于此轴线是透明度渐变，不同位置透明度不一样，所以无法使用img。因此就用了echarts.graphic.LinearGradient。这个函数是适用于，线性的。因为我将整个轴线分成了左右2部分来实现。分别使用echarts.graphic.LinearGradient，来实现 360度的渐变（我可太难了！！！）

关于刻度颜色变化：本来看了很多解法都是，直接用img。我用了再刷新的时候会报错，解决不了，就换了种方法，新加一个轴线，name: ‘分割线’ 将轴线的宽度置为0，配合着 axisTick.lineStyle.color ：auto 实现不同位置的刻度线的颜色不一样

仪表盘轴线宽度自适应：因为要兼容不同的浏览器的分辨率，所以为了处理兼容性，实现仪表盘的自适应，仪表盘需要用rem的属性有：环线的宽度（x）字体大小（√） radius半径大小（可以用百分比代替）环线的宽度：采用了getCurrentWidth函数返回当前的视口宽度下，基于1920x1080宽度的比例

关于仪表盘实现，整个圆形。用的是下面的方法。但是这个只适用于，新版本的奥。我再4.16.3版本是OK的，4.15版本就无法实现。

startAngle: 90, // 仪表盘起始角度,默认 225。圆心正右手侧为0度，正上方为90度，正左手侧为180度。 endAngle: -270,

4.15版本可用下面的方法：

startAngle: 90, // 仪表盘起始角度,默认 225。圆心正右手侧为0度，正上方为90度，正左手侧为180度。 endAngle: -269.999,

其他细节和功能代码的备注写的很清晰。就不赘述了。【这两个玩意整了我几乎一天，感谢我方ui让我探索新世界，】

import * as echarts from 'echarts'; // 动态获取视口宽度，实现echarts仪表盘部分区域的宽度自适应 function getCurrentWidth() { let percent = 1; let currentWidth = window.innerWidth; switch (currentWidth) { case currentWidth <= 1280: percent = 0.72; break; case currentWidth <= 1366: percent = 0.768; break; case currentWidth <= 1440: percent = 0.8; break; case currentWidth <= 1600: percent = 0.864; break; case currentWidth <= 1680: percent = 0.88; break; default: percent = 1; break; } return percent; } //仪表盘1 轴线生成渐变颜色 function getDashbordColor(percent) { let currentInfo = []; // 这个东西，默认是对称显示,因为 LinearGradient 是线性的，只能再一个方向上渐变。要想实现从0 到 360的渐变，需要分成2段展示 const baseInfo = [ // 右半边 [ 0.5, // 前四个方位分别代表：右下左上，而0 0 0 1则代表渐变色从正上方开始.offset的范围是0 ~ 1, 用于表示位置。 new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(249, 1, 0,0)' }, // 起始位置的颜色 { offset: 1, color: 'rgba(249, 1, 0,0.55)' }, //终止位置的颜色------为了过渡自然，增加了0.05 ]), ], // 左半边 [ 1, // 前四个方位分别代表：右下左上，而0 0 0 1则代表渐变色从正上方开始.offset的范围是0 ~ 1, 用于表示位置, new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 0, color: 'rgba(249, 1, 0,0.45)' }, //下方起始位置的颜色------为了过渡自然，减少了0.05 { offset: 1, color: 'rgba(249, 1, 0,1)' }, //终止位置的颜色 ]), ], ]; // 1、如果是小于0.5 那么只算右边一段。并根据当前的百分比算出当前位置的offset 和透明度 if (percent <= 0.5) { const currentOffset = percent / 0.5; const currentOpacity = percent / 1; currentInfo = [ [ currentOpacity, new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(249, 1, 0, 0)' }, { offset: currentOffset, color: `rgba(249, 1, 0,${currentOpacity})` }, ]), ], ]; } else if (percent <= 1) { // 2、如果大于0.5 // 2.1先加上固定的baseinfo的数据。 currentInfo.push(baseInfo[0]); // 2.2再根据当前的百分比算出当前位置的offset 和透明度 const currentOffset = (percent - 0.5) / 0.5; const currentOpacity = percent / 1; const left = [ currentOpacity, // 前四个方位分别代表：右下左上，而0 0 0 1则代表渐变色从正上方开始.offset的范围是0 ~ 1, 用于表示位置, new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 0, color: 'rgba(249, 1, 0,0.45)' }, { offset: currentOffset, color: `rgba(249, 1, 0, ${currentOpacity})` }, ]), ]; currentInfo.push(left); } return currentInfo; } // 生成仪表盘1 export function createDashboardTask(num = 151, percent = 0.4, title = '中度') { // 0、数据准备 // 此echarts需要用rem的属性有：环线的宽度（x）字体大小（√） radius半径大小（可以用百分比代替） // 环线的宽度：采用了getCurrentWidth函数返回当前的视口宽度下，基于1920x1080宽度的比例 let currentPercent = getCurrentWidth(); const dashboardBaseWidth = 6 * currentPercent; const dashboardOutWidth = 10 * currentPercent; const dashboardValueWidth = 10 * currentPercent; // 1.基于准备好的dom，初始化echarts图表 let myChart = echarts.init(document.getElementById('dashbordTask')); const option = { series: [ { name: '内侧轴线基底', type: 'gauge', //半径 radius: '60.6557%', //起始角度。圆心正右手侧为0度，正上方为90度，正左手侧为180度。 startAngle: 90, // 仪表盘起始角度,默认 225。圆心正右手侧为0度，正上方为90度，正左手侧为180度。 endAngle: -270, center: ['50%', '50%'], splitNumber: 0, //内环刻度的个数 //仪表盘轴线相关配置。 axisLine: { // 坐标轴线 show: true, lineStyle: { // 属性lineStyle控制线条样式 width: dashboardBaseWidth, color: [[1, '#3C82A0']], //轴线的不同位置的颜色 opacity: 0.15, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 shadowColor: 'black', shadowBlur: 0, shadowOffsetX: 0, }, }, // 分隔线样式。 splitLine: { show: false, // 是否显示分隔线,默认 true。 }, //刻度样式 axisTick: { show: false, }, //刻度标签。 axisLabel: { show: false, }, //仪表盘指针。 pointer: { //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！ show: false, //指针长度 length: '90%', width: 10, }, //仪表盘标题。 title: { show: false, }, //仪表盘，用于显示数据。 detail: { show: false, }, zlevel: 1, //如果多个环重复了，指定等级的类似于 z-index }, { name: '内环值', type: 'gauge', //半径 radius: '65.57%', startAngle: 90, // 仪表盘起始角度,默认 225。圆心正右手侧为0度，正上方为90度，正左手侧为180度。 endAngle: -270, center: ['50%', '50%'], //圆心相对于整个div的位置 //仪表盘轴线相关配置。 axisLine: { // 坐标轴线 show: true, // 属性lineStyle控制线条样式 lineStyle: { width: dashboardValueWidth, color: getDashbordColor(percent), }, }, //分隔线样式。 splitLine: { show: false, }, //刻度样式 axisTick: { show: false, }, //刻度标签。 axisLabel: { show: false, }, //仪表盘指针。 pointer: { show: false, }, data: [{ value: num, name: title }], //仪表盘标题。 title: { show: true, offsetCenter: [0, '-30%'], // x, y，单位px textStyle: { color: '#FEFEFE', fontSize: '0.14rem', fontFamily: 'zihun58hao-chuangzhonghei', fontWeight: 400, }, }, //仪表盘详情，用于显示数据。 detail: { show: true, offsetCenter: [0, '30%'], formatter: '{value}', textStyle: { color: '#FEFEFE', fontSize: '0.2rem', fontFamily: 'Fontquan-XinYilogoTi', fontWeight: 700, }, }, zlevel: 1, }, { name: '外侧轴线', type: 'gauge', //半径 radius: '98.36%', startAngle: 90, // 仪表盘起始角度,默认 225。圆心正右手侧为0度，正上方为90度，正左手侧为180度。 endAngle: -270, center: ['50%', '50%'], //仪表盘轴线相关配置。 axisLine: { // 坐标轴线 show: true, lineStyle: { // 属性lineStyle控制线条样式 width: dashboardOutWidth, color: [[1, '#3C82A0']], opacity: 0.15, }, }, //分隔线样式。 splitLine: { show: false, }, splitNumber: 1.2, //分隔线之间分割的刻度数，不是点的个数 1 是 5个 1.2是6个？？ //刻度样式 axisTick: { show: false, distance: 0, length: 1.5, lineStyle: { color: '#F90100', // color: { // image: document.getElementById('bg_img'), // repeat: 'no-repeat', // }, width: 8, type: 'solid', dashOffset: 0, }, }, //刻度标签。 axisLabel: { show: false, }, //仪表盘指针。 pointer: { //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！ show: false, }, //仪表盘标题。 title: { show: false, }, //仪表盘详情，用于显示数据。 detail: { show: false, }, zlevel: 1, }, { name: '分割线', type: 'gauge', //半径 radius: '75%', startAngle: 90, // 仪表盘起始角度,默认 225。圆心正右手侧为0度，正上方为90度，正左手侧为180度。 endAngle: -270, center: ['50%', '50%'], //仪表盘轴线相关配置。 axisLine: { show: true, lineStyle: { width: 0, color: [ [0.25, '#FFFF00'], [0.45, '#F07108'], [0.55, '#F90100'], [0.76, '#9E004F'], [0.9, '#790222'], [1, '#3BAE3E'], ], }, }, //分隔线样式。 splitLine: { show: false, }, splitNumber: 6, //将整个轴线分割成n份 //刻度样式 axisTick: { splitNumber: 1, //分隔线之间分割的n小份，不是点的个数 1 是 5个 1.2是6个？？ show: true, distance: 0, length: 3, lineStyle: { width: 3, color: 'auto', }, }, //刻度标签。 axisLabel: { show: false, }, //仪表盘指针。 pointer: { //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！ show: false, }, //仪表盘标题。 title: { show: false, }, //仪表盘详情，用于显示数据。 detail: { show: false, }, zlevel: 1, }, ], }; myChart.clear(); // 2.为echarts对象加载数据 myChart.setOption(option); } export function createDashboardAir(total = 123, percent = 60) { // 0、数据准备 // 此echarts需要用rem的属性有：环线的宽度（x）字体大小（√） radius半径大小（可以用百分比代替） // 环线的宽度：采用了getCurrentWidth函数返回当前的视口宽度下，基于1920x1080宽度的比例 const currentPercent = getCurrentWidth(); const dashbordBaseWidth = 10 * currentPercent; //内环基底的宽度 const dashbordValueWidth = 5 * currentPercent; //内环值的宽度 // 1、基于准备好的dom，初始化echarts图表 let myChart = echarts.init(document.getElementById('dashbordAir')); const option = { series: [ { name: '内环基底', type: 'gauge', //半径取值：number 或者百分比。仪表盘半径，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。 radius: '89.583%', //起始角度。圆心正右手侧为0度，正上方为90度，正左手侧为180度。 startAngle: 90, // 仪表盘起始角度,默认 225。圆心正右手侧为0度，正上方为90度，正左手侧为180度。 endAngle: -270, center: ['50%', '50%'], splitNumber: 0, //内环刻度的个数 //仪表盘轴线相关配置。 axisLine: { // 坐标轴线 show: true, lineStyle: { // 属性lineStyle控制线条样式 width: dashbordBaseWidth, color: [[1, 'rgb(31, 188, 211)']], //轴线的不同位置的颜色 opacity: 0.1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 shadowColor: 'black', shadowBlur: 0, shadowOffsetX: 0, }, }, // 分隔线样式。--就是刻度 splitLine: { show: false, // 是否显示分隔线,默认 true。 }, //刻度样式 axisTick: { show: false, }, //刻度标签。 axisLabel: { show: false, }, //仪表盘指针。 pointer: { show: false, }, zlevel: 2, //如果多个环重复了，指定等级的类似于 z-index }, { name: '内环值', type: 'gauge', //半径 radius: '79.167%', startAngle: 90, // 仪表盘起始角度,默认 225。圆心正右手侧为0度，正上方为90度，正左手侧为180度。 endAngle: -270, center: ['50%', '50%'], //圆心相对于整个div的位置 //仪表盘轴线相关配置。 axisLine: { // 坐标轴线 show: true, lineStyle: { // 属性lineStyle控制线条样式 width: dashbordValueWidth, color: [[percent / 100, '#2A79A2']], }, }, // 刻度值仪表盘标题 data: [{ value: percent, name: `总计${total}项` }], //仪表盘标题。 title: { show: true, offsetCenter: [0, '-20%'], // x, y，单位px textStyle: { color: '#FEFEFE', fontSize: '0.12rem', fontFamily: 'zihun58hao-chuangzhonghei', fontWeight: 400, }, }, //仪表盘，用于显示数据。 detail: { show: true, offsetCenter: ['5%', '30%'], formatter: '{value}%', textStyle: { fontSize: '0.18rem', color: '#FEFEFE', fontFamily: 'Fontquan- XinYilogoTi', }, }, //分隔线样式。 splitLine: { show: false, }, //刻度样式 axisTick: { show: false, }, //刻度标签。 axisLabel: { show: false, }, //仪表盘指针。 pointer: { //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！ show: false, }, zlevel: 3, }, { name: '外侧环线', type: 'gauge', //半径 radius: '98%', startAngle: 90, // 仪表盘起始角度,默认 225。圆心正右手侧为0度，正上方为90度，正左手侧为180度。 endAngle: -270, center: ['50%', '50%'], //仪表盘轴线相关配置。 axisLine: { // 坐标轴线 show: true, lineStyle: { // 属性lineStyle控制线条样式 width: 1, color: [[1, 'rgba(31, 188, 211, 1)']], opacity: 0.3, }, }, //分隔线样式。 splitLine: { show: false, }, //刻度样式 axisTick: { show: false, }, //刻度标签。 axisLabel: { show: false, }, //仪表盘指针。 pointer: { //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！ show: false, }, //仪表盘标题。 title: { show: false, }, //仪表盘详情，用于显示数据。 detail: { show: false, }, zlevel: 1, }, ], }; // 2、为echarts对象加载数据 myChart.setOption(option); }