Echarts工具栏(自定义按钮)
来源:互联网 发布:python元年 编辑:程序博客网 时间:2024/06/05 07:36
myEcharts.js
var myChart = echarts.init(document.getElementById('main'));var option = { title : { text: '某地区蒸发量和降水量', subtext: '纯属虚构' }, tooltip : { trigger: 'axis' }, legend: { data:['蒸发量','降水量'] }, toolbox: { padding:30, show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true}, //敲黑板,重点!!! myTool2:{//自定义按钮 danielinbiti,这里增加,selfbuttons可以随便取名字 show:true,//是否显示 title:'查看全部', //鼠标移动上去显示的文字 icon:'path://M525.4 721.2H330.9c-9 0-18.5-7.7-18.5-18.1V311c0-9 9.3-18.1 18.5-18.1h336.6c9.3 0 18.5 9.1 18.5 18.1v232.7c0 6 8.8 12.1 15 12.1 6.2 0 15-6 15-12.1V311c0-25.6-25.3-48.9-50.1-48.9h-335c-26.2 0-50.1 23.3-50.1 48.9v389.1c0 36.3 20 51.5 50.1 51.5h197.6c6.2 0 9.3-7.5 9.3-15.1 0-6-6.2-15.3-12.4-15.3zM378.8 580.6c-6.2 0-12.3 8.6-12.3 14.6s6.2 14.6 12.3 14.6h141.4c6.2 0 12.3-5.8 12.3-13.4 0.3-9.5-6.2-15.9-12.3-15.9H378.8z m251.6-91.2c0-6-6.2-14.6-12.3-14.6H375.7c-6.2 0-12.4 8.6-12.4 14.6s6.2 14.6 12.4 14.6h240.8c6.2 0.1 13.9-8.5 13.9-14.6z m-9.2-120.5H378.8c-6.2 0-12.3 8.6-12.3 14.6s6.2 14.6 12.3 14.6h240.8c7.7 0 13.9-8.6 13.9-14.6s-6.2-14.6-12.3-14.6z m119.4 376.6L709 714.1c9.2-12 14.6-27 14.6-43.2 0-39.4-32.1-71.4-71.8-71.4-39.7 0-71.8 32-71.8 71.4s32.1 71.4 71.8 71.4c16.3 0 31.3-5.4 43.4-14.5l31.6 31.5c3.8 3.8 10 3.8 13.8 0 3.8-3.8 3.8-10 0-13.8z m-88.8-23.6c-28.3 0-51.3-22.8-51.3-51s23-51 51.3-51c28.3 0 51.3 22.8 51.3 51s-23 51-51.3 51z', //图标 onclick:function() {//点击事件,这里的option1是chart的option信息 $('.big').css('display','block'); } } } }, calculable : true, xAxis : [ { type : 'category', data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], yAxis : [ { type : 'value' }/*双y轴, { type: 'value', name: '温度', min: 0, max: 210, interval: 30, axisLabel: { formatter: '{value} °C' } }*/ ], grid:{ top:'80',/*标题与柱状图的距离*/ }, series : [ { name:'蒸发量', type:'bar', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } }, { name:'降水量', type:'bar', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], markPoint : { data : [ {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18}, {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3} ] }, markLine : { data : [ {type : 'average', name : '平均值'} ] } } ]};myChart.setOption(option);//变大的echartsvar myChart2 = echarts.init(document.getElementById('main2'));var option2 = { title : { text: '某地区蒸发量和降水量', subtext: '纯属虚构' }, tooltip : { trigger: 'axis' }, legend: { data:['蒸发量','降水量'] }, calculable : true, xAxis : [ { type : 'category', data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], yAxis : [ { type : 'value' }/*双y轴, { type: 'value', name: '温度', min: 0, max: 210, interval: 30, axisLabel: { formatter: '{value} °C' } }*/ ], grid:{ top:'80',/*标题与柱状图的距离*/ }, series : [ { name:'蒸发量', type:'bar', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } }, { name:'降水量', type:'bar', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], markPoint : { data : [ {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18}, {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3} ] }, markLine : { data : [ {type : 'average', name : '平均值'} ] } } ]};myChart2.setOption(option2);
css
.big{ /*变大后的样式*/ top: 5px; margin-top: 10px; margin:0 auto; height: 700px;width:100%; z-index:998; display:none; background-color:whitesmoke ; position: absolute; } .btn{ /*关闭按钮*/ margin:0 auto; width: 30px; font-size: 12px; border-radius: 3px; /*圆角*/ background-color: rgb(194, 53, 49); }
html
<!-- 原图 --> <div id="main" style="margin:0 auto;height: 500px;width: 600px;"></div> <!-- 变大的div --> <div class="big"> <div id="main2" style="margin:0 auto;height: 700px;width: 800px;"></div> <div class="btn" onclick="btn1Close()" >关闭</div> </div>
需要引入的文件
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="echarts.min.js" type="text/javascript" charset="utf-8"></script> <script src="myEcharts.js" type="text/javascript" charset="utf-8"></script> //关闭按钮事件 <script type="text/javascript"> function btn1Close(){ $(".big").css('display','none'); } </script>
效果图:
图标是svg格式,用记事本打开path标签里面的d
阅读全文
0 0
- Echarts工具栏(自定义按钮)
- ALV自定义工具栏按钮
- eclipse扩展自定义工具栏按钮
- 自定义jQuery Mobile工具栏按钮
- ECharts自定义toolbox中增加自定义按钮
- 向 echarts图标工具栏toolbox中加入自定义图标/图形
- google工具栏中的自定义搜索按钮
- (转)FCKeditor如何自定义增加工具栏按钮
- 为Fckeditor添加自定义工具栏按钮
- 为自定义工具栏按钮添加消息响应函数
- b-jui 自定义工具栏按钮的问题
- echarts 自定义按钮控制数据的显示
- 五、菜单栏和工具栏(主工具栏上创建按钮)
- UEditor工具栏上自定义按钮、图标、事件、窗口页面
- echars中toolbox工具栏增加自定义按钮与事件
- 自定义配置UEditor 工具栏上的按钮列表
- UIToolBar (API+自定义工具栏)
- iOS自定义工具栏(Toolbar)
- Call to undefined function sftp\ssh2_connect();安装PHP ssh2扩展
- 页面返回键链接
- C++知识体系
- Nodejs Events模块
- oracle导入与导出
- Echarts工具栏(自定义按钮)
- 基于Web的资产库
- vue中的数组监测
- sql的解析过程
- python的垃圾回收
- 洛谷 P1736 创意吃鱼法
- 利用python re提取文件中的块内容(多行)
- [容斥][dp][卡特兰数]登山
- Android数据库表格创建报错