目标

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


demo


搭建环境

  • 新建文件夹 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
64 声望6 粉丝

今天,你快乐吗?