echarts正负柱形图设置x轴和tooltip显示值都为正数,自定义颜色显示,设置y轴显示单位

echarts正负柱形图设置x轴和tooltip显示值都为正数,自定义颜色显示,设置y轴显示单位_第1张图片

option = {
  color:['#189dfe','#f0c219'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
     formatter: function (params) {
         let res = '';
          params.forEach((v,i)=>{
            res+=`${i==0?v.name:''}
${v.seriesName}: ${Math.abs(v.value)}%
` }) return (res) } }, legend: { bottom: '2%', left: '3%' }, grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true }, title:{ text:'(岁)', textStyle:{ fontSize:'normal', fontStyle:'normal', fontWeight:'normal', }, left:'7%', top:'3%' }, xAxis:[ { name: '(%)', type: 'value', axisLabel: { formatter: value => { if (value < 0) return -value; //这里是针对取负值 else return value; } } } ], yAxis: [ { type: 'category', // name:'单位', axisTick: { show: false }, data: ['0-9岁', '10-19岁', '20-29岁', '30-39岁', '40-49岁', '50-59岁', '60-69-岁'] } ], series: [ { name: '男', type: 'bar', stack: 'Total', label: { normal: {//正常情况 show: false, //是否显示标签 position: 'inside', formatter: function(params){return Math.abs(params.value)} //返回绝对值 } }, emphasis: { focus: 'series' }, data: [-320, -302, -341, -374, -390, -450, -420] }, { name: '女', type: 'bar', stack: 'Total', label: { normal: {//正常情况 show: false, //是否显示标签 position: 'inside' } }, emphasis: { focus: 'series' }, data: [220, 302, 341, 374, 390, 450, 420] } ] };

你可能感兴趣的:(echarst,echarts,javascript,ecmascript)