百度echarts柱状图（二）

百度echarts柱状图（二）

echart是百度官方出品的前端图表工具

获取 ECharts

你可以通过以下几种方式获取 ECharts。

http://echarts.baidu.com/index.html

从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。

在 ECharts 的GitHub上下载最新的release版本，解压出来的文件夹里的dist目录里可以找到最新版本的 echarts 库。

通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”

cdn 引入，你可以在cdnjs，npmcdn或者国内的bootcdn上找到 ECharts 的最新版本。

引入 ECharts

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

创建一个柱状图

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

然后就可以通过echarts.init方法初始化一个 echarts 实例

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

通过setOption方法生成一个简单的柱状图

setOption 中就是制定了我们柱状图的各项指标

option = {

title: {

text: 'ECharts柱状图'

},

tooltip: {},

legend: {

data:['销量']

},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},

series: [{

name: '销量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

};

完整的代碼如下圖

最終的運行出來的效果圖如下