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 + '%'
    }
  },
},

通過調節這兩個屬性，我們可以很方便地調整百分比的大小。