echarts实现圆形极坐标柱状图图表效果代码
代码语言:html
所属分类:图表
代码描述:echarts实现圆形极坐标柱状图图表效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } #chart-container { position: relative; height: 100vh; overflow: hidden; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.5.4.2.js"></script> </head> <body> <div id="chart-container"></div> <script > var dom = document.getElementById('chart-container'); var myChart = echarts.init(dom, 'dark', { renderer: 'canvas', useDirtyRect: false }); var app = {}; var option; const data = [ [5000, 10000, 6785.71], [4000, 10000, 6825], [3000, 6500, 4463.33], [2500, 5600, 3793.83], [2000, 4000, 3060], [2000, 4000, 3222.33], [2500, 4000, 3133.33], [1800, 4000, 3100], [2000, 3500, 2750], [2000, 3000, 2500], [1800, 3000, 2433.33], [2000, 2700, 2375], [1500, 2800, 2150], [1500, 2300, 2100], [1600, 3500, 2057.14], [1500, 2600, 2037.5], [1500, 2417.54, 1905.85], [1500, 2000, 1775], [1500, 1800, 1650]]; // prettier-ignore const cities = ['北京', '上海', '深圳', '广州', '苏州', '杭州', '南京', '福州', '青岛', '济南', '长春', '大连', '温州', '郑州', '武汉', '成都', '东莞', '沈阳', '烟台']; const barHeight = 50; option = { title: { text: 'How expensive is it to rent an apartment in China?', subtext: 'Data from https://www.numbeo.com' }, legend: { show: true, top: 'bottom', data: ['Range', 'Average'] }, grid: { top: 100 }, angleAxis: { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0