EChars饼状图

编程

官方: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、结果

以上是 EChars饼状图 的全部内容, 来源链接: utcz.com/z/511453.html

回到顶部