makepie2月份要停用了，搬一些社区例子

简单装饰仪表盘+外面会转动

讯享网

 let angle = 0;//角度，用来做简单的动画效果的 let value = 55.33; option = { backgroundColor:"#061740", title: { text: '{a|'+ value +'}{c|%}', x: 'center', y: 'center', textStyle: { rich:{ a: { fontSize: 48, color: '#29EEF3' }, c: { fontSize: 20, color: '#ffffff', // padding: [5,0] } } } }, legend: { type: "plain", orient: "vertical", right: 0, top: "10%", align: "auto", data: [{ name: '涨价后没吃过', icon: "circle" }, { name: '天天吃', icon: "circle" }, { name: '三五天吃一次', icon: "circle" }, { name: '半个月吃一次', icon: "circle" }], textStyle: { color: "white", fontSize: 16, padding: [10, 1, 10, 0] }, selectedMode:false }, series: [ { name: "ring5", type: 'custom', coordinateSystem: "none", renderItem: function(params, api) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6, startAngle: (0+angle) * Math.PI / 180, endAngle: (90+angle) * Math.PI / 180 }, style: { stroke: "#0CD3DB", fill: "transparent", lineWidth: 1.5 }, silent: true }; }, data: [0] }, { name: "ring5", type: 'custom', coordinateSystem: "none", renderItem: function(params, api) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6, startAngle: (180+angle) * Math.PI / 180, endAngle: (270+angle) * Math.PI / 180 }, style: { stroke: "#0CD3DB", fill: "transparent", lineWidth: 1.5 }, silent: true }; }, data: [0] }, { name: "ring5", type: 'custom', coordinateSystem: "none", renderItem: function(params, api) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65, startAngle: (270+-angle) * Math.PI / 180, endAngle: (40+-angle) * Math.PI / 180 }, style: { stroke: "#0CD3DB", fill: "transparent", lineWidth: 1.5 }, silent: true }; }, data: [0] }, { name: "ring5", type: 'custom', coordinateSystem: "none", renderItem: function(params, api) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65, startAngle: (90+-angle) * Math.PI / 180, endAngle: (220+-angle) * Math.PI / 180 }, style: { stroke: "#0CD3DB", fill: "transparent", lineWidth: 1.5 }, silent: true }; }, data: [0] }, { name: "ring5", type: 'custom', coordinateSystem: "none", renderItem: function(params, api) { let x0 = api.getWidth() / 2; let y0 = api.getHeight() / 2; let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65; let point = getCirlPoint(x0, y0, r, (90+-angle)) return { type: 'circle', shape: { cx: point.x, cy: point.y, r: 4 }, style: { stroke: "#0CD3DB",//粉 fill: "#0CD3DB" }, silent: true }; }, data: [0] }, { name: "ring5", //绿点 type: 'custom', coordinateSystem: "none", renderItem: function(params, api) { let x0 = api.getWidth() / 2; let y0 = api.getHeight() / 2; let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65; let point = getCirlPoint(x0, y0, r, (270+-angle)) return { type: 'circle', shape: { cx: point.x, cy: point.y, r: 4 }, style: { stroke: "#0CD3DB", //绿 fill: "#0CD3DB" }, silent: true }; }, data: [0] }, { name: '吃猪肉频率', type: 'pie', radius: ['58%', '45%'], silent: true, clockwise: true, startAngle: 90, z: 0, zlevel: 0, label: { normal: { position: "center", } }, data: [{ value: value, name: "", itemStyle: { normal: { color: { // 完成的圆环的颜色 colorStops: [{ offset: 0, color: '#4FADFD' // 0% 处的颜色 }, { offset: 1, color: '#28E8FA' // 100% 处的颜色 }] }, } } }, { value: 100-value, name: "", label: { normal: { show: false } }, itemStyle: { normal: { color: "#" } } } ] }, { name: "", type: "gauge", radius: "58%", center: ['50%', '50%'], startAngle: 0, endAngle: 359.9, splitNumber: 8, hoverAnimation: true, axisTick: { show: false }, splitLine: { length: 60, lineStyle: { width: 5, color: "#061740" } }, axisLabel: { show: false }, pointer: { show: false }, axisLine: { lineStyle: { opacity: 0 } }, detail: { show: false }, data: [{ value: 0, name: "" }] }, ] }; //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度) function getCirlPoint(x0, y0, r, angle) { let x1 = x0 + r * Math.cos(angle * Math.PI / 180) let y1 = y0 + r * Math.sin(angle * Math.PI / 180) return { x: x1, y: y1 } } function draw(){ angle = angle+3 myChart.setOption(option, true) //window.requestAnimationFrame(draw); } setInterval(function() { //用setInterval做动画感觉有问题 draw() }, 100); 

