Echarts正负值在同侧

vue项目加Echarts

效果图：

 

代码实现如下

<template>
  <div id="money"></div>
</template>

<script>
  export default {
    name: "Echarts",
    data(){return{}},
    mounted(){
       this.draw()
    },
    methods:{
      draw(){
        var myEcharts = this.$echarts.init(document.getElementById('money'));
        var data = [23, 22, 21, 18, 15, 13, 10 ,-13,-18,-20];
        var displayData = data.map(v => Math.abs(v));
        var color1 = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
          [
            {offset: 0, color: '#348eda'},
            {offset: 0.5, color: '#2f98f4'},
            {offset: 1, color: '#2c9eff'}
          ]);
        var color2 = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
          [
            {offset: 0, color: '#ff7157'},
            {offset: 0.5, color: '#f5402e'},
            {offset: 1, color: '#f12b2a'}
          ]);
        var option = {
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            top:'20%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              data: data,
              axisTick: {show:false},
              axisLine:{show:false},
              axisLabel:{
                interval:0,
                rotate:30,
                color:'#fff'
              }
            }
          ],
          yAxis : [
            {
              type : 'value',
              name:'（万元）',
              nameTextStyle:{color:'#fff'},
              splitLine:{show:false},//刻度线
              axisTick:{show:false},//轴线
              axisLine:{show:false},
              axisLabel:{color:'#fff'}
            }
          ],
          series: {
            // name:'直接访问',
            type: 'bar',
            barWidth: '60%',
            data: displayData,
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: { //数值样式
                  color: '#fff',
                  fontSize: 14
                },
                formatter: function (p) {
                  return data[p.dataIndex] > 0 ? ('+' + p.value) : ('-' + p.value);
                }
              }
            },
            itemStyle: {
              normal: {
                color: function (p) {
                  if(data[p.dataIndex] > 0){
                  return color1;
                  } else {
                    return color2
                  }
                },
              }
            }
          }
        };
        myEcharts.setOption(option)
      }
    }
  }
</script>

<style scoped>
#money{
  width: 100%;
  height: 100%;
}
</style>

 新增内容：tooltip的拼接

tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter:function (p) {
              console.log(data[p[0].dataIndex])
              if (data[p[0].dataIndex] > 0){
                return "<span>"+p[0].name +" "+"+"+ p[0].value + " " +"<span>万元</span>";
              }else{
                return "<span>"+p[0].name +" "+"-"+ p[0].value + " " + "<span>万元</span>";
              }
            }
          },