一款非常实用的图表插件工具echarts。首先贴上官网地址http://echarts.baidu.com/，截取了官网实例的一个图，可以看到官方提供的图表类型非常的丰富，也有详细的使用文档。
官网截图
下面简单介绍echarts的使用
第一步：下载官网的echarts源代码
第二步：创建一个项目，页面中引入echarts.js，并且创建一个元素用来初始化图表
<!DOCTYPE html>
<html>
<head>
<title>echarts</title>
</head>
<script type="text/javascript" src="js/echarts.js"></script>
<body>
<div id="echarts" style="width: 600px;height:400px;"></div>
</body>
</html>
第三步：初始化与数据配置（图表的配置项可以在官网实例中 找到自己合适的图表点开复制里面的配置参数即可），如下：
<script type="text/javascript">
//初始化容器 init()
var myChart = echarts.init(document.getElementById('echarts'));
// 指定图表的配置项和数据
var option = {
color:['#999'],
xAxis: { //X轴
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7'], //X轴文字项
axisLabel:{
color:"#666" //X轴文字颜色
},
},
yAxis: { //Y轴，注意 如果Y轴是数据的话 那不需要进行每项设置，会根据下面设置的数据进行自动展示数据组
type: 'value',
axisLabel:{
color:"#666"
},
},
series: [{ //图标数据展示
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar' //图表类型 bar 柱状图
}]
};
// 设置数据 setOption
myChart.setOption(option);
</script>
官方文档：在文档的配置项中，可以看到对图表的详细配置参数，比如下图X坐标轴的配置项
图表参数截图
最后附上我上面贴的代码的效果图
demo效果图
网友评论