当前位置:网站首页>Echart histogram: stack histogram value formatted display

Echart histogram: stack histogram value formatted display

2022-06-13 06:08:00 HaanLen

 Insert picture description here

 Insert picture description here
 Insert picture description here

option = {
    
  title: {
    
    text: 'World Population'
  },
  tooltip: {
    
    trigger: 'axis',
    axisPointer: {
    
      type: 'shadow'
    }
  },
  grid: {
    
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    
    type: 'value'
  },
  yAxis: {
    
    type: 'category',
    data: ['Indonesia', 'USA', 'India', 'China', 'World']
  },
  series: [
    {
    
      name: '2011',
      type: 'bar',
      stack: 'total',
      label: {
    
        show: true
      },
      data: [823, 234, 2034, 4970, 230]
    },
    {
    
      name: '2012',
      type: 'bar',
      stack: 'total',
      label: {
    
        show: true,
        formatter: '{a} {b} \n{c}',
      },
      data: [325, 238, 1214, 1141, 807]
    }
  ]
};

 Insert picture description here

option = {
    
  title: {
    
    text: 'World Population'
  },
  tooltip: {
    
    trigger: 'axis',
    axisPointer: {
    
      type: 'shadow'
    }
  },
  grid: {
    
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    
    type: 'value'
  },
  yAxis: {
    
    type: 'category',
    data: ['Indonesia', 'USA', 'India', 'China', 'World']
  },
  series: [
    {
    
      name: '2011',
      type: 'bar',
      stack: 'total',
      label: {
    
        show: true
      },
      data: [823, 234, 2034, 4970, 230]
    },
    {
    
      name: '2012',
      type: 'bar',
      stack: 'total',
      label: {
    
        show: true,
        // formatter: '{a} {b} \n{c}',
        formatter:(params) => {
    
          return `${
      params?.seriesName} ${
      params?.name} \n ${
      params?.value} `
        },
      },
      data: [325, 238, 1214, 1141, 807]
    }
  ]
};

{
    
    componentType: 'series',
    //  Series type 
    seriesType: string,
    //  The series is coming in  option.series  Medium  index
    seriesIndex: number,
    //  Series name 
    seriesName: string,
    //  Data name , Class name 
    name: string,
    //  The data is coming in  data  Array  index
    dataIndex: number,
    //  Incoming raw data items 
    data: Object,
    //  Incoming data value . In most series, it is similar to  data  identical . Under some series is  data  The components in the ( Such as  map、radar  in )
    value: number|Array|Object,
    //  Axis  encode  The mapping information ,
    // key  For the axis ( Such as  'x' 'y' 'radius' 'angle'  etc. )
    // value  Must be an array , Not for  null/undefied, Express  dimension index .
    //  Its contents are as follows: :
    // {
    
    // x: [2] // dimension index  by  2  Data mapped to  x  Axis 
    // y: [0] // dimension index  by  0  Data mapped to  y  Axis 
    // }
    encode: Object,
    //  List of dimension names 
    dimensionNames: Array<String>,
    //  The dimensions of data  index, Such as  0  or  1  or  2 ...
    //  Used only in radar charts .
    dimensionIndex: number,
    //  The color of the data graphic 
    color: string
}
原网站

版权声明
本文为[HaanLen]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/164/202206130603576454.html