echarts使用（一）

来源：互联网发布：手机编程序软件编辑：程序博客网时间：2024/04/25 15:58

项目中不少地方用到了图表来进行数据展示，所以系统的学习一下。

官网链接：

http://echarts.baidu.com/index.html

导入一个简单的饼图：

项目需要jquery.js 和 echarts的类库。我是直接从我们项目中拷贝出来的类库，然后去官网找了一个饼图的样例。

项目结构：

static---echarts---chart----各种图形的Js文件

---echarts.min.js

--js--- jquery.min.js

test01.html

文件内容：

<body><div id="pie" style="height:500px;">  </div></body><!-- 需要引用的JS --><script type="text/javascript" src="static/js/jquery.min.js"></script><script type="text/javascript" src="static/echarts/echarts.min.js"></script><script type="text/javascript">$(function(){showPie();});function showPie(){option = {title : {text: '某站点用户访问来源',subtext: '纯属虚构',x:'center'},tooltip : {  //气泡提示框，常用于展现更详细的数据trigger: 'item',//可选  axis:轴线触发， 折线图常用formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: { //图例orient : 'vertical',//布局方式 'horizontal' | 'vertical'x : 'left' ,  //水平安放位置data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']},  toolbox: {   //工具箱，右上角那个show : true,feature : {//启用功能mark : {show: true},dataView : {  //工具栏上的数据视图,可以直接往里面添加数据show: true,    title : '数据视图',   lang: ['数据视图', '关闭1', '刷新1'] },magicType : {//动态类型切换  又一种形状 切换为另一种形状show: true, type: ['pie', 'funnel'],title: { funnel: '漏斗图切换'},option: {funnel: {x: '15%',width: '50%',funnelAlign: 'left',max: 1548}}},restore : {show: true, title : '还原'},saveAsImage : {show: true,  title : '保存为图片', lang : ['点击保存']}}},calculable : true,//是否启用拖拽重计算的功能series : [   //不用类型 通用信息{name:'访问来源',type:'pie',radius :[ '70%','20%'],//半径，支持绝对值（px）和百分比，百分比计算比，min(width, height) / 2 * 75%，    // 传数组实现环形图，[内半径，外半径]center: ['50%', '60%'],//圆心位置//roseType:'radius',//显示样式;默认为null,南丁格尔玫瑰图模式，'radius'（半径）|'area'（面积）selectedMode:'multiple',//选中模式，点击的时候可以和整体分开 ，默认关闭可选single，multipledata:[//表类型不一样，格式也不一样{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}]}]};var chart = echarts.init($("#pie")[0]);chart.setOption(option);}</script>

效果展示：

阅读全文

1 0