还记得我们初中时期学习的图表吗？那是当然好多呢，比如柱状图、扇形图、饼状图、折线图。而且一旦有统计题就会出现图形统计，我还记得每次的图形统计我都能做出来，对于当时的我那说，这样的题都是属于送分题。可现在要我使用浏览器画出图表可就没有那么简单咯，一起来看看吧！
制作ECharts图表的前期工作：
1、 获取echart插件echarts3-docs
2、 启动echart图表
3、 引入 ECharts 文件
4、 准备一个具有宽高的DOM容器
获取ECharts的方式：
1、 从官网下载界面选择需要的版本下载
2、 在ECaerts的github（社交编程及代码托管网站）上下载最新的release（发布）解压出的dist目录里找到最新版本echarts库
3、 使用nmp install echarts –save命令
4、 (http://echarts.baidu.com/tutorial.html#在 webpack 中使用 ECharts)下载路径
启用ECharts插件的注意点：
1、插件不可直接放在中文目录下面，建议直接放在D/E/F…的根目录下面 比如：D:\echarts
2、如果无法启动修改 D:\echarts3-docs\conf\nginx.conf文件里面的端口号
3、如果修改了端口号，访问地址将变为 http://127.0.0.1:端口号/echarts3-docs（把端口号替换成你修改的端口数字，注意注册端口号范围为1024~49151）
插件引入
< !DOCTYPE html>
< html>
< head>
< meta name=“viewport” content=“width=device-width” />
< !—引入路径是对应项目当中插件路径 -->
< script src=“echarts.min.js”></ script>
< /head>
</ html>
准备好的一个具有宽高的DOM容器
< body>
<!- 为 ECharts 准备一个具备大小（宽高）的Dom -->
< div id=“main” style=“width: 600px;height:400px;”>< /div>
< /body>
通过eecharts.init方法初始化一个echarts实例化并通过setOption 方法生成一个简单的柱状图
< script type=“text/javascript”>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(‘main’));
// 指定图表的配置项和数据
var option = {normal: { position: ‘right’ }};
option = {
title: { text: ‘柱状图版正负轴’, },
tooltip : { trigger: ‘axis’,
grid: { top: 80, bottom: 30 },
xAxis: { type : ‘value’, position: ‘top’,
splitLine: { lineStyle: {type:‘dashed’} },
}, }]
yAxis: { type : ‘category’,
data : [‘five’, ‘four’, ‘three’, ‘two’, ‘one’] },
series : [{ type:‘bar’, stack: ‘总量’, label: { normal: {show: true, }},
data:[ 0.5, {value: -0.4, label: labelRight}, 0.3, {value: -0.2, label: labelRight},0.1
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
< /script>
代码分析：
title标题组件，包含主标题和副标题。
title.text 主标题文本，支持使用 \n 换行。
tooltip提示框组件。
tooltip.trigger 触发类型。
grid直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。
grid.top grid 组件离容器上侧的距离。
grid.bottom grid 组件离容器下侧的距离。
xAxis 直角坐标系 grid 中的 x 轴，单个 grid 组件最多只能放上下两个 x 轴。
xAxis.position x 轴的位置。
xAxis.type坐标轴类型。
xAxis.splitLine 坐标轴在 grid 区域中的分隔线，默认显示。
xAxis.splitLine linestyle: 坐标轴在 grid 区域中的分隔线的样式
YAxis直角坐标系 grid 中的 y 轴，单个 grid 组件最多只能放左右两个 y 轴。
yAxis.type ‘category’ 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
yAxis.data[i]类目数据，在类目轴（type: ‘category’）中有效。
series[i]系列列表。每个系列通过 type 决定自己的图表类型
series[i]-bar柱状图通过柱形的高度来表现数据的大小，用于有至少一个类目轴的直角坐标系上。
series[i]-bar.stack 数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
series[i]-bar.data[i] 系列中的数据内容数组。数组项通常为具体的数据项。数据格式有下面几种情况
series[i]-bar.data[i].label单个柱条文本的样式设置。
series[i]-bar.data[i].value单个数据项的数值。
series[i]-bar.label.normal.show是否显示标签。