可视化 | 【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

• 标题、悬浮框

  title: {
      text: '唐代人物享年数据分布',
      left: 'center',
      top: '1%',
      textStyle: {
          color: '#333', 
          fontSize: 34, 
          fontWeight: 'bold', 
          fontFamily: 'KaiTi, serif'
      }
  },
  tooltip: {
      trigger:'axis',
      formatter: function (params) {
          return params[0].value[0] + '岁：' + params[0].value[1] + '（人）';
      }
  }
  

• X轴Y轴
  • splitLine用于配置轴线的分隔线。lineStyle 用于指定分隔线的样式，type: 'dashed' 表示分隔线的类型为虚线。
  • axisLabel 配置坐标轴刻度标签的样式和显示内容。设置 fontSize: 22 表示标签的字体大小为 22px。
  • 当 scale 属性设置为 true 时，表示使用线性坐标轴，即坐标轴会根据数据的值进行线性缩放和展示。这意味着坐标轴会根据数据的最大值和最小值来自动缩放坐标轴的范围，以便更好地展示数据的分布情况。

  xAxis: {
    type: 'value',
      splitLine: {
          lineStyle: {
              type: 'dashed'
          }
      },
      axisLabel: {
          fontSize: 22
      },
  },
  yAxis: {
      type: 'value',
      splitLine: {
          lineStyle: {
              type: 'dashed'
          }
      },
      axisLabel: {
          fontSize: 22 
      },
      scale: true
  }
  

• 数据系列的配置
  • 指定数据系列的type，echarts就自动生成对应的图表了。关于echarts的type：
    • 折线图（line）：用于显示数据随连续变量变化的趋势。
    • 柱状图（bar）：用于比较不同类别的数据大小。
    • 饼图（pie）：用于展示数据的占比情况。
    • 雷达图（radar）：用于展示多变量的数据对比。
    • 地图（map）：用于展示地理区域的数据分布。
    • 散点图（scatter）：用于表示两个变量之间的关系。
    • 箱型图（boxplot）：用于展示一组数据的分散情况。
    • 热力图（heatmap）：用于显示数据的密集程度。
  • symbolSize和 itemStyle
    • symbolSize 是用来设置每个数据项散点标记的大小函数，因为散点图中的每个数据项可能具有不同的大小，所以这是一个可由数据决定的动态属性。
    • itemStyle主要用于设置散点图的图形样式，包括阴影效果、颜色和高亮样式等。这些是应用于整个系列的样式设置，对所有的散点标记生效。
    • symbolSize用于数据驱动的动态设置，而itemStyle用于静态的整体样式配置。
  • markLine ：添加标线。type属性代表标线的类型，可以是平均值、最大值、最小值等。lineStyle用于设置标线的线条样式，可以指定颜色、宽度等属性。而label则用于设置标线的标签样式，包括是否显示、字体大小等。

  series: [ 
      {
          name: '人数', 
          data: [ // 数据项，[[x1, y1], [x2, y2], ...] 
              [2, 1],
              [3, 1],
              // ... 
          ],
          type: 'scatter', 
          symbolSize: function (data) { 
              // 参照data[1]人数数值设置散点标记的大小
              return Math.sqrt(data[1]) * 5.6; 
          },
          itemStyle: { 
          	// 阴影模糊大小
              shadowBlur: 10,  
              // 阴影颜色及透明度
              shadowColor: 'rgba(190, 210, 187, 0.6)',  
              // 阴影垂直偏移
              shadowOffsetY: 5,  
              // 通过径向渐变设置图形颜色
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ 
                  {
                      offset: 0,
                      color: '#3d8e86'  
                  },
                  {
                      offset: 1,
                      color: '#88bfb8'  
                  }
              ]),
              emphasis: {  
                  color: 'rgba(200, 107, 55, 0.6)' 
              }
          },
          markLine: {  
              data: [  
                  {type: 'average', name: '平均值'}  
              ],
              lineStyle: {  
                  color: '#a04c3b'  
              },
              label: {  
                  fontSize: 22 
              }
          }
      }
  ]
  

🐇字体大小设置总结

• 标题字体

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

• 坐标轴字体

  xAxis: {
      axisLabel: {
          fontSize: 22
      }
  }
  

• 标线字体

  markLine: {
      label: {
          fontSize: 22 
      }
  }
  

• 完整代码包