ECharts 学习笔记01, 柱状图

2019年9月10日 157次阅读 来源: FrozenMap

目标

使用 ECharts 绘制简单的柱状图, 示例如下

《ECharts 学习笔记01, 柱状图》

搭建环境

  • 新建文件夹 note01, 并新建 index.html, index.css, index.css 文件
  • 获取 echarts
    下载源代码版本, 保存为 ./note01/echarts.js

  • 至此, note01 的目录结构应该是这样的

    ./note01/
 |---index.html
 |---index.js
 |---index.css
 |---echarts.js

编写 index.html

  • 编写一个普通的 html5 文件即可, 然后引入我们的 js, css 文件

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>echarts note01</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <main></main>
</body>
<script src="echarts.js"></script>
<script src="index.js"></script>
</html>

编写 css 文件

  • 在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

    main{
    width: 600px;
    height: 400px;
}

编写 js 文件

  • 我们需要通过 echarts.init(domElement) 方法初始化一个 echarts 实例, 然后通过 setOption() 方法绘图。

    'use strict';
// 初始化 echarts 实例
var myEChart = echarts.init(document.getElementsByTagName('main')[0]);

// 设定图表的配置项和数据
var option = {
    title:{
        text: '柱状图'
    },
    tooltip:{

    },
    legend:{
        data:['销量']
    },
    xAxis:{
        data:['衬衫', '裤子', '袜子']
    },
    yAxis:{

    },
    series:[{
        name: '销量',
        type: 'bar',
        data: [5, 36, 20]
    }],
};

// 显示图表
myEChart.setOption(option);

小结

以上就是使用 ECharts 进行绘图的第一个例子。休息一下，马上开始下一次学习~

    原文作者：FrozenMap
    原文地址: https://segmentfault.com/a/1190000018628192
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