import ChartDigit2 from '../../../src/chart/gauge/ChartGauge2/ChartGauge2.js'; let chart=new ChartDigit2(document.getElementsByClassName('c1')[0],{}); window.addEventListener('resize',()=>{ chart.resize(); }); let option = { title: {}, bg:{ backgroundColor:"#000000" }, grid: { left:'18%', top:'48%', right:'18%', bottom:'48%', containLabel: false, }, legend:{ left: "28%", top: '80%', name1: '差', name2: '良', name3: '优', itemWidth: 12, textStyle: { fontSize: 16, // color: '#50a7bd' } }, gauge:{ name:'图表', min: 10, mid: 15, max: 30, splitNumber: 10, lineWidth: 1, curLineWidth: 8, axisLine: { show: true, lineStyle: { color: '#f83d3d', lineWidth: 2, } }, axisTick: { show: true, length: 6, lineStyle: { color: '#ffffff', lineWidth: 1, } }, axisLabel: { distance: 0, color: '#bdbdbd', fontSize: 16, fontWeight: 'normal', }, title: { // 仪表盘标题 show: true, // x, y,单位px 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。 offsetCenter: { x: 0, y: '12%' }, color: '#ffffff', fontSize: 20, fontWeight: 'normal', }, }, color:['#f83d3d','#fa8444','#3fffa7','#125fc9','#ffffff'], series: [{ name: '利润', data: [{ name: '实际值', value: 12.5 },{ name: '目标值', value: 12 }], z: 2, }] }; let option1 = { title: {}, bg:{ backgroundColor:"#000000" }, grid: { left:'18%', top:'48%', right:'18%', bottom:'48%', containLabel: false, }, legend:{ left: "28%", top: '80%', name1: '差', name2: '良', name3: '优', itemWidth: 12, textStyle: { fontSize: 16, // color: '#50a7bd' } }, gauge:{ name:'图表', min: 10, mid: 15, max: 40, splitNumber: 10, lineWidth: 1, curLineWidth: 8, axisLine: { show: true, lineStyle: { color: '#f83d3d', lineWidth: 2, } }, axisTick: { show: true, length: 6, lineStyle: { color: '#ffffff', lineWidth: 1, } }, axisLabel: { distance: 0, color: '#bdbdbd', fontSize: 16, fontWeight: 'normal', }, title: { // 仪表盘标题 show: true, // x, y,单位px 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。 offsetCenter: { x: 0, y: '12%' }, color: '#ffffff', fontSize: 20, fontWeight: 'normal', }, }, color:['#f83d3d','#fa8444','#3fffa7','#125fc9','#ffffff'], series: [{ name: '利润', data: [{ name: '实际值', value: 12.5 },{ name: '目标值', value: 12 }], z: 2, }] }; let option2 = { title: {}, bg:{ backgroundColor:"#000000" }, grid: { left:'18%', top:'48%', right:'18%', bottom:'48%', containLabel: false, }, legend:{ left: "28%", top: '80%', name1: '差', name2: '良', name3: '优', itemWidth: 12, textStyle: { fontSize: 16, // color: '#50a7bd' } }, gauge:{ name:'图表', min: 10, mid: 15, max: 40, splitNumber: 5, lineWidth: 1, curLineWidth: 8, axisLine: { show: true, lineStyle: { color: '#f83d3d', lineWidth: 2, } }, axisTick: { show: true, length: 6, lineStyle: { color: '#ffffff', lineWidth: 1, } }, axisLabel: { distance: 0, color: '#bdbdbd', fontSize: 16, fontWeight: 'normal', }, title: { // 仪表盘标题 show: true, // x, y,单位px 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。 offsetCenter: { x: 0, y: '12%' }, color: '#ffffff', fontSize: 20, fontWeight: 'normal', }, }, color:['#f83d3d','#fa8444','#3fffa7','#125fc9','#ffffff'], series: [{ name: '利润', data: [{ name: '实际值', value: 12.5 },{ name: '目标值', value: 12 }], z: 2, }] }; setTimeout(()=>{ chart.setOption(option) },3000) setTimeout(()=>{ chart.setOption(option1) },3000) setTimeout(()=>{ chart.setOption(option2) },3000)