使用Apache ECharts同时绘制多个统计图表

目录

1、介绍

2、相关知识

3、代码

4、效果


🍃作者介绍:双非本科大三网络工程专业在读,阿里云专家博主,专注于Java领域学习,擅长web应用开发、数据结构和算法,初步涉猎Python人工智能开发和前端开发。

🦅主页:@逐梦苍穹

🍔所属专栏:前端

📕您的一键三连,是我创作的最大动力🌹

1 、介绍

echarts是一个比较好用的表格展示。通过不同的配置,就可以实现饼图,柱图以及折线图等。

方便数据展示。下面就是在同一个页面,通过配置文件创建四个表格的例子。

2 、相关知识

Apache ECharts:Apache ECharts | 一个数据可视化图表库

3 、代码

html 复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 1800px;height:900px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      var option = {
          title: [  // 指定各个表格的标题
              {text: '销售额', top: '5%', left: '30%'},
              {text: '订单量', top: '5%', left: '75%'},
              {text: '客单价', left: '30%', top: '50%'},
              {text: '动销率', left: '75%', top: '50%',},
          ],
          dataset: { // 指定数据源
              source:
                  [
                      ['type','销售额', '订单量', '客单价', '动销率'],
                  ].concat(
                      [
                          ['2019-01-01',100.0,20,4,30],
                          ['2019-01-02',110.0,21,5,30],
                          ['2019-01-03',120.0,22,6,30],
                          ['2019-01-04',140.0,23,7,30],
                          ['2019-01-05',150.0,24,8,30],
                          ['2019-01-06',160.0,25,9,30],
                      ]
                  )
          },
          grid: [ // 用来调整,各个表格的位置
              {top: '10%', bottom: '55%', width: '40%'},
              {top: '10%', bottom: '55%',left: '55%', width: '40%'},
              {top: '55%', width: '40%'},
              {top: '55%', left: '55%', width: '40%'},
          ],
          tooltip: {},
          legend: {},
          xAxis: [ // 用来配置横坐标的信息,gridIndex是标识针对的那个表格
              {type: 'category', gridIndex: 0, name: '日期', axisTick: {alignWithLabel: true}},
              {type: 'category', gridIndex: 1, name: '日期', axisTick: {alignWithLabel: true}},
              {type: 'category', gridIndex: 2, name: '日期', axisTick: {alignWithLabel: true}},
              {type: 'category', gridIndex: 3, name: '日期', axisTick: {alignWithLabel: true}},
          ],
          yAxis: [
              {type: 'value',gridIndex: 0, name: '金额($)'},
              {type: 'value',gridIndex: 1, name: '数量'},
              {type: 'value',gridIndex: 2, name: '金额($)'},
              {type: 'value',gridIndex: 3, name: '%'},
          ],
          series: [

              // 配置数据关系
              // stack用来做分组标记,同标记的数据,会在同一个表格显示
              // seriesLayoutBy 设置如何从dateset里面获取数据,这里按照列获取
              {type: 'line', stack:'1', xAxisIndex: 0, yAxisIndex: 0, seriesLayoutBy: 'column'},
              {type: 'bar', stack:'2', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'column'},
              {type: 'bar', stack:'3', xAxisIndex: 2, yAxisIndex: 2, seriesLayoutBy: 'column'},
              {type: 'line', stack:'4', xAxisIndex: 3, yAxisIndex: 3, seriesLayoutBy: 'column',
              label: {
                show: true,
                position: 'top',
                formatter: function (params) {
                  return params.value[4] + '%';
                },
              },},
          ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

4 、效果

相关推荐
程序员爱技术1 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子2 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘3 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie6 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js