当前位置：首页 > news >正文

Echarts基础入门

news 来源：原创 2025/6/9 7:44:20

下载`echarts.js` 文件

选择 dist/echarts.js。

地址：echarts CDN by jsDelivr - A CDN for npm and GitHub

引入 Apache ECharts

在刚才保存 echarts.js 的目录新建一个 index.html 文件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>

绘制一个简单的图表

1.定义了 DOM 容器

准备一个DOM容器，需要给容器设置尺寸。

<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

2.通过echarts.init方法初始化一个 echarts 实例。

echarts.init:创建一个 ECharts 实例，返回echartsInstance，不能在单个容器上初始化多个 ECharts 实例。

var myChart = echarts.init(document.getElementById("main"));

3.指定图表的配置项和数据

var option = {
        color: [...],
        title: {
          text: "...",
        },
        tooltip: {},
        legend: {
          data: ["销量", "进货量", "库存"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
          {
            name: "进货量",
            type: "bar",
            data: [15, 30, 50, 40, 20, 30],
          },
          {
            name: "库存",
            type: "bar",
            data: [10, 10, 14, 30, 10, 10],
          },
        ],
      };