Toggle navigation
饼图-柱状图
By
落***青
2020-12-18 06:07:31
脚本
16
21
作品使用的第三方脚本
数据管理
上传数据
支持小于 5M 任意格式（csv, xlsx, json, xml, ...）的数据文件
上传后可以通过生成的文件链接异步获取托管的数据。
历史数据
0 条
无历史数据
代码修改记录
信息提示
保存作品
对当前截图不满意？你还可以
上传本地截图
重新截图
作品名称
作品描述
标签
geo
grid
legend
markLine
markPoint
bar
effectScatter
line
lines
map
timeline
title
toolbox
tooltip
visualMap
作品默认版本
最新
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
20:11:45
图表已生成
整理代码
刷新
代码
option ={ backgroundColor:'#fff', "title": [ { "text": "", "subtext": "", "x": "center" }, { "text": "", "subtext": "", "x": "25%", "y": "46%", "textStyle": { "color": "yellow", "fontSize": 12 } } ], legend:{ zlevel:3, bottom:0, left:'10%', textStyle:{ padding:[0,50,0,0] }, selectedMode:false, data:[ { name:'集中上报时间段', icon:'rect' }, { name:'超过20:00上报', icon:'rect' } ] }, "tooltip": { "trigger": "item", "backgroundColor": "rgba(50,50,50,0)", "textStyle": { "color": "red", "fontWeight": "bold" }, "formatter": "{d}%" }, "grid": { "left": "70%", "right": "8%", "bottom": "3%", "containLabel": true }, "xAxis": { "type": "value", "show": false, "boundaryGap": [ 0, 0.01 ], "axisTick": { "show": false }, "axisLine": { "show": false }, "splitLine": { "show": false } }, "yAxis": { "show": true, "type": "category", // "data": null, data:['13:00～13:59','14:00～14:59','15:00～15:59','16:00～16:59','17:00～17:59'], "axisTick": { "show": false }, "axisLine": { "show": false }, "axisLabel": { "show": true } }, "dataZoom": [], "series": [ { "name": "最外圈圆环01", "type": "pie", "radius": [ "84%", "82%" ], "center": [ "24%", "50%" ], "data": [ { "value": 335 } ], "hoverAnimation": false, "itemStyle": { "normal": { "color": { "type": "linear", "x": 0, "y": 0, "x2": 0, "y2": 1, "colorStops": [ { "offset": 0, "color": "#2e5ab3" }, { "offset": 1, "color": "#58f2fe" } ], "global": false } } }, "label": { "normal": { "position": "inner", "show": false } }, "animation": false, "tooltip": {} }, { "name": "上报数据时间点01", "type": "pie", "radius": [ "20%", "57%" ], "roseType": "area", "color": [ "#3681f4" ], "data": [ { "name": "0~1", "value": 2 }, { "name": "1~2", "value": 2 }, { "name": "2~3", "value": 2 }, { "name": "3~4", "value": 2 }, { "name": "4~5", "value": 2 }, { "name": "5~6", "value": 2 }, { "name": "6~7", "value": 2 }, { "name": "7~8", "value": 2 }, { "name": "8~9", "value": 2 }, { "name": "9~10", "value": 2 }, { "name": "10~11", "value": 2 }, { "name": "11~12", "value": 2 }, { "name": "12~13", "value": 0, "itemStyle": { "color": "transparent" } }, { "name": "13~14", "value": 2 }, { "name": "14~15", "value": 4 }, { "name": "15~16", "value": 3 }, { "name": "集中上报时间段", "value": 5, "itemStyle": { "color": "yellow" } }, { "name": "17~18", "value": 2 }, { "name": "18~19", "value": 2 }, { "name": "19~20", "value": 3 }, { "name": "超过20:00上报", "value": 2, itemStyle:{ color:'#f00' } }, { "name": "21~22", "value": 0, "itemStyle": { "color": "transparent" } }, { "name": "22~23", "value": 1 }, { "name": "23~24", "value": 1 } ], "avoidLabelOverlap": false, "center": [ "24%", "50%" ], "labelLine": { "normal": { "show": false } }, "label": { "normal": { "position": "inner", "show": false } }, "itemStyle": { "normal": { "shadowBlur": 10, "shadowOffsetX": 0, "shadowColor": "rgba(0, 0, 0, 0.5)", "color": null }, "emphasis": { "shadowBlur": 10, "shadowOffsetX": 0, "shadowColor": "rgba(0, 0, 0, 0.5)" } }, "tooltip": { "textStyle": { "color": "#fff" } } }, { "name": "外第二圈圆环时间点刻度01", "type": "gauge", "min": 0, "max": 24, "startAngle": 90, "endAngle": 449.9, "radius": "84%", "splitNumber": 24, "clockwise": false, "animation": false, "center": [ "24%", "50%" ], "detail": { "show": false }, "axisTick": { "show": false }, "axisLine": { "lineStyle": { "color": [ [ 0.25, "#1b376c" ], [ 1, "#1b376c" ] ], "width": "40%", "shadowColor": "#0d4b81", "shadowBlur": 40, "opacity": 1 } }, "splitLine": { "length": 4, "lineStyle": { "color": "#ffffff", "width": 2 } }, "axisLabel": { "textStyle": { "color": "#fff", "fontWeight": 700, "fontSize": 12, }, formatter:function(params){ if(params % 2 == 0 && params != 24){ return params; } } }, "itemStyle": { "normal": { "color": "green", "width": 2 } } }, { "name": "内圆盘外第三层01", "type": "gauge", "min": 0, "max": 24, "startAngle": 90, "endAngle": 449.9, "radius": "57%", "splitNumber": 24, "clockwise": false, "animation": false, "center": [ "24%", "50%" ], "detail": { "show": false }, "axisTick": { "show": false }, "axisLine": { "lineStyle": { "color": [ [ 0.25, "#18447e" ], [ 1, "#18447e" ] ], "width": "10%", "opacity": 0.8 } }, "splitLine": { "show": true, "length": "89%", "lineStyle": { "color": "#eee", "width": "0.2" } }, "axisLabel": { "show": false, "textStyle": { "color": "#fb5310", "fontWeight": 700 } }, "itemStyle": { "normal": { "color": "green", "width": 2, "borderWidth": 3 } } }, { "name": "最里面饼图01", "type": "pie", "radius": "20%", "center": [ "24%", "50%" ], "data": [ { "value": 335, "name": "20%" } ], "hoverAnimation": false, "itemStyle": { "normal": { "color": "#1b376c" } }, "label": { "normal": { "position": "center", "show": true, "color": "yellow" } }, "animation": false, "tooltip": {} }, // 右侧排序 { zlevel:1, type:'bar', xAxisIndex:0, yAxisIndex:0, barWidth:30, itemStyle:{ color:'#add5ff' }, label:{ show:true, position:'right', color:'#333', formatter:function(params){ return params.data.perVal + '%' } }, data:[ { name:'13:00～13:59', value:2, perVal:5 }, { name:'14:00～14:59', value:20, perVal:50 }, { name:'15:00～15:59', value:2, perVal:5 }, { name:'16:00～16:59', value:2, perVal:5 }, { name:'17:00～17:59', value:2, perVal:5 } ] }, { type:'bar', xAxisIndex:0, barGap:'-100%', yAxisIndex:0, barWidth:30, itemStyle:{ color:'#f5f5f5' }, label:{ show:true, position:'right', color:'#333', formatter:function(params){ return params.data.reaVal + '个'; } }, data:[{ name:'', value:40, reaVal:2 },{ name:'', value:40, reaVal:20 },{ name:'', value:40, reaVal:2 },{ name:'', value:40, reaVal:2 },{ name:'', value:40, reaVal:2 }] } ] }
