echarts显示百分比

一、echarts显示表格

在很多时候，我们需要将数据以表格的形式展示给用户，而echarts提供了表格组件，方便我们实现这个需求。下面是一个示例：

// 引入echarts和table组件
import echarts from 'echarts';
import 'echarts/lib/component/legendScroll';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/visualMap';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';
import 'echarts/lib/component/dataZoom';
import 'echarts/lib/component/calendar';
import 'echarts/lib/component/graphic';
import 'echarts/lib/component/dataset';
import 'echarts/lib/component/axisPointer';
import 'echarts/lib/component/polar';
import 'echarts/lib/component/geo';
import 'echarts/lib/component/singleAxis';
import 'echarts/lib/component/parallel';
import 'echarts/lib/component/sankey';
import 'echarts/lib/component/tree';
import 'echarts/lib/component/timeline';
import 'echarts/lib/component/gauge';
import 'echarts/lib/component/funnel';
import 'echarts/lib/component/heatmap';
import 'echarts/lib/component/treeMap';
import 'echarts/lib/component/bmap';
import 'echarts/lib/component/boxplot';
import 'echarts/lib/component/custom';
import 'echarts/lib/component/graph';
import 'echarts/lib/component/lines';
import 'echarts/lib/component/map';

import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/candlestick';
import 'echarts/lib/chart/chord';
import 'echarts/lib/chart/custom';
import 'echarts/lib/chart/effectScatter';
import 'echarts/lib/chart/funnel';
import 'echarts/lib/chart/gauge';
import 'echarts/lib/chart/graph';
import 'echarts/lib/chart/heatmap';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/map';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/radar';
import 'echarts/lib/chart/sankey';
import 'echarts/lib/chart/scatter';
import 'echarts/lib/chart/themeRiver';
import 'echarts/lib/chart/treemap';

import 'echarts/lib/component/dataset';

import 'echarts/lib/chart/line';

import 'echarts/lib/component/grid';

import 'echarts/lib/component/title';

import 'echarts/lib/component/tooltip';

import 'echarts/lib/component/legend';

import 'echarts/lib/chart/pie';

import 'echarts/lib/chart/bar';

import 'echarts/lib/chart/map';

import 'echarts/lib/component/visualMap';

// 设置图表的数据和配置项
var tabledata = [
  [ {value:'Name' , rowspan:2} , {value:'Math' , rowspan:2} , {value:'English' , rowspan:2} , {value:'Science' , colspan:2} , {value:'Total' , rowspan:2} ] ,
  [ {value:'物理'} , {value:'化学'} ]
  ,
  [ 'Tom' , 80 , 70 , 90 , 85 , 325 ] ,
  [ 'Jack' , 90 , 60 , 80 , 70 , 300 ] ,
  [ 'Tim' , 87 , 63 , 92 , 78 , 320 ] ,
  [ 'Green' , 77 , 93 , 78 , 82 , 330 ] ,
  [ 'Mike' , 75 , 65 , 58 , 87 , 285 ]
];

var option = {
  title: {
    text: '成绩表'
  },
  tooltip: {},
  legend: {
    data: ['姓名','数学','物理','化学','英语','总分']
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      interval:0,
      rotate:40
    },
    data: ['Name', 'Tom', 'Jack', 'Tim', 'Green', 'Mike']
  },
  yAxis: {},
  series: [
    {
      name: '姓名',
      type: 'bar',
      stack: '总量',
      label: {
        show: true
      },
      data: tabledata[0]
    },
    {
      name: '数学',
      type: 'bar',
      stack: '总量',
      label: {
        show: true,
      },
      data: tabledata.slice(2, 7).map(function (row) {
        return row[1];
      })
    },
    {
      name: '物理',
      type: 'bar',
      stack: '总量',
      label: {
        show: true
      },
      data: tabledata.slice(2, 7).map(function (row) {
        return row[2];
      })
    },
    {
      name: '化学',
      type: 'bar',
      stack: '总量',
      label: {
        show: true,
      },
      data: tabledata.slice(2, 7).map(function (row) {
        return row[3];
      })
    },
    {
      name: '英语',
      type: 'bar',
      stack: '总量',
      label: {
        show: true,
      },
      data: tabledata.slice(2, 7).map(function (row) {
        return row[4];
      })
    },
    {
      name: '总分',
      type: 'bar',
      stack: '总量',
      label: {
        show: true,
        position: 'inside'
      },
      data: tabledata.slice(2, 7).map(function (row) {
        return row[5];
      })
    }
  ]
};

// 获得具体的DOM元素
var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
// 渲染图表
myChart.setOption(option);

二、echarts百分比柱状图

百分比柱状图是我们经常会用到的图形之一，它可以很直观地展示数据的比例关系。echarts提供了显示百分比柱状图的方法，在数据中加入小数点再设置如下配置项即可：

var option = {
  title: {
    text: '百分比柱状图'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['比例']
  },
  grid: {

  },
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '比例',
    data: [0.2, 0.3, 0.5, 0.7, 0.4, 0.8, 1],
    type: 'bar',
    barWidth: '40%',
    label: {
      show: true,
      formatter: function(params) {
        return params.data * 100 + '%'
      }
    }
  }]
};

// 获得具体的DOM元素
var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
// 渲染图表
myChart.setOption(option);

三、echart调整百分比大小

我们可以调整数据和label的百分比大小。具体方法可以通过调节以下两个配置项实现：

label: {
  show: true,
  fontSize: 14, //改变字体大小
  formatter: function(params) {
    return params.data * 100 + '%'
  }
}

和

yAxis: {
  type: 'value',
  axisLabel: {
    show: true,
    fontSize: 14, //改变轴上标记的字体大小
    formatter: function(params) {
      return params * 100 + '%'
    }
  },
},

通过调节这两个属性，我们可以很方便地调整百分比的大小。