37Echarts - 柱状图(极坐标系下的堆叠柱状图)

本文涉及的产品
云原生数据库 PolarDB 分布式版,标准版 2核8GB
简介: 37Echarts - 柱状图(极坐标系下的堆叠柱状图)
效果图

源代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      var option;
      var 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]
      ];
      var cities = ['北京', '上海', '深圳', '广州', '苏州', '杭州', '南京', '福州', '青岛', '济南', '长春', '大连', '温州', '郑州', '武汉', '成都', '东莞', '沈阳', '烟台'];
      var barHeight = 50;
      option = {
        angleAxis: {},
        radiusAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四'],
          z: 10
        },
        polar: {},
        series: [{
          type: 'bar',
          data: [1, 2, 3, 4],
          coordinateSystem: 'polar',
          name: 'A',
          stack: 'a'
        }, {
          type: 'bar',
          data: [2, 4, 6, 8],
          coordinateSystem: 'polar',
          name: 'B',
          stack: 'a'
        }, {
          type: 'bar',
          data: [1, 2, 3, 4],
          coordinateSystem: 'polar',
          name: 'C',
          stack: 'a'
        }],
        legend: {
          show: true,
          data: ['A', 'B', 'C']
        }
      };
      myChart.setOption(option);
    </script>
  </body>
</html>
相关实践学习
快速体验PolarDB开源数据库
本实验环境已内置PostgreSQL数据库以及PolarDB开源数据库:PolarDB PostgreSQL版和PolarDB分布式版,支持一键拉起使用,方便各位开发者学习使用。
目录
相关文章
|
7月前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
259 0
263Echarts - 3D 折线图(三维折线图正交投影)
263Echarts - 3D 折线图(三维折线图正交投影)
146 0
|
算法 测试技术 C++
C++算法:柱状图中最大的矩形
C++算法:柱状图中最大的矩形
|
7月前
|
NoSQL 数据库 Python
PyQt学习(二)-----图形的建立(柱状图,折线图,堆叠柱状图,饼图)
PyQt学习(二)-----图形的建立(柱状图,折线图,堆叠柱状图,饼图)
129 1
|
7月前
【统计图】Echarts实现多条折线图渐变堆叠效果
【统计图】Echarts实现多条折线图渐变堆叠效果
|
数据可视化
echarts画有三角形柱形的柱状图
echarts画有三角形柱形的柱状图
283 0
|
前端开发
【前端图表】echarts实现散点图x轴时间轴
【前端图表】echarts实现散点图x轴时间轴
149 0
36Echarts - 柱状图(极坐标系下的堆叠柱状图)
36Echarts - 柱状图(极坐标系下的堆叠柱状图)
64 0
38Echarts - 柱状图(极坐标系下的堆叠柱状图)
38Echarts - 柱状图(极坐标系下的堆叠柱状图)
144 0
46Echarts - 柱状图(堆叠条形图)
46Echarts - 柱状图(堆叠条形图)
98 0