生活随笔
收集整理的這篇文章主要介紹了
【Echarts】——上手Demo
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、首先，新建一個echaets.html文件，為Echarts準備一個具備大小(寬高)的Dom。
[html]?view plain
?copy <span?style="font-family:Microsoft?YaHei;font-size:14px;"><!DOCTYPE?html>?? <head>?? ????<meta?charset="utf-8">?? ????<title>ECharts</title>?? </head>?? ?? <body>?? ?????? ????<div?id="main"?style="height:400px"></div>?? </body></span>??
2、新建<script>標簽引入模塊化單文件echarts.js
[html]?view plain
?copy <span?style="font-family:Microsoft?YaHei;font-size:14px;"><!DOCTYPE?html>?? <head>?? ????<meta?charset="utf-8">?? ????<title>ECharts</title>?? </head>?? <body>?? ?????? ????<div?id="main"?style="height:400px"></div>?? ?????? ????<script?src="http://echarts.baidu.com/build/dist/echarts.js"></script>?? </body></span>??
3、新建<script>標簽中為模塊加載器配置echarts和所需圖表的路徑（相對路徑為從當前頁面鏈接到echarts.js）
[html]?view plain
?copy <span?style="font-family:Microsoft?YaHei;font-size:14px;"><!DOCTYPE?html>?? <head>?? ????<meta?charset="utf-8">?? ????<title>ECharts</title>?? </head>?? <body>?? ?????? ????<div?id="main"?style="height:400px"></div>?? ?????? ????<script?src="http://echarts.baidu.com/build/dist/echarts.js"></script>?? ????<script?type="text/javascript">?? ????????//?路徑配置?? ????????require.config({?? ????????????paths:?{?? ????????????????echarts:?'http://echarts.baidu.com/build/dist'?? ????????????}?? ????????});?? ????</script>?? </body></span>??
4、<script>標簽內動態加載echarts和所需圖表，回調函數中可以初始化圖表并驅動圖表的生成，option見API & Doc
[html]?view plain
?copy <span?style="font-family:Microsoft?YaHei;font-size:14px;"><!DOCTYPE?html>?? <head>?? ????<meta?charset="utf-8">?? ????<title>ECharts</title>?? </head>?? <body>?? ?????? ????<div?id="main"?style="height:400px"></div>?? ?????? ????<script?src="http://echarts.baidu.com/build/dist/echarts.js"></script>?? ????<script?type="text/javascript">?? ????????//?路徑配置?? ????????require.config({?? ????????????paths:?{?? ????????????????echarts:?'http://echarts.baidu.com/build/dist'?? ????????????}?? ????????});?? ?????????? ????????//?使用?? ????????require(?? ????????????[?? ????????????????'echarts',?? ????????????????'echarts/chart/bar'?//?使用柱狀圖就加載bar模塊，按需加載?? ????????????],?? ????????????function?(ec)?{?? ????????????????//?基于準備好的dom，初始化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);??? ????????????}?? ????????);?? ????</script>?? </body></span>??
5、瀏覽器中打開echarts.html，就可看到以下效果
總結
以上是生活随笔為你收集整理的【Echarts】——上手Demo的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
