本文主要是介绍Echart图表入门，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1、Echart是什么？
Enterprise Charts的缩写，商业级数据图表，一个纯Javascript的图表库。更多的内容可以参考网上的资料
2、使用步骤
a、下载开发包
官网地址：http://echarts.baidu.com/
所需文件：\echarts-2.2.7\build\dist
b、html页面引入需要的js文件并准备放图表的div（一定要设置大小）
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>The Chart</title><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script><script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="../js/dist/echarts.js"></script> //这个js用来绘制图表<script type="text/javascript" src="../js/chart.js"></script> //引入Echart开发包
</head>
<body>
<div id="main" style="height: 400px;width: 400px"> //这个div用来放图表</div>
</body>
</html>c、JavaScript绘制图表
echart.js
$(function(){
//配置Echart路径require.config({paths: {echarts:'../js/dist'}});require(['echarts','echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],function (ec) {// 基于准备好的dom（即html页面中的div），初始化echarts图表var myChart = ec.init(document.getElementById('main'));var option = {tooltip: {show: true},legend: {data:['销量']},xAxis : [{type : 'category',data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]}],yAxis : [{type : 'value'}],series : [{"name":"销量","type":"bar","data":[5, 20, 40, 10, 10, 20]}]};// 为echarts对象加载数据
myChart.setOption(option);});
})d、效果图
这篇关于Echart图表入门的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
