Echart图表入门
生活随笔
收集整理的這篇文章主要介紹了
Echart图表入门
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1、Echart是什么？
Enterprise Charts的縮寫(xiě)，商業(yè)級(jí)數(shù)據(jù)圖表，一個(gè)純Javascript的圖表庫(kù)。更多的內(nèi)容可以參考網(wǎng)上的資料
2、使用步驟
a、下載開(kāi)發(fā)包
官網(wǎng)地址：http://echarts.baidu.com/
所需文件：\echarts-2.2.7\build\dist
b、html頁(yè)面引入需要的js文件并準(zhǔn)備放圖表的div（一定要設(shè)置大小）
<!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> //這個(gè)js用來(lái)繪制圖表<script type="text/javascript" src="../js/chart.js"></script> //引入Echart開(kāi)發(fā)包 </head> <body> <div id="main" style="height: 400px;width: 400px"> //這個(gè)div用來(lái)放圖表</div> </body> </html>c、JavaScript繪制圖表
echart.js
$(function(){//配置Echart路徑require.config({paths: {echarts:'../js/dist'}});require(['echarts','echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載 ],function (ec) {// 基于準(zhǔn)備好的dom（即html頁(yè)面中的div），初始化echarts圖表var myChart = ec.init(document.getElementById('main'));var option = {tooltip: {show: true},legend: {data:['銷(xiāo)量']},xAxis : [{type : 'category',data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]}],yAxis : [{type : 'value'}],series : [{"name":"銷(xiāo)量","type":"bar","data":[5, 20, 40, 10, 10, 20]}]};// 為echarts對(duì)象加載數(shù)據(jù) myChart.setOption(option);}); })
d、效果圖
?
轉(zhuǎn)載于:https://www.cnblogs.com/fuchuanzhipan1209/p/6236825.html
總結(jié)
以上是生活随笔為你收集整理的Echart图表入门的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 手机版本高于xcode，xcode的快速
- 下一篇： Topcoder SRM570 900