Toggle navigation
不等宽柱状图
By
设***空
2019-11-19 03:15:30
脚本
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
图表已生成
整理代码
刷新
代码
let line = [1, 2, 5, 5, 8, 9, 9, 15, 16, 22, 25, 30, 33, 45, 60, 61, 62, 65, 75, 80, 88, 90, 99, 100] option = { xAxis: [{ type: 'value', min: 0, max: 100 }, { type: 'value', show: false, min: 0, max: 100 }, { type: 'value', show: false, min: 0, max: 100 }, { type: 'value', show: false, min: 0, max: 100 }, { type: 'value', show: false, min: 0, max: 100 }, { type: 'value', show: false, min: 0, max: 100 }, { type: 'value', show: false, min: 0, max: 100 }, { type: 'value', show: false, min: 0, max: 100 }, { type: 'value', show: false, min: 0, max: 100 }, { type: 'value', show: false, min: 0, max: 100 }, { type: 'value', show: false, min: 0, max: 100 }, { type: 'value', show: false, min: 0, max: 100 }], yAxis: [{ type: 'value', show: false, min: 0, max: 100 }], series: [{ data: line, type: 'line', step: 'end', areaStyle: { color: '#2db7f5' }, symbol: 'none', lineStyle: { opacity: 0 }, }, { data: [0, 0, 0, 0, { name: '日本', value: 8 }, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], type: 'bar', barWidth: 8, barCategoryGap: 0, label: { show: true, position: 'top', formatter: '{b} {c}' }, itemStyle: { color: '#2d8cf0', borderColor: '#fff', borderWidth: 1 }, xAxisIndex: 1, }, { data: ['', '', '', '', '', '', '', '', 16, '', '', '', '', '', '', '', '', '', '', '', '', '', ''], type: 'bar', barWidth: 16, barCategoryGap: 0, itemStyle: { color: '#2d8cf0', borderColor: '#fff', borderWidth: 1 }, xAxisIndex: 2, }, { data: ['', '', '', '', '', '', '', '', '', 22, '', '', '', '', '', '', '', '', '', '', '', '', ''], type: 'bar', barWidth: 22, itemStyle: { color: '#2d8cf0', borderColor: '#fff', borderWidth: 1 }, xAxisIndex: 3, }, { data: ['', '', '', '', '', '', '', '', '', '', 25, '', '', '', '', '', '', '', '', '', '', '', ''], type: 'bar', barWidth: 25, itemStyle: { color: '#2d8cf0', borderColor: '#fff', borderWidth: 1 }, xAxisIndex: 4, }, { data: ['', '', '', '', '', '', '', '', '', '', '', '', '', 40, '', '', '', '', '', '', '', '', ''], type: 'bar', barWidth: 40, itemStyle: { color: '#2d8cf0', borderColor: '#fff', borderWidth: 1 }, xAxisIndex: 5, }, { data: ['', '', '', '', '', '', '', '', '', '', '', '', '', 42, '', '', '', '', '', '', '', '', ''], type: 'bar', barWidth: 42, itemStyle: { color: '#2d8cf0', borderColor: '#fff', borderWidth: 1 }, xAxisIndex: 6, }, { data: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', 45, '', '', '', '', '', '', '', ''], type: 'bar', barWidth: 45, itemStyle: { color: '#2d8cf0', borderColor: '#fff', borderWidth: 1 }, xAxisIndex: 7, }, { data: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 60, '', '', '', '', '', '', ''], type: 'bar', barWidth: 60, itemStyle: { color: 'blue', borderColor: '#fff', borderWidth: 1 }, xAxisIndex: 8, }, { data: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 75, '', '', '', ''], type: 'bar', barWidth: 75, itemStyle: { color: '#2d8cf0', borderColor: '#fff', borderWidth: 1 }, xAxisIndex: 9, }, { data: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 82, '', ''], type: 'bar', barWidth: 82, itemStyle: { color: '#2d8cf0', borderColor: '#fff', borderWidth: 1 }, xAxisIndex: 10, }, { data: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', { name: '中国', value: 90 }, ''], type: 'bar', barWidth: 90, label: { show: true, formatter: '{b} {c}' }, itemStyle: { color: 'blue', borderColor: '#fff', borderWidth: 1 }, xAxisIndex: 11, }] };
