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);}); })
d、效果圖
?
轉載于:https://www.cnblogs.com/fuchuanzhipan1209/p/6236825.html
總結
以上是生活随笔為你收集整理的Echart图表入门的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 手机版本高于xcode，xcode的快速
- 下一篇： Topcoder SRM570 900