可视化 | 【echarts】多组条形图&堆叠条形图（toolbox应用）

• 【echarts】渐变条形+折线复合图

• 【echarts】金字塔图

• 【echarts】中国地图热力图

• 【echarts】气泡图
  
  

• html和css同 【echarts】渐变条形+折线复合图

📚js

🐇整体框架

🐇整体框架

1. 使用echarts.init方法初始化了一个 ECharts 实例，指定了一个 div 元素作为图表的容器。
2. 定义图表的配置项option，其中包括了图表的标题、提示框、x 轴、y 轴、数据系列等等。
3. 通过myChart.setOption将配置项应用到echarts实例。
4. 绑定事件处理函数myChart.resize以便让图表自适应新的窗口大小，确保图表在不同尺寸的屏幕上能够正确显示。

   var myChart = echarts.init(document.getElementById('test1'));
   
   var option = {...};
   
   if (option && typeof option === 'object') {
       myChart.setOption(option);
   }
   window.addEventListener('resize', myChart.resize);
   

🐇option

• 标题、悬浮提示框、图例

  • 如果tooltip设置为空即tooltip:{}，则将会用默认的样式和行为。（为空为默认样式，如果干脆不写tooltip那就没有悬浮框效果了）。
  • 在默认情况下，tooltip 的行为会在鼠标悬停时触发，并显示该数据点的数值。会显示以下信息： ①数据项的名称（如果有） ②相关数据项的数值。至于样式，通常是一个半透明的浮动框，如下：
    
  • legend里data的内容和后续数据项配置的name对应。

  title: {
     text: '唐朝历年出生死亡人数统计', 
      left: 'center',
      top: '1%',
      textStyle: {
          color: '#333', 
          fontSize: 34, 
          fontWeight: 'bold', 
          fontFamily: 'KaiTi, serif'
      }
  },
  tooltip: {},
  legend: {
      data: ['出生', '死亡'],
      left: '20%',
      top: '5%',
      textStyle: {  
          fontSize: 22
      }
  }
  

• 神奇的brush和toolbox🔥

  • brush 是 ECharts 中的刷选功能，它允许用户在图表中进行区域选择或刷选。
    • toolbox: ['rect', 'clear']：配置了画笔（brush）工具栏中包含的功能按钮。‘rect’ 表示矩形选框，‘clear’ 表示清除选框。这样用户在图表上就可以使用画笔工具在 x 轴上进行区域选取。
    • 除了 ‘rect’ 和 ‘clear’，ECharts 中还有其他一些可用的画笔（brush）类型，例如：‘lineX’：横向刷选 ； ‘lineY’：纵向刷选 ；‘keep’：保持之前的选框 ；‘unKeep’：清除之前的选框。

• toolbox 是 ECharts 中的工具箱功能，提供了一系列交互式的工具按钮，如刷新图表、保存为图片等。

  • feature：用于配置工具箱中的功能按钮。
  • magicType：其中的 type 属性用于配置图表切换类型的功能按钮。
    通过这样的配置，用户可以在图表中使用 brush 工具在 x 轴进行区域选择，并且可以在工具箱中切换图表类型。

  brush: {
     toolbox: ['rect', 'clear'],
      xAxisIndex: 0
  },
  toolbox: {
      feature: {
          magicType: {
              type: ['stack', 'tiled'] 
          },
          saveAsImage: {},  // 添加保存为图片功能按钮
          dataView: {},      // 添加数据视图功能按钮
          restore: {}         // 添加刷新按钮
      }
  }
  

• X轴Y轴

  • 关注rotate属性，当坐标轴标签字体过大以至于信息显示不全时，可以通过适当旋转来使其完全显示。
    
    

  xAxis: {
       data: ['618年-668年','668年至718年', '718年至768年', '768年至818年', '818年至868年', '868年至907年'],
       name: '年份',
       nameTextStyle: {  
           color: '#333',  
           fontSize: 28  
       },
       axisLine: { 
           lineStyle: {
               color: '#151d29',
               width: 2
           },
       },
       axisLabel: {
           textStyle: {
               color: '#333', 
               fontSize: 28
           },
           rotate: 12,  
       }
   },
   yAxis: {
       name: '人数',
       nameTextStyle: {  
           color: '#333',  
           fontSize: 28
       },
       axisLine: {
           lineStyle: {
               color: '#151d29',
               width: 2
           }
       },
       axisLabel: {
           textStyle: {
               color: '#333', 
               fontSize: 28
           }
       }
   }
  

• 数据系列配置：两组数据就命好名字，分别{}配置，中间,连接，整体[]包裹。

  series: [
     {
          name: '出生',
          type: 'bar',
          barWidth : '35%',
          barCategoryGap: '0', // 设置柱体无间隔
          stack: 'one',
          itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#3d8e86' },
                  { offset: 0.5, color: '#5da39d' },
                  { offset: 1, color: '#88bfb8' }
              ])
          },
          emphasis: {
              itemStyle: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(0,0,0,0.3)'
              }
          },
          data: [1693, 1813, 2568, 2739, 908, 26]
      },
      {
          name: '死亡',
          type: 'bar',
          barWidth : '35%',
          barCategoryGap: '0', 
          stack: 'one',
          showBackground: true,
          itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#d2a36c' },
                  { offset: 0.5, color: '#d5c8a0' },
                  { offset: 1, color: '#dfd6b8' }
              ])
          },
          emphasis: {
              itemStyle: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(0,0,0,0.3)'
              }
          },
          data: [6258, 9623, 15296, 16672, 17191, 7581]
      }
  ]
  

🐇字体大小设置总结

• 标题字体

  title: {
      textStyle: {
          fontSize: 34, 
      }
  }
  

• 坐标轴字体

  • 刻度字体

    xAxis: {
        axisLabel: {
            fontSize: 22
        }
    }
    

  • 坐标轴名称字体

    xAxis: {
    	name: '年份',
    	nameTextStyle: {  
    	    color: '#333',  
    	    fontSize: 22  
    	}
    }
    

• 标线字体

  markLine: {
      label: {
          fontSize: 22 
      }
  }
  

• legend字体

  legend: {
      textStyle: {  
          fontSize: 22
      }
  }
  

• 完整代码包