https://blog.csdn.net/zc763375777/article/details/53837391
来无事，制作不一样的图标一发，领导让把仪表盘做成百分条，我TM也是醉了，大体样式如下图：（图标是没2秒变化的）
<div id="main" style="width: 400px;height: 300px;"></div> <script> var myChart = echarts.init(document.getElementById("main")); option = { //提示框组件。开发实际中去掉了指针，提示框可以不用设置。 tooltip: { formatter: "{a} <br/>{b} : {c}%" }, //工具栏。本次好像也没用到，刷新，下载，我觉得还是挺实用的，具体开需求！ toolbox: { feature: { restore: {}, saveAsImage: {} } }, //下面属性才是仪表盘的核心！！反正我是这么认为的！！！ series: [{ //类型 type: 'gauge', //半径 radius: 150, //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。 startAngle: 180, //结束角度。 endAngle: 0, center: ['50%', '90%'], //仪表盘轴线相关配置。 axisLine: { show:true, // 属性lineStyle控制线条样式 lineStyle: { width: 60, color:[[1, '#63869e']] } }, //分隔线样式。 splitLine: { show: false, }, //刻度样式。 axisTick: { show: false, }, //刻度标签。 axisLabel: { show:false, }, //仪表盘指针。 pointer: { //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！ show: false, //指针长度 length:'90%', width:0, }, //仪表盘标题。 title: { show: true, offsetCenter: [0, '-40%'], // x, y，单位px textStyle: { color: '#hhh', fontSize: 30 } }, //仪表盘详情，用于显示数据。 detail: { show: true, offsetCenter: [0, '-10%'], formatter: '{value}%', textStyle: { fontSize: 30 } }, data: [{ value: 0, name: '存储量' }] }] }; myChart.setOption(option); //设置定时，加载随机数据，可以直观显示 timeTicket = setInterval(function() { var random=(Math.random() * 100).toFixed(2); var color=[[random/100, '#63869e'], [1, '#c23531']]; option.series[0].axisLine.lineStyle.color=color; option.series[0].data[0].value =random ; myChart.setOption(option, true); }, 200) </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 仪表盘默认是三个区域，此次百分比显示，只能设置两个区域。
- 通过改变axisLine（仪表盘轴线相关配置）中的lineStyle中color数组，默认是3个。
- 本次，我初始化的时候是1个，然后定时加载显示2个，用百分比隔开，成功显示进度条样式。
- 图标是动态变化的，开发的时候可以根据需求设置，在此次样例中，我设置了随机数