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配置了解一下。

  • 相关阅读:
    [codevs]线段树练习5
    【Java学习笔记之十六】浅谈Java中的继承与多态
    【Java学习笔记之十五】Java中的static关键字解析
    【Java学习笔记之十四】Java中this用法小节
    【Java学习笔记之十三】初探Java面向对象的过程及代码实现
    【Java学习笔记之十二】Java8增强的工具类:Arrays的用法整理总结
    hdu2896 AC自动机
    hdu2222 AC自动机
    字符串匹配--AC自动机模板
    字符串匹配--(K)MP模板
  • 原文地址:https://www.cnblogs.com/yyumeng/p/8806574.html
Copyright © 2011-2022 走看看