半个仪表盘

讯享网option = { backgroundColor: "#072B79", tooltip: { formatter: "{b}{c}" }, series: [{ tooltip: { show: false }, "name": 'wrap', "type": 'pie', "hoverAnimation": false, "legendHoverLink": false, center: ['50%','60%'], "radius": ['0%', '7%'], "z": 5, "label": { "normal": { "show": false, "position": 'center' }, "emphasis": { "show": false } }, "labelLine": { "normal": { "show": false } }, "data": [{ "value": 100, itemStyle: { normal: { color: "#072B79" }, emphasis: { color: "#072B79" } } }] }, { tooltip: { show: false }, "name": 'wrap', "type": 'pie', "hoverAnimation": false, "legendHoverLink": false, center: ['50%','60%'], "radius": ['6%', '8%'], "z": 5, "label": { "normal": { "show": false, "position": 'center' }, "emphasis": { "show": false } }, "labelLine": { "normal": { "show": false } }, "data": [{ "value": 100, itemStyle: { normal: { color: "#24D8E7" }, emphasis: { color: "#24D8E7" } } }] }, { tooltip: { show: false }, name: '刻度', type: 'gauge', radius: '83%', z: 1, min: 0, max: 1, center: ['50%','60%'], splitNumber: 5, //刻度数量 startAngle: 180, endAngle: 0, axisLine: { show: true, lineStyle: { width: 5, color: [ [0.12, '#E71A6D'], [0.35, '#F88168'], [0.63, '#FBF76B'], [0.8, '#7AD4DF'], [1, '#70C27E'], ] } }, //仪表盘轴线 axisLabel: { show: false }, //刻度标签。 axisTick: { show: true, lineStyle: { color: 'auto', width: 0 }, length: -15 }, //刻度样式 splitLine: { show: true, length: 0, lineStyle: { color: 'auto', width: 2 } }, //分隔线样式 detail: { show: false }, pointer: { show: false } }, { name: '本期', type: 'gauge', radius: '80%', min: 0, max: 1, center: ['50%','60%'], data: [{ value: 0.89, name: '本期' }], splitNumber: 12, //刻度数量 startAngle: 180, endAngle: 0, z: 5, axisLine: { show: true, lineStyle: { width: 0, color: [ [0.12, '#E71A6D'], [0.35, '#F88168'], [0.63, '#FBF76B'], [0.8, '#7AD4DF'], [1, '#70C27E'], ] } }, //仪表盘轴线 axisLabel: { show: true, color: '#fff', fontSize:20, distance: -70, formatter:function(params){ var value = params.toFixed(2) if(value == 0.00){ return '危' }else if(value == 0.25){ return '差' }else if(value == 0.50){ return '中' }else if(value == 0.75){ return '良' }else if(value == 1.00){ return '优' }else{ return '' } } }, //刻度标签。 axisTick: { splitNumber: 10, show: true, lineStyle: { color: 'auto', width: 2 }, length: 20, }, //刻度样式 splitLine: { show: true, length: 25, lineStyle: { color: 'auto', width: 5 } }, //分隔线样式 "itemStyle": { "normal": { "color": "#24D8E7" //指针颜色 } }, pointer: { width: 10, length: '80%' }, detail: { formatter: function(params){ return (params*100).toFixed(0) + '%' }, fontSize: 50, color: "#fff", offsetCenter: ['0%', '-35%'] }, title: { offsetCenter: ['0', '-60%'], fontSize: 40, color: "#fff", show: true }, }] }; 

一个数据的简单仪表盘

option = { radius: '80%', series: [{ name: '业务指标', type: 'gauge', startAngle: 210, endAngle: -30, min: 0, max: 1, splitNumber: 1000, borderRadius: '10px', roundCap: true, radius: '60%', // 可调整该属性修改圆环大小 center: ["50%", "50%"], progress: { show: true, width: 50, itemStyle: { opacity: 1, color: new echarts.graphic.LinearGradient( 0, 0, 1, 0, [{ offset: 0, color: 'rgba(100,200,228,1)' }, { offset: .5, color: 'rgba(48,62,245,1)' }, { offset: 1, color: 'rgba(48,62,245,1)' }] ) } }, itemStyle: { color: '#58D9F9', shadowColor: 'rgba(0,138,255,0.45)', shadowBlur: 10, shadowOffsetX: 2, shadowOffsetY: 2 }, axisLine: { // roundCap: true, lineStyle: { width: 50, color: [ [0.2, { type: 'linear', x: 0.5, y: 0.5, r: 0.5, colorStops: [{ offset: 0, color: '#F5F5F5' // 0% 处的颜色 }, { offset: 1, color: '#DADADC' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } ], [0.4, { type: 'linear', x: 0.5, y: 0.5, r: 0.5, colorStops: [{ offset: 0, color: '#F5F5F5' // 0% 处的颜色 }, { offset: 1, color: '#DADADC' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }], [0.6, { type: 'linear', x: 0.5, y: 0.5, r: 0.5, colorStops: [{ offset: 0, color: '#F5F5F5' // 0% 处的颜色 }, { offset: 1, color: '#DADADC' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }], [0.8, { type: 'linear', x: 0.5, y: 0.5, r: 0.5, colorStops: [{ offset: 0, color: '#F5F5F5' // 0% 处的颜色 }, { offset: 1, color: '#DADADC' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }], [1, { type: 'linear', x: 0.5, y: 0.5, r: 0.5, colorStops: [{ offset: 0, color: '#F5F5F5' // 0% 处的颜色 }, { offset: 1, color: '#DADADC' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }] ] } }, pointer: { width: 0, }, axisTick: { length: 12, lineStyle: { color: 'auto', width: 0 } }, splitLine: { length: 20, lineStyle: { color: 'auto', width: 0 } }, axisLabel: { color: '#', fontSize: 20, distance: -60, fontFamily: 'Source Han Sans SC', formatter: function (value) { } }, title: { offsetCenter: [0, '-30%'], fontSize: 40, fontFamily: 'DIN Alternate', color: '#1678FF' }, detail: { fontSize: 60, fontFamily: 'DIN Alternate', offsetCenter: [0, '15%'], valueAnimation: true, formatter: function (value) { return Math.round(value * 1000); }, color: '#1678FF' }, data: [{ value: 0.735, name: '芝麻分' }] }] }; 

朴实仪表盘

讯享网option = { backgroundColor: '#0E1327', title: [{ text: 'CPU利用率', left: '3%', top: '5%', textStyle: { color: '#fff', fontSize:18, fontFamily: 'cuhei', fontWeight: 300, } },{ text: 'CPU利用率', left: 'center', top: '65%', textStyle: { color: '#3488db', fontSize:22, fontFamily: 'cuhei', fontWeight: 600, } }], series: [ { type: 'gauge', axisLine: { lineStyle: { width: 15, color: [ [ 0.2, '#42e4fb' ], [ 0.8, '#3488db' ], [ 1, '#f9387f' ] ], } }, radius: '50%', markPoint: { // 仪表盘指针圆 animation: false, silent: true, data: [{ x: '50%', y: '50%', symbol: 'circle', symbolSize: 40, itemStyle: { color: 'auto', }, }, { x: '50%', y: '50%', symbol: 'circle', symbolSize: 20, itemStyle: { color: '#fff' }, }], }, pointer: { // 仪表盘指针 //icon:'none', width: 10, length: "60%", itemStyle: { color: 'auto' }, }, axisTick: { distance: 0, length: 5, lineStyle: { color: 'auto', width: 2 } }, splitLine: { distance: 0, length: 15, lineStyle: { color: 'auto', width: 4 } }, axisLabel: { color: '#3488db', distance: 30, fontSize: 20 }, detail: { //valueAnimation: true, formatter: '{value} %', color: 'white' }, data: [{ value: 85 }] }, ] }; 

简单仪表盘 100%