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