EChars 餅狀圖

時間 2020-01-29

標籤 echars 餅狀圖简体版

原文原文鏈接

官方：https://www.echartsjs.com/zh/index.htmljavascript

一、引入js html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 爲 ECharts 準備一個具有大小（寬高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>

二、設值java

// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));

// 先加載默認值
var option = {
    title   : {...},
    tooltip : {...},
    legend  : {...},
    series  : [{...}]
};

myChart.setOption(option);


function searchEchars() {
    var params = {};
    $.each($("#form-api-echars-index").serializeArray(), function(i, field) {
        params[field.name] = field.value;
    });

    $.ajax({
        url  : monitor_echars_data_uri,
        data : params,
        cache : false,
        async : true,
        type  : "POST",
        dataType : 'json',
        success : function (result) {
          setOption(result);
        }
    });
}

// 獲取數據後能夠從新加載數據
function setOption(result) {
    // 填入數據
    myChart.setOption({
      title: {
          text: '接口響應時間分佈圖'
      },
      series: [{
          data : result.rows
      }]
    });
}

三、title標題設置ajax

title: {
  text: '學生生源地來源分佈圖',
  subtext: '模擬數據',
  // x 設置水平安放位置，默認左對齊，可選值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x座標，單位px）
  x: 'center',
  // y 設置垂直安放位置，默認全圖頂端，可選值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y座標，單位px）
  y: 'top',
  // itemGap設置主副標題縱向間隔，單位px，默認爲10，
  itemGap: 30,
  backgroundColor: '#EEE',
  // 主標題文本樣式設置
  textStyle: {
    fontSize: 26,
    fontWeight: 'bolder',
    color: '#000080'
  },
  // 副標題文本樣式設置
  subtextStyle: {
    fontSize: 18,
    color: '#8B2323'
  }
}

四、legend圖例設置json

legend: {
    // orient 設置佈局方式，默認水平佈局，可選值：'horizontal'（水平） ¦ 'vertical'（垂直）
    orient: 'vertical',
    // x 設置水平安放位置，默認全圖居中，可選值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x座標，單位px）
    x: 'left',
    // y 設置垂直安放位置，默認全圖頂端，可選值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y座標，單位px）
    y: 'center',
    itemWidth: 24,   // 設置圖例圖形的寬
    itemHeight: 18,  // 設置圖例圖形的高
    textStyle: {
      color: '#666'  // 圖例文字顏色
    },
    // itemGap設置各個item之間的間隔，單位px，默認爲10，橫向佈局時爲水平間隔，縱向佈局時爲縱向間隔
    itemGap: 30,
    backgroundColor: '#eee',  // 設置整個圖例區域背景顏色
    data: ['北京','上海','廣州','深圳','鄭州']
}

五、series值域設置api

series: [{
  name: '生源地',
  type: 'pie',
  // radius: '50%',  // 設置餅狀圖大小，100%時，最大直徑=整個圖形的min(寬，高)
  radius: ['30%', '60%'],  // 設置環形餅狀圖， 第一個百分數設置內圈大小，第二個百分數設置外圈大小
  center: ['50%', '50%'],  // 設置餅狀圖位置，第一個百分數調水平位置，第二個百分數調垂直位置
  data: [
      {value:335, name:'北京'},
      {value:310, name:'上海'},
      {value:234, name:'廣州'},
      {value:135, name:'深圳'},
      {value:148, name:'鄭州'}
  ],
  // itemStyle 設置餅狀圖扇形區域樣式
  itemStyle: {
    // emphasis：英文意思是 強調;着重;（輪廓、圖形等的）鮮明;突出，重讀
    // emphasis：設置鼠標放到哪一塊扇形上面的時候，扇形樣式、陰影
    emphasis: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: 'rgba(30, 144, 255，0.5)'
    }
  },
  // 設置值域的那指向線
  labelLine: {
    normal: {
      show: false   // show設置線是否顯示，默認爲true，可選值：true ¦ false
    }
  },
  // 設置值域的標籤
  label: {
    normal: {
      position: 'inner',  // 設置標籤位置，默認在餅狀圖外 可選值：'outer' ¦ 'inner（餅狀圖上）'
      // formatter: '{a} {b} : {c}個 ({d}%)'   設置標籤顯示內容 ，默認顯示{b}
      // {a}指series.name  {b}指series.data的name
      // {c}指series.data的value  {d}%指這一部分佔總數的百分比
      formatter: '{c}'
    }
  }
}]

六、tooltip鼠標懸停提示echarts

tooltip: {
    trigger: 'item',
    formatter: "{b} : {c} <br/>比例 : {d}%"
}

七、結果dom

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。