Question 348115 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Apache Echarts – custom toolbox feature not showing

In Apache Echarts I want to add a custom button to the toolbox. According to the examples and documentation it must be done in this way. But nothing shows up.

  toolbox: {
  right: '20%', 
  feature: {
      dataZoom: {},
      saveAsImage: {},
      magicType: {},
      myCustBut:{
        show: true,
        title: 'test option',
        icon: 'path://"../images/Europa.png"', // tried different options here
        onclick: function() {alert("Test")}
      }
  }
},

This is what I see:
This is my result

What am I missing here?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The icon property was wrong. In my case this had to be:

    icon: 'image://../images/farm.png',

    That did the trick.


  2. 0

    It seems like the icon property needs to contain a valid input for anything to show up.

    The documentation states that valid inputs are either an image url (not a lokal path) prefixed with image:// or an svg path prefixed with path://.

    Example:

    option = {
  toolbox: {
    right: '20%',
    feature: {
      saveAsImage: {},
      myCustBut1: {
        title: 'test option 1',
        icon: 'image://https://echarts.apache.org/en/images/favicon.png',
        onclick: function () {
          alert('Test 1');
        }
      },
      myCustBut2: {
        title: 'test option 2',
        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
        onclick: function () {
          alert('Test 2');
        }
      }
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search