Vue eckharts custom histogram color and tooltip

  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

tooltip. formatter 

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

Tags: Javascript html5 Vue echarts

Posted on Thu, 14 Oct 2021 20:40:25 -0400 by Afser