web网页柱形图的创建-echarts

要想了解echarts，可以百度搜索echarts，进入它的官网看一下。本经验以柱形图为例讲解echarts的简单使用。

1. 首先下载echarts工具包，可以在官网下载，图中为下载后的echarts工具包的目录结构。

2. 测试echarts，新建文件夹test，将echarts-2.0.3/doc/example/www下的js拷贝到test下，并新建文件。

3. 编辑文件。首先导入echarts文件，因为我们只是测试柱状图所以只需要引入esl.js和echarts.js文件即可。

lt;script src"echarts/esl.js"gt;lt;/scriptgt;
lt;script src"echarts/echarts.js"gt;lt;/scriptgt;

4. 创建柱状图。首先创建柱状图的容器，如下所示：

lt;div id"main" style"height: 500px; border: 1px solid ccc; padding: 10px;"gt;lt;/divgt;

注意里面的id，下面会用到，另外要设定高度，否则柱状图不会显示。

5. 在容器中添加柱状图：

var myChart  (('main'));
var option  {
    title: {
        text: '柱状图示例'
    },
    tooltip: {},
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10]
    }]
};
(option);

6. OK，代码编写完成，我们双击文件，柱状图成功显示。

你可以根据显示对比一下script内容，找到编写柱状图的关键。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。