向 echarts图标工具栏toolbox中加入自定义图标/图形

谁践踏了优雅 2022-05-19 01:36 682阅读 0赞

原文出处:https://blog.csdn.net/singsingasong/article/details/77254687

参考:http://echarts.baidu.com/echarts2/doc/example/toolbox.html
关键行: icon:’image://images/more.png’,

  1. <!--chart1-->
  2. <script type="text/javascript">
  3. var myChart = echarts.init(document.getElementById('chart1'));
  4. // 显示标题,图例和空的坐标轴
  5. myChart.setOption({
  6. tooltip: {
  7. show: true,
  8. trigger: 'axis',
  9. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  10. type: 'line' // 默认为直线,可选为:'line' | 'shadow'
  11. }
  12. },
  13. toolbox: {
  14. show: true,
  15. feature: {
  16. myTool: {
  17. show: true,
  18. title: '自定义扩展方法',
  19. icon:'image://images/more.png',
  20. z:'999',
  21. left:'center',
  22. onclick: function (){
  23. alert('myToolHandler2')
  24. }
  25. }
  26. }
  27. },
  28. legend: {
  29. data: ['住户', '租户'],
  30. right: '10%',
  31. top: '20px'
  32. },
  33. itemStyle: {
  34. normal: {},
  35. emphasis: {
  36. barBorderWidth: 1,
  37. shadowBlur: 10,
  38. shadowOffsetX: 0,
  39. shadowOffsetY: 0,
  40. shadowColor: 'rgba(0,0,0,0.5)'
  41. }
  42. },
  43. title: {
  44. text: '居住人群统计',
  45. x: 'center'
  46. },
  47. grid: {
  48. left: '3%',
  49. right: '4%',
  50. bottom: '3%',
  51. containLabel: true
  52. },
  53. xAxis: {
  54. data: []
  55. },
  56. yAxis:{},
  57. series: [{
  58. name: '住户',
  59. type: 'bar',
  60. stack: '总量',
  61. label: {
  62. normal: {
  63. show: true,
  64. position: 'insideRight'
  65. }
  66. },
  67. data: [320, 302, 301, 334, 390, 330, 320]
  68. },
  69. {
  70. name: '租户',
  71. type: 'bar',
  72. stack: '总量',
  73. label: {
  74. normal: {
  75. show: true,
  76. position: 'insideRight'
  77. }
  78. },
  79. data: [120, 132, 101, 134, 90, 230, 210]
  80. }]
  81. })
  82. // myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
  83. var xAxisData = [];
  84. var render = [];
  85. var residnet = [];
  86. $.ajax({
  87. type : "post",
  88. // async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行) url: "http://10.1.17.11:8090/safecity/examineEquipment",
  89. url: "http://10.1.17.11:8090/safecity/examineEquipment",
  90. data : {
  91. //需要读取
  92. },
  93. dataType : "json", //返回数据形式为json
  94. success : function(result) {
  95. //请求成功时执行该函数内容,result即为服务器返回的json对象
  96. }
  97. })
  98. </script>

注意红色部分,容易出错的是黄色高亮处的代码——

格式必须是: icon : ‘ image://(图片/图标的路径) ‘

效果图如下:

右上角的‘点点点’就是我从font-awesome上找来的图标。

发表评论

表情:
评论列表 (有 0 条评论,682人围观)

还没有评论,来说两句吧...

相关阅读