Echarts使用文档.docx

1.新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。!DOCTYPE htmlheadmetacharset=utf-8titleECharts/title/headbody!-- 为ECharts准备一个具备大小（宽高）的Dom --divid=mainstyle=height:400px/div/body2.新建script标签引入模块化单文件echarts.js!DOCTYPE htmlheadmetacharset=utf-8titleECharts/title/headbody!-- 为ECharts准备一个具备大小（宽高）的Dom --divid=mainstyle=height:400px/div!-- ECharts单文件引入 --scriptsrc=/build/dist/echarts.js/script/body3.新建script标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js）!DOCTYPE htmlheadmetacharset=utf-8titleECharts/title/headbody!-- 为ECharts准备一个具备大小（宽高）的Dom --divid=mainstyle=height:400px/div!-- ECharts单文件引入 --scriptsrc=/build/dist/echarts.js/scriptscripttype=text/javascript// 路径配置require.config({ paths:{echarts:/build/dist}});/script/body4. script标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成!DOCTYPE htmlheadmetacharset=utf-8titleECharts/title/headbody!-- 为ECharts准备一个具备大小（宽高）的Dom --divid=mainstyle=height:400px/div!-- ECharts单文件引入 --scriptsrc=/build/dist/echarts.js/scriptscripttype=text/javascript// 路径配置require.config({ paths:{echarts:/build/dist}});// 使用 require([echarts,echarts/chart/bar// 使用柱状图就加载bar模块，按需加载],function(ec){// 基于准备好的dom，初始化echarts图表varmyChart=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/body5.浏览器中打开echarts.html，就可看到以下效果6.饼图示例代码浏览器中打开，就可看到以下效果!DOCTYPE htmlhead meta charset=gb2312 titleECharts/title/headbody !-- 为ECharts准备一个具备大小（宽高）的Dom -- div id=main style=height:400px/div !-- ECharts单文件引入 -- script src=/build/dist/echarts.js/script script type=text/javascript // 路径配置require.config({ paths: {echa