Recently, I did not update, because I suddenly felt that I did not have the motivation to update, as if I became lazy, and I did not write well, so I indulged myself all the time. But also know the importance of the resumption, especially to record the solution to the problem.
Bar chart expansion
Demand background
The project needs to draw an Echarts chart, which is a simple bar chart, but the product wants to be able to click on the hover area of the entire bar chart, that is, the blank area of a column after the hover can also be clicked.
Demand analysis
Mychart.on (‘click’, function(){}) is triggered on the column, but we can use another echarts method, getZr(), to listen for click events on the entire canvas. Unfortunately, There is no explanation or description of this method on the official website, so we have to learn the relevant API by ourselves
implementation
var data = [220.182.90.149.220];
var x_type = ['Monday'.'on Tuesday'.'on Wednesday'.'on Thursday.'on Friday'];
option = {
tooltip: {
trigger: 'axis',},xAxis: {
type: 'category'.data: x_type,
axisPointer: {
type: 'shadow',}},yAxis: {
type: 'value',},series: [{type: 'bar'.itemStyle: {
color: '#188df0'
},
data: data,
barGap: 0.barWidth: 20,}}; myChart.getZr().on('click'.function(param) {
// Get the pixel coordinates of the trigger point of the click
const pointInPixel = [param.offsetX, param.offsetY]
// Determine whether the given point is in the specified coordinate system or series
if (myChart.containPixel('grid', pointInPixel)) {
// Get the clicked X-axis subscript converted to logical coordinates
let xIndex = myChart.convertFromPixel({ seriesIndex: 0 },pointInPixel)[0]
// Do something else
console.log(xIndex)
}
})
/ / will be able to response to the click event, within the scope of the style is set to the mouse pointer -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
myChart.getZr().on('mousemove'.function(params) {
var pointInPixel = [params.offsetX, params.offsetY]
if (myChart.containPixel('grid', pointInPixel)) {
// Change the mouse style for this area to small hands
myChart.getZr().setCursorStyle('pointer')}})Copy the codeWhen implemented, it looks like this:
paramIs all the apis that trigger the event, you can get the coordinates of the click, and get the corresponding X-axis subscript through transformation.
other
There is no description of getZr() on the Echarts website, but there are descriptions of many other transformations
convertFromPixel
Finder is used to indicate which coordinate system to use for transformation. // In general, you can use index or ID or name to locate. finder: { seriesIndex? : number, seriesId? : string, seriesName? : string, geoIndex? : number, geoId? : string, geoName? : string, xAxisIndex? : number, xAxisId? : string, xAxisName? : string, yAxisIndex? : number, yAxisId? : string, yAxisName? : string, gridIndex? : number, gridId? : string, gridName? : string}, // The value to be converted is the pixel coordinate value, with the upper-left corner of the DOM node of the echarts instance as the coordinate point [0, 0]. Value: Array | the string / / the result of the transformation, into logical coordinates. => Array|stringCopy the codecontainPixel
// Finder is used to indicate which coordinate system or series to judge on. // In general, you can use index or ID or name to locate. finder: { seriesIndex? : number, seriesId? : string, seriesName? : string, geoIndex? : number, geoId? : string, geoName? : string, xAxisIndex? : number, xAxisId? : string, xAxisName? : string, yAxisIndex? : number, yAxisId? : string, yAxisName? : string, gridIndex? : number, gridId? : string, gridName? : string}, // The point to be judged is the pixel coordinate value, with the upper-left corner of the DOM node of the echarts instance as the coordinate [0, 0]. value: Array ) => booleanCopy the codeIt is currently supported to determine on these coordinates and series: Grid, Polar, Geo, serial-map, serial-graph, serial-pie. Determines whether a given point is in a specified coordinate system or series
Mychart.on (‘click’, function(){}) has the corresponding untying event handler mychart.off (‘click’). Mychart.getzr ().off(‘click’)
Line chart expansion
Demand analysis
The product wants to click a line on the line chart to trigger an event, not just at the inflection point of the line chart. I think of two ways to deal with this, as follows:
- Gets the click position and determines whether the click position is on a set of polylines
I tried this method, but it didn’t work, because I couldn’t get the set of all the points on a broken line, or there were too many points, so the idea was not very correct
- Get the click location, return the information about this point, look in the information, see if there is information that belongs to this line
So the final implementation is exactly this way, based, of course, on how getZr() gets click coordinates
Mychart.on (‘click’, function(){}) = getZr() {mychart.on (‘click’, function(){}) = getZr() {mychart.on (‘click’, function(){}
implementation
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email marketing'.'Affiliate advertising']},xAxis: {
type: 'category'.boundaryGap: false.data: ['Monday'.'on Tuesday'.'on Wednesday'.'on Thursday.'on Friday'.'on Saturday.'Sunday']},yAxis: {
type: 'value'
},
series: [{name: 'Email marketing'.type: 'line'.stack: 'total'.data: [120.132.101.134.90.230.210] {},name: 'Affiliate advertising'.type: 'line'.stack: 'total'.data: [220.182.191.234.290.330.310]]}}, myChart.getZr().on('click'.function(params) {
// Get the pixel coordinates
const pointInPixel = [params.offsetX, params.offsetY]
const { target, topTarget } = params
/ / click point click in line of the inflection point | | line
if(target? .z ===2|| topTarget? .z ===2) {
// Get the information about this broken line, that is, index
// If it is an inflection point, read target.seriesIndex directly
// If it is a point on a polyline, read the index of the topTarget object to continue looking for information about the parent
constaxs = target ? target.seriesIndex : topTarget.parent? .parent? .__ecComponentInfo? .indexconsole.log(axs)
}
})
/ / will be able to response to the click event, within the scope of the style is set to the mouse pointer -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
myChart.getZr().on('mousemove'.function(params) {
const { topTarget } = params
// To fold the mouse hover into a small hand
if(topTarget? .z ===2) {
myChart.getZr().setCursorStyle('pointer')}})Copy the code
- Find the coordinates of the click point
- Judge within the chart && at the polyline or inflection point
This is not a very easy step to make, because I keep clicking, and I get params on the console, and I compare broken points and non-broken points, and I find the difference, and I’m going to go into a little bit more detail here about the topTarget property, and it’s not just broken points, it’s all lines, like x, y, base lines in the chart, Target.z === 2 indicates the inflection point and also satisfies toptarget. z === 2, which is the point on the polyline, excluding the base line point
- The inflection point of polyline & polyline is determined, and then the index information of the polyline at this point is obtained
If it is an inflection point, read target.seriesIndex directly; If it is a point on a polyline, read the index under the topTarget object to continue looking for the parent’s information. The information of the points on this polyline is really difficult to find, and I also expanded each attribute and looked carefully to find it.
- You can do some business when you find it
- Set the broken line mouse suspension for the hand this judgment condition is weaker, because the inflection point itself is marked with a pointer
That’s what I ended up doing, and since I couldn’t find a better way online, I looked up the attributes myself and found the differences.
Maybe there are other solutions. If you have a better solution, please leave a comment
Ps: refer to the link: www.cnblogs.com/liangsf/p/1…