zoukankan      html  css  js  c++  java
  • echarts问题记录

    下面是横向的柱状图:

    option = {
      backgroundColor:'#fff',
      tooltip: {
        trigger: 'item',
        axisPointer: { // 坐标轴指示器,坐标轴触发有效
          type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
        },
        padding: 10,
        formatter: function(params) {
          return params.name + '</br>' + title+':' + params.value + '</br>' + '数据占比:' + params.data.rate+"%"
        }
      },
      yAxis : [
        {
          type : 'category',
          data: res.datas.data[keyName],
          name: reportType=="area"?"省份":"机型",
        }
      ],
      xAxis : [
        {
          type : 'value',
        axisLine:{
          show:true,
          lineStyle:{
            color:'#DDDDDD',
            1
          }
        },
        splitLine:{
          show:false
        },
        axisLabel:{
          show:true,
          textStyle:{
            color:'#000'
          }
        }
       }
      ],
    series: [{
      type: 'bar',
      data:[{

        value:12,

        rate:1

        },{

        value:13,

        rate:2

        }]
      }],
    label:{
      normal:{
          show:true,
          position:'right',
          textStyle:{
            color:'black'
          },
          formatter:function(params){
              return params.value+","+params.data.rate+"%";

           }
        }
      }
    };

    其中

    label:{
      normal:{
        show:true,
        position:'top',
        textStyle:{
          color:'black'
        },

        formatter:function(params){
          return params.value+","+params.data.rate+"%";

        }
      }

    }

    使得柱状图上方可以显示数值,formatter里面是组合要显示的内容组合。

    xAxis : [
    {
    type : 'value',
    axisLine:{
    show:true,
    lineStyle:{
    color:'#DDDDDD',
    1
    }
    },
    splitLine:{
    show:false
    },
    axisLabel:{
    show:true,
    textStyle:{
    color:'#000'
    }
    }
    }
    ],

    这个里面的type:value中的value 不能变化。而且series中的data数组中的每一项都要有value字段。不然图表不生效。需要查看echart配置了解一下。

  • 相关阅读:
    Html禁止粘贴 复制 剪切
    表单标签
    自构BeanHandler(用BeansUtils)
    spring配置中引入properties
    How Subcontracting Cockpit ME2ON creates SD delivery?
    cascadia code一款很好看的微软字体
    How condition value calculated in sap
    Code in SAP query
    SO Pricing not updated for partial billing items
    Javascript learning
  • 原文地址:https://www.cnblogs.com/yyumeng/p/8806574.html
Copyright © 2011-2022 走看看