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

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

源代码
<!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;
      option = {
        angleAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          z: 10
        },
        radiusAxis: {},
        polar: {},
        series: [{
          type: 'bar',
          data: [1, 2, 3, 4, 3, 5, 1],
          coordinateSystem: 'polar',
          name: 'A',
          stack: 'a'
        }, {
          type: 'bar',
          data: [2, 4, 6, 1, 3, 2, 1],
          coordinateSystem: 'polar',
          name: 'B',
          stack: 'a'
        }, {
          type: 'bar',
          data: [1, 2, 3, 4, 1, 2, 5],
          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分布式版,支持一键拉起使用,方便各位开发者学习使用。
目录
相关文章
|
9月前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
321 0
|
4月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
1051 0
|
6月前
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
181 0
|
7月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
608 0
|
8月前
|
JavaScript Apache 容器
如何使用ECharts制作一个简单的柱状图
如何使用ECharts制作一个简单的柱状图
105 0
|
9月前
【统计图】Echarts实现多条折线图渐变堆叠效果
【统计图】Echarts实现多条折线图渐变堆叠效果
|
9月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
4月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
146 1
|
5月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
6月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
606 1
微信小程序使用echarts图表(ec-canvas)

热门文章

最新文章