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;
}
},