向 echarts图标工具栏toolbox中加入自定义图标/图形
来源:互联网 发布:广东人吃福建人 知乎 编辑:程序博客网 时间:2024/06/16 17:52
首先参考一下官方文档:
接下来自己动手:
<!--chart1--><script type="text/javascript"> var myChart = echarts.init(document.getElementById('chart1')); // 显示标题,图例和空的坐标轴 myChart.setOption({ tooltip: { show: true, trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'line' // 默认为直线,可选为:'line' | 'shadow' } }, toolbox: { show: true, feature: { myTool: { show: true, title: '自定义扩展方法', icon:'image://images/more.png', z:'999', left:'center', onclick: function (){ alert('myToolHandler2') } } } }, legend: { data: ['住户', '租户'], right: '10%', top: '20px' }, itemStyle: { normal: {}, emphasis: { barBorderWidth: 1, shadowBlur: 10, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'rgba(0,0,0,0.5)' } }, title: { text: '居住人群统计', x: 'center' }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { data: [] }, yAxis:{}, series: [{ name: '住户', type: 'bar', stack: '总量', label: { normal: { show: true, position: 'insideRight' } }, data: [320, 302, 301, 334, 390, 330, 320] }, { name: '租户', type: 'bar', stack: '总量', label: { normal: { show: true, position: 'insideRight' } }, data: [120, 132, 101, 134, 90, 230, 210] }] }) // myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画 var xAxisData = []; var render = []; var residnet = []; $.ajax({ type : "post", // async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行) url: "http://10.1.17.11:8090/safecity/examineEquipment", url: "http://10.1.17.11:8090/safecity/examineEquipment", data : { //需要读取 }, dataType : "json", //返回数据形式为json success : function(result) { //请求成功时执行该函数内容,result即为服务器返回的json对象 } })</script>注意红色部分,容易出错的是黄色高亮处的代码——
格式必须是: icon : ' image://(图片/图标的路径) '
效果图如下:
右上角的‘点点点’就是我从font-awesome上找来的图标。
阅读全文
1 0
- 向 echarts图标工具栏toolbox中加入自定义图标/图形
- 添加自定义工具栏图标
- 自定义工具栏图标
- UEditor自定义工具栏图标
- MFC开发中工具栏自定义图标问题
- QT 如何向工具栏中添加漂亮的图标
- ueditor自定义工具栏,图标,弹窗
- echarts中toolbox的颜色设置及图标的自适应,随屏幕大小而变化图标大小
- 自定义控件在ToolBox中的图标[转]
- ECharts自定义toolbox中增加自定义按钮
- DataGrid中加入图标
- 在菜单中加入图标
- 在ListView中加入图标
- 在IE中加载工具栏图标
- mfc中图标工具栏的实现
- mac 工具栏中删除项目,图标
- QT界面中工具栏图标无法显示
- echars中toolbox工具栏增加自定义按钮与事件
- 理解javascript原型链
- Relation Network笔记
- Ubuntu 更改文件夹权限及chmod详细用法
- JAVA 单列集合总结
- Elasticsearch基础教程
- 向 echarts图标工具栏toolbox中加入自定义图标/图形
- Java代理(二) 静态代理
- Java接口新特性
- CF——Codeforces Round #428 (Div. 2)C. Journey
- C++ 字符串分割
- usb协议
- js传参数的时候用[],而不是用.
- HDU 6129 Just do it(杨辉三角+lucas \ 记忆化dp)
- javaI的O