Echarts : Select nodes and childrens by search javascript function (RegExp) in a treemap graph

Viewed 130

I am migrating a treemap from protovis to echarts. You can find the old protovis treemap in this example : https://beep.ird.fr/acces/SOURIS-19.htm In that case, with a text box and a search function (regexp), it was possible to made a dynamic selection for same nodes (countries or continents). The search box look like this :

<div id="footer">
      <label for="search">search: </label>
      <input type="text" id="search" onkeyup="update(this.value)">
    </div>

The function in the protovis script is :

/** Updates the visualization and count when a new query is entered. */
function update(query) {
  if (query != re) {
    re = new RegExp(query, "i");
    count();
    vis.render();
  }

If i have a echarts treemap like this exemple how can i do the same ? [I search the chain "orange" for all nodes and show more or less brilliant the nodes that contain "orange" as name.]

Best regards

Pier Luigi ROSSI

option = {
  series: {
    type: "treemap",
    data: [{
      name: "Food",
      children: [{
        value: 3,
        name: "Fruit",
        children: [{
          value: 1,
          name: "Apple"
        }, {
          value: 2,
          name: "Orange",
          children: [{
            name: "Seville Orange",
            value: 1
          }, {
            name: "Blood Orange",
            value: 1
          }]
        }]
      }, {
        value: 9,
        name: "Meat",
        children: [{
          value: 6,
          name: "Beaf",
          children: [{
            name: "Sirloin",
            value: 1
          }, {
            name: "Rib",
            value: 1
          }, {
            name: "Chuck",
            value: 1
          }, {
            name: "Shank",
            value: 1
          }]
        }, {
          value: 2,
          name: "Chicken",
          children: [{
            name: "Wings",
            value: 1
          }]
        }, {
          name: "Breast",
          value: 1
        }]
      }],
      visibleMin: 0
    }, {
      value: 6,
      name: "Drinks",
      children: [{
        value: 3,
        name: "Wine",
        children: [{
          name: "USA",
          value: 2
        }, {
          name: "Europe",
          children: [{
            name: "Germany",
            value: 1
          }]
        }]
      }, {
        name: "Soft Drink",
        children: [{
          value: 3,
          name: "Juice",
          children: [{
            name: "Apple Juice",
            value: 1
          }, {
            name: "Orange Juice",
            value: 2
          }]
        }]
      }]
    }, {
      value: 6,
      name: "Fashion",
      children: [{
        name: "Clothing",
        children: [{
          name: "Shirts",
          value: 1
        }, {
          name: "Jackets",
          value: 3,
          children: [{
            name: "Men",
            value: 1
          }, {
            name: "Woman",
            value: 1
          }]
        }, {
          value: 2,
          name: "Coats",
          children: [{
            name: "Men",
            value: 1
          }, {
            name: "Woman",
            value: 1
          }]
        }]
      }]
    }, {
      name: "Computers",
      children: [{
        name: "Components",
        value: 4,
        children: [{
          name: "Barebones",
          value: 1
        }, {
          value: 2,
          name: "External",
          children: [{
            name: "Hard Drives",
            value: 2
          }]
        }, {
          name: "Monitors",
          value: 1
        }]
      }, {
        value: 3,
        name: "Other",
        children: [{
          name: "USB",
          value: 1
        }, {
          name: "Cases"
        }, {
          name: "Sound Cards",
          value: 1
        }]
      }]
    }],
    levels: [{
      childrenVisibleMin: 1.5
    }]
  }
}
0 Answers
Related