B Bootstrap组件实验室
返回目录首页

ECharts 图表 Apache ECharts 5.6.0

百度开源的功能强大的图表库。本页使用 jsDelivr 固定 echarts@5.6.0，通过 echarts.init() + setOption() 渲染，容器固定高度，移动端自适应。

官方对照 官方没有

Bootstrap 官方不含图表能力；与同目录的 Chart.js 相比，一句话定位差异：Chart.js 轻量上手快、适合常规图表，ECharts 功能更强、大数据量与复杂交互（地图、热力图、数据集）场景更优。

对比维度Bootstrap 官方ECharts 5.6.0
能力定位界面组件框架，不含图表功能全面的国产图表库，开箱即用 20+ 种图表
核心特性—柱状 / 折线 / 饼图之外，另有地图、热力图、关系图、数据集与动画渲染引擎
依赖与体积自带 bundle单个 echarts.min.js 约 1MB（gzip 后约 350KB），零依赖
与 Chart.js 差异—Chart.js 更轻更快上手；ECharts 配置能力强，大数据量、复杂可视化更优
适用场景—企业大屏、复杂报表、需要地图 / 联动 / 大量数据点的可视化
说明 
本小节为对照说明，无示例代码。

引入方式

通过 jsDelivr 固定 echarts@5.6.0 的完整包 dist/echarts.min.js，加载后全局挂 echarts 对象；容器需给定高度（如 300px）。

HTML 引入 
<!-- body 末尾引入（完整包，全局挂 echarts） -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>

<!-- 准备一个固定高度的容器 -->
<div id="main" style="height:300px;"></div>

<script>
  var chart = echarts.init(document.getElementById('main'));
  chart.setOption({ xAxis: {}, yAxis: {}, series: [{ type: 'bar' }] });
</script>

柱状图

echarts.init() 初始化容器，再用 setOption() 传入柱状图配置；以下为上半年各产品线销售额对比。

HTML + JS 示例 
<div id="echartsBar" style="height:300px;"></div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
<script>
var chart = echarts.init(document.getElementById('echartsBar'));
chart.setOption({
  title: { text: '上半年各产品线销售额（万元）' },
  tooltip: {},
  xAxis: {
    type: 'category',
    data: ['硬件产品', '云服务', '技术支持', '培训咨询', '软件订阅']
  },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: [320, 520, 180, 90, 410],
    itemStyle: { color: '#0d6efd' }
  }]
});
</script>

饼图

series.type: 'pie' 渲染支出结构占比，自带图例与 tooltip 引导线。

HTML + JS 示例 
<div id="echartsPie" style="height:300px;"></div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
<script>
var chart = echarts.init(document.getElementById('echartsPie'));
chart.setOption({
  title: { text: '公司年度支出结构' },
  tooltip: { trigger: 'item' },
  legend: { bottom: 0 },
  series: [{
    type: 'pie',
    radius: '55%',
    data: [
      { value: 420, name: '人员成本' },
      { value: 180, name: '服务器与带宽' },
      { value: 120, name: '市场推广' },
      { value: 80,  name: '办公与差旅' },
      { value: 60,  name: '其他' }
    ]
  }]
});
</script>