怎么查看echartjspanel使用方法的使用步骤

来源：蜘蛛抓取(WebSpider) 时间：2017-10-23 03:40 标签： echarts做地图步骤
echarts基本用法_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
echarts基本用法
北京动力节点教育科技有限公司，自2009成立...|
总评分0.0|
&&echarts基本用法
阅读已结束，下载本文需要
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩1页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢ECharts 简单的使用过程，完美的图形展示
时间： 20:28:54
&&&& 阅读：1536
&&&& 评论：
&&&& 收藏：0
标签：& 最近开发项目时要做图形报表，网上找了些东西，还是觉得ECharts靠谱，具备诸多优点，功能强大，图表完美，兼容性也比较好，基于html5动画渲染。
& 官网的demo中是写得比较全了，但很多用不到的东西直接影响了代码质量，下面我就饼图为例给描述一下echarts的基本使用过程，部分代码是我从demo中裁剪之后的代码
& echarts饼状图实现步骤：
1，在简单的html中引入js文件，该js文件可以去官网下载
&&&&&meta&charset="utf-8"&&&
&&&&&title&Charts&demo&/title&&&
&&&&&&script&src="js/esl.js"&&/script&&&
2，为图形准备容器
&&&&&meta&charset="utf-8"&&&
&&&&&title&Charts&demo&/title&&&
&&&&&&script&src="js/esl.js"&&/script&&&
&&&&&div&id="picturePlace"&&/div&&
这也就是在html中添加一个div给定id，图表就会显示在该div中。
3，模块导入js，这点比较关键，它直接决定了出什么图形
&&&&&meta&charset="utf-8"&&&
&&&&&title&Charts&demo&/title&&&
&&&&&&script&src="js/esl.js"&&/script&&&
&&&&&div&id="picturePlace"&&/div&&&
&&&&&&script&type="text/javascript"&&&
&&&&&&&&//&路径配置
&&&&&&&&require.config({&&
&&&&&&&&&&&&paths:{&&&
&&&&&&&&&&&&&&&&‘echarts‘&:&‘js/echarts‘,&&
&&&&&&&&&&&&&&&&‘echarts/chart/pie‘&:&‘js/echarts‘&&
&&&&&&&&&&&&}&&
&&&&&&&&});&&
&&&&&/script&&&
4，添加显示数据
&&&&&meta&charset="utf-8"&&&
&&&&&title&Charts&demo&/title&&&
&&&&&&script&src="js/esl.js"&&/script&&&
&&&&&div&id="picturePlace"&&/div&&&
&&&&&&script&type="text/javascript"&&&
&&&&&&&&//&路径配置&&
&&&&&&&&require.config({&&
&&&&&&&&&&&&paths:{&&&
&&&&&&&&&&&&&&&&‘echarts‘&:&‘js/echarts‘,&&
&&&&&&&&&&&&&&&&‘echarts/chart/pie‘&:&‘js/echarts‘&&
&&&&&&&&&&&&}&&
&&&&&&&&});&
&&&&&&&&&//&使用&&
&&&&&&&&require(&&
&&&&&&&&&&&&[&&
&&&&&&&&&&&&&&&&‘echarts‘,&&
&&&&&&&&&&&&&&&&‘echarts/chart/pie‘&//&使用柱状图就加载bar模块，按需加载&&
&&&&&&&&&&&&],&&
&&&&&&&&&&&&function&(ec)&{&&
&&&&&&&&&&&&&&&&//&基于准备好的dom，初始化echarts图表&&
&&&&&&&&&&&&&&&&var&myChart&=&ec.init(document.getElementById(‘&span&style="font-family:SimS"&picturePlace&/span&&span&style="font-family:FangSong_GB2312;"&‘&/span&));&&
&&&&&&&&&&&&&&&&option&=&{&&
&&&&&&&&&&&&&&&&&&&&&&&&title&:&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&text:&‘某站点用户访问来源‘,&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&subtext:&‘纯属虚构‘,&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&x:‘center‘&&
&&&&&&&&&&&&&&&&&&&&&&&&},&&
&&&&&&&&&&&&&&&&&&&&&&&&tooltip&:&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&trigger:&‘item‘,&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&formatter:&"{a}&&br/&{b}&:&{c}&({d}%)"&&
&&&&&&&&&&&&&&&&&&&&&&&&},&&
&&&&&&&&&&&&&&&&&&&&&&&&legend:&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&orient&:&‘vertical‘,&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&x&:&‘left‘,&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&data:[‘直接访问‘,‘邮件营销‘,‘联盟广告‘,‘视频广告‘,‘搜索引擎‘]&&
&&&&&&&&&&&&&&&&&&&&&&&&},&&
&&&&&&&&&&&&&&&&&&&&&&&&toolbox:&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&show&:&true,&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&feature&:&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&mark&:&{show:&true},&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&dataView&:&{show:&true,&readOnly:&false},&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&restore&:&{show:&true},&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&saveAsImage&:&{show:&true}&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&&&&&&&&&&&},&&
&&&&&&&&&&&&&&&&&&&&&&&&calculable&:&true,&&
&&&&&&&&&&&&&&&&&&&&&&&&series&:&[&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&name:‘访问来源‘,&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&type:‘pie‘,&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&radius&:&‘55%‘,&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&center:&[‘50%‘,&‘60%‘],&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&data:[&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{value:335,&name:‘直接访问‘},&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{value:310,&name:‘邮件营销‘},&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{value:234,&name:‘联盟广告‘},&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{value:135,&name:‘视频广告‘},&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{value:1548,&name:‘搜索引擎‘}&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&]&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&&&&&&&&&&&]&&
&&&&&&&&&&&&&&&&&&&&};&
&&&&&&&&&&&&&&&&//&为echarts对象加载数据&&&
&&&&&&&&&&&&&&&&myChart.setOption(option);&&&
&&&&&&&&&&&&}&&
&&&&&&&&);&&
&&&&&/script&&&
5，运行程序显示结果
& 以上是饼状图的实现步骤，其他图形可以以此案例去官网参考即可，其中的option尤为关键。。。
标签：原文地址：http://my.oschina.net/u/2407504/blog/489305
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)

我要回帖

更多关于 echarts做地图步骤 的文章

 

随机推荐