echarts实现圆形极坐标柱状图图表效果代码

代码语言:html

所属分类:图表

代码描述:echarts实现圆形极坐标柱状图图表效果代码

代码标签: 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