1, Custom color
1. Set type: 'linear', // Linear gradient
The first four parameters are x0, Y0, X2 and Y2, ranging from 0 to 1, which is equivalent to the percentage in the graphics bounding box. If globalCoord is' true ', these four values are absolute pixel positions
Here I only do the y-axis gradient, not the x-axis gradient
Complete code
itemStyle: { normal: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#5cadff '/ / color at 0% }, { offset: 1, color: '#0180ff '/ / color at 100% }], global: false // The default is false } } },
2. The histogram changes color when the value exceeds the average value
The renderings are as follows
color supports the use of callback functions and outputs params. Take a look and get the data related to the average value
Complete code:, and then make a judgment according to the data
itemStyle: { normal: { // Column chart, fillet, initialization effect barBorderRadius:[2,2, 0, 0], // color:'' color: function(params){ // console.log('color e',params) if(params.value>res.data.comMap.average) { return { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#Ffe989 '/ / color at 0% }, { offset: 1, color: '#Ffcb78 '/ / color at 100% }], global: false // The default is false } } else{ return { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#00ceff '/ / color at 0% }, { offset: 1, color: '#6872ff '/ / color at 100% }], global: false // The default is false } }
2, Custom tooltip
The results are as follows:
That's what the official website says
The prompt box floating layer content formatter supports two forms: String template and callback function.
1. String template
Template variables are {a}, {b} , {c}, {d}, {e}, respectively represent series name, data name, data value, etc. stay trigger by ' axis' There will be multiple series of data, which can be passed at this time {a0}, {a1}, {a2} This way of adding an index after it represents the index of the series. Under different chart types {a},{b},{c},{d} The meaning is different. Where variable {a}, {b}, {c}, {d} The meaning of representative data under different chart types is:
-
Broken line (area) chart, column (bar) chart and K-line chart: {a} (series name), {b} (category value), {c} (value), {d} (none)
-
Scatter (bubble) chart: {a} (series name), {b} (data name), {c} (numeric array), {d} (none)
-
Map: {a} (series name), {b} (area name), {c} (combined value), {d} (none)
-
Pie chart, instrument panel, funnel chart: {a} (series name), {b} (data item name), {c} (value), {d} (percentage)
For more meanings of other chart template variables, see the label.formatter configuration item of the corresponding chart.
Example:
formatter: '{b0}: {c0}<br />{b1}: {c1}'
2. Callback function
Callback function format:
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]
It supports returning HTML strings or creating DOM instances.
First parameter params Is the dataset required by the formatter. The format is as follows:
{ componentType: 'series', // Series type seriesType: string, // index of the series in the passed in option.series seriesIndex: number, // Series name seriesName: string, // Data name name: string, // index of data in the passed in data array dataIndex: number, // Incoming raw data item data: Object, // The data value passed in. In most series, it is the same as data. In some series, it is the component in data (such as map and radar) value: number|Array|Object, // Axis encode mapping information, // key is the coordinate axis (such as' x ',' y ',' radius', 'angle', etc.) // value must be an array, not null/undefied, indicating dimension index. // Its contents are as follows: // { // x: [2] / / the data with dimension index 2 is mapped to the x-axis // y: [0] / / the data with dimension index 0 is mapped to the y-axis // } encode: Object, // Dimension name list dimensionNames: Array<String>, // Dimension index of data, such as 0 or 1 or 2 // Used only in radar charts. dimensionIndex: number, // The color of the data graph color: string, // Percentage of pie chart percent: number, }
You may not understand params here What does it mean? You can output it
There is a lot of information in it. Just take the color
Complete fragment
tooltip: { trigger: 'axis', backgroundColor:'rgba(21, 41, 68, 1)', axisPointer: { type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' }, /* formatter:'{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />{a3}: {c3}'*/ formatter:function(params){ console.log('colorrrrrrrrrrrrrr', params) var res = ` <div> <span style="display:inline-block; margin-right:5px; border-radius:10px; width:10px; height:10px; background-color:${params[3].color.colorStops[1].color}" ></span><span>${params[3].seriesName}: ${params[3].data}%</span> </div> <div> <span style="display:inline-block; margin-right:5px; border-radius:10px; width:10px; height:10px; background-color:${params[2].color.colorStops[1].color}" ></span><span>${params[2].seriesName}: ${params[2].data}%</span> </div> <div> <span style="display:inline-block; margin-right:5px; border-radius:10px; width:10px; height:10px; background-color:${params[1].color.colorStops[1].color}" ></span><span>${params[1].seriesName}: ${params[1].data}%</span> </div> <div> <span style="display:inline-block; margin-right:5px; border-radius:10px; width:10px; height:10px; background-color:${params[0].color.colorStops[1].color}" ></span><span>${params[0].seriesName}: ${params[0].data}%</span> </div> `; return res; } },