how to add new value in the tooltip?

Question

I want to add a new value in the tooltip, but I don't want to show the value in the chart. I searched but i did not find any solution. for example:

        {
            show: false,
            name: '利润',
            type: 'bar',
            label: {
                show: true,
                position: 'inside'
            },
            data: [20, 17, 24, 24]
        },
        {
            name: '收入',
            type: 'bar',
            stack: '总量',
            label: {
                show: true
            },
            data: [320, 302, 341, 374]
        },
        {
            name: '支出',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'left'
            },
            data: [120, 132, 101, 134]
        }

can i add show:false or different things? my echarts version is ^3.8.5.

Answer 1

Actually this can be done by reformatting your series data and customize tooltip formatter function. You can take a look at this case and make your own adjustment.

For example, data with higher dimension can be added like this:

data: [
    ['Mon', 120, 0], 
    ['Tue', 200, 1], 
    ['Wed', 150, 2], 
    ['Thu', 80, 3], 
    ['Fri', 70, 4], 
    ['Sat', 110, 5], 
    ['Sun', 130, 6],
],

Data with dimension index 0 and 1 will be plotted in the series, but dimension 2 will not shown.

Then make custom tooltip formatter function. For example:

formatter: function(params) {

    return `
    ${params.seriesName}:<br />
    Day: ${params.value[0]}<br />
    Value: ${params.value[1]}<br />
    New Value: ${params.value[2]}<br />
    `
}

Complete example:

option = {
    xAxis: {
        type: 'category',
    },
    yAxis: {
        type: 'value'
    },
    tooltip: {
        trigger: 'item',
        formatter: function(params) {

            return `
            ${params.seriesName}:<br />
            Day: ${params.value[0]}<br />
            Value: ${params.value[1]}<br />
            New Value: ${params.value[2]}<br />
            `
        }
    },
    series: [{
        data: [
            ['Mon', 120, 0], 
            ['Tue', 200, 1], 
            ['Wed', 150, 2], 
            ['Thu', 80, 3], 
            ['Fri', 70, 4], 
            ['Sat', 110, 5], 
            ['Sun', 130, 6],
        ],
        name: 'MySeries',
        type: 'bar'
    }]
};

Result:

See on Imgur

Answer 2

You cannot find this one or similar settings because they should not exist. It's breaking the main dataviz concept: visualization should simplify rather than complicate the perception of data. You cannot to hide the same data for one place and show it in the another in common context. User don't understand what is the reason of this inconsistence and will stop to trusting your chart.

But if you insist, then make the desired like this:

legend: {
  data: [{
      name: '直接访问',
      textStyle: {
        color: 'red'
      }
    },
    {
      name: '邮件营销',
      textStyle: {
        color: 'green'
      }
    }
    // [...]
  ]
}

and for hidden series:

series: [
  {
    name: '直接访问',
    type: 'bar',
    data: [0, 0, 0, 0, 0, 0, 0],
  },
  // {...}
]

var myChart = echarts.init(document.getElementById('main'));

var option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: [{
        name: '直接访问',
        textStyle: {
          color: 'red'
        }
      },
      {
        name: '邮件营销',
        textStyle: {
          color: 'green'
        }
      }
      // [...]
    ],
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  series: [{
      name: '直接访问',
      type: 'bar',
      data: [0, 0, 0, 0, 0, 0, 0],
    },

    {
      name: '邮件营销',
      type: 'bar',
      stack: '总量',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '联盟广告',
      type: 'bar',
      stack: '总量',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '视频广告',
      type: 'bar',
      stack: '总量',
      data: [150, 212, 201, 154, 190, 330, 410]
    },
    {
      name: '搜索引擎',
      type: 'bar',
      stack: '总量',
      data: [820, 832, 901, 934, 1290, 1330, 1320]
    }
  ]
};

myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

Answer 3

maybe custom series it worked but i couldn't find examples about bar chart. there is an example in the site but the example is about gantt chart.