当前位置： 云海天教程网 > 技术新闻 > 服务端开发/管理 > 正文

EChars 饼状图

  • 作者： 佚名     来源： 网络转载
  • 时间：2019-12-03

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

1、引入js 

<!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>

2、设值

// 基于准备好的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
      }]
    });
}

 3、title标题设置

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"
  }
}

4、legend图例设置

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: ["北京","上海","广州","深圳","郑州"]
}

5、series值域设置

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}"
    }
  }
}]

6、tooltip鼠标悬停提示

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

7、结果