zoukankan      html  css  js  c++  java
  • 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>";
                  }
                }
              },
  • 相关阅读:
    石家庄地铁线路查询系统(补)
    构建之法阅读笔记03
    构建之法阅读笔记02
    Day 3-3 内置方法
    Day3-2 函数之递归
    Day3-1 函数
    Day2 列表,元组,字典,集合
    Day1 基础知识
    Day1. Python基础知识
    iptables防火墙配置
  • 原文地址:https://www.cnblogs.com/keai/p/11376971.html
Copyright © 2011-2022 走看看