Echart图表入门

2024-06-19 20:48

文章标签 入门图表 echart

本文主要是介绍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);});
})