echarts 图形使用分享,写得不好,请各位大神多多指教…
- 饼图 pie
- 折线图 line
- 柱形图 bar
文章目录
- 根据条件(季度,月份)联动三种图形数据变化
- 折线图 “月份” 换行处理方法
- 柱状图 添加 “横向滚动条”
- 封装图形函数
- 使用指南
效果图1:
效果图2:
参数说明及数据格式
/**
* 创建饼图js
* data[0] 呈现饼图的dom元素id
* data[1] 统计图的主标题
* data[2] 图例
* data[3] 自定义名字
* data[4] 呈现的统计图数据
* @param data
* ["pieArea","活动2情况统计图",["活动1","活动2","活动3"],"活动详情",
* [{"value":"5","name":"活动1"},{"value":"3","name":"活动2"},{"value":"8","name":"活动3"}]]
*
*/
饼图封装方法
/****************饼图封装方法********************/
function createPie(data) {
// 为了复用性,在外面初始化
var myChart = echarts.init(document.getElementById(data[0]));
var option = {
title: {
text: data[1],
subtext: '',
x: 'center',
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}:{c} ({d}%)"
},
legend: {
orient: 'horizontal',
data: data[2],
top: 50
},
toolbox: {
show: false,
feature: {
mark: false,
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar', 'pie', 'gauge']
},
restore: true
}
},
calculable: true,
// formatter: '{b}:{c}人 ({d}%)'
series: [{
name: data[3],
type: "pie",
radius: '50%',
center: ['50%', '50%'],
data: data[4],
itemStyle: {
normal: {
label: {
show: true,
formatter: '{c}人'
}
},
labelLine: {
label: {
show: true
}
},
emphasis: {
shadowBlur: 50,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
return option;
}
折线图封装方法
- 需注意:
- axisLabel换行(在本文章对 “时间格式处理”),为了方便,【我这里直接写在函数中,朋友们可自行抽离】
- 代码段在var option={};之后,在myChart.setOption(option);之前
/**************************折线图*******************/
function createLine(data) {
option = {
title: {
text: data[1],
left: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
// data: data[2]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: { //坐标轴刻度标签的相关设置。
interval: 0,
rotate: "45"
},
data: data[2]
},
yAxis: {
type: 'value'
},
series: [{
name:'心血管随访数',
type: 'line',
data: data[3]
}]
};
/**
* 使用方式一(动态): 处理 axisLabel换行
* 代码段在var option={};之后,在myChart.setOption(option);之前
*/
option.xAxis.axisLabel = {
interval: 0, //标签设置为全部显示
formatter: function (params) {
//粘贴以下function内未注释的代码
var newParamsName = ""; // 最终拼接成的字符串
var paramsNameNumber = params.length; // 实际标签的个数
var provideNumber = 5; // 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话,需要显示几行,向上取整
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = ""; // 表示每一次截取的字符串
var start = p * provideNumber; // 开始截取的位置
var end = start + provideNumber; // 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr; // 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName
}
}
return option;
}
柱状图封装方法
/***********************柱状图*************************/
function createBar(data) {
// 指定图表的配置项和数据
option = {
title: {
text: data[1],
left: "center"
},
tooltip: {
trigger: 'axis',
axisPointer: {
crossStyle: {
color: '#999'
}
}
},
// 设置x轴滚动条
dataZoom: [{
type: 'slider',
show: true,
xAxisIndex: [0],
left: '9%',
bottom: -5,
start: 10,
end: 90 //初始化滚动条
}],
toolbox: {
},
xAxis: [{
type: 'category',
data: data[2],
axisPointer: {
type: 'shadow'
}
}],
yAxis: [{
type: 'value',
name: '人数',
min: 0,
interval: 5000,
}],
series: [{
name: '常住人口数',
type: 'bar',
data: data[3]
},
{
name: '心血管档案管理数',
type: 'bar',
data: data[4]
}
]
};
return option;
}
使用指南
- 1.静态html
- 2.初始化echarts 获取Dom元素
- 3.判断传入图形类型: pie饼图 line拆线图 bar柱状图
- 4.根据图形调用封装方法
- 5.测试根据条件数据联动
1. 静态html
<!-- 数据统计 -->
<div id="statisticsTitle">
<h2>xxx医院心血管数据统计</h2>
<ul>
<!-- 年份 -->
<li>
<label class="input-txt-warp">
<span>年 份</span>
<span class="input-select" style="width:100px">
<select>
<option value ="1">2017年</option>
<option value ="2">2018年</option>
</select>
</span>
</label>
</li>
<!-- 季度 -->
<li>
<label class="input-txt-warp">
<span>季 度</span>
<span class="input-select" style="width:100px">
<select id="quarterOption">
<option value="0">全部</option>
<option value="1">第一季度</option>
<option value="2">第二季度</option>
<option value="3">第三季度</option>
<option value="4">第四季度</option>
</select>
</span>
</label>
</li>
<!-- 月份 -->
<li>
<label class="input-txt-warp">
<span>月 份</span>
<span class="input-select" style="width:100px">
<select>
<option value="0">全部</option>
<option value ="1">1月</option>
<option value ="2">2月</option>
<option value ="3">3月</option>
<option value ="4">4月</option>
<option value ="5">5月</option>
<option value ="6">6月</option>
<option value ="7">7月</option>
<option value ="8">8月</option>
<option value ="9">9月</option>
<option value ="10">10月</option>
<option value ="11">11月</option>
<option value ="12">12月</option>
</select>
</span>
</label>
</li>
<!-- 查询按钮 -->
<div>
<a href="#" class="easyui-linkbutton c3" data-options="iconCls:'icon-search'" style="width: 60px;">查询</a>
</div>
</ul>
</div>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="graphWrap">
<div class="clearfix">
<div id="pies" style="width: 280px;height:380px;"></div>
<div id="lines" style="width: 600px;height:320px"></div>
</div>
<div id="grapBars">
<div id="bars" style="width: 1000px;height:350px;"></div>
</div>
</div>
2. 初始化echarts 获取Dom元素
// 基于准备好的dom,初始化echarts实例
var myChartPie = echarts.init(document.getElementById('pies'));
var myChartLine = echarts.init(document.getElementById('lines')); //拆线图
var myChartBar = echarts.init(document.getElementById('bars')) //柱状图
3. 判断传入图形类型:
- type== 1 pie饼图
- type == 2 line拆线图
- type == 3 bar柱状图
function optionType(data, type) {
if (type == 1) {
return createPie(data);
} else if (type == 2) {
return createLine(data);
} else {
return createBar(data);
}
}
/**
* 更新图形数据方法
* @param {*} data 数据
* @param {*} graph 图形: pie饼图 line拆线图 bar柱状图
*/
function updateGraphData(data, graph) {
if (graph == 1) {
myChartPie.setOption(optionType(data, graph));
} else if (graph == 2) {
myChartLine.setOption(optionType(data, graph));
}else{
myChartBar.setOption(optionType(data, graph));
}
}
4. 调用方法
调用 饼图方法
// 调用 饼图 使用指定的配置项和数据显示图表
myChartPie.setOption(optionType(["pies", "心血管档案管理率", ["全部", "已完成", "未完成"], "心血管档案管理率", [{
"value": "5",
"name": "全部"
}, {
"value": "3",
"name": "已完成"
}, {
"value": "18",
"name": "未完成"
}]], 1));
调用 折线图方法
//调用 折线图 指定的配置项和数据显示图表
myChartLine.setOption(optionType(["",
"心血管随访数",
['2017年01月', '2017年02月', '2017年03月', '2017年04月', '2017年05月', '2017年06月', '2017年07月',
'2017年08月', '2017年09月', '2017年10月', '2017年11月', '2017年12月'
],
[120, 132, 101, 12, 90, 230, 210, 82, 63, 120, 56, 78]
], 2))
调用 柱状图方法
// 调用 柱状图 指定的配置项和数据显示图表
myChartBar.setOption(optionType(["",
"管辖内心血管人数", ['道里区1', '南岗区', '道里区14', '道里区1', '道里区5', '道里', '道里7月', '道里8月',
'道里9月', '道里10月', '道里11月', '道里12月', '道里区10', '道里区10', '道里区50',
],
[444, 7878, 7570, 253.2, 2455.6, 765.7, 135.6, 16244.2, 342.6, 204.0, 6.4, 355.3],
[2444.6, 5444.9, 9555.0, 2556.4, 2558.7, 7550.7, 175.6, 182.2, 484.7, 184.8, 655.0,
2474.3,
655.0, 2474.3, 5666
],
], 3))
5. 在html页面中 测试根据条件数据联动
<script>
/***************************心血管数据统计测试数据************************/
// 注册changes事件 当改变下拉框获取对应值
$(function () {
$("#quarterOption").change(function () {
alert("点击我了");
// 保存当前值
var optionVal = $(this).val();
//根据 季度更新值
if (optionVal == 1) {
// 更新 饼图
var optionPie = [
"pies", "心血管档案管理率", ["全年", "已完成", "未完成"], "心血管档案管理率", [{
"value": "15",
"name": "全年"
}, {
"value": "30",
"name": "已完成"
}, {
"value": "8",
"name": "未完成"
}]
]
// 更新 折线图值
var optionLine = ["",
"心血管随访数", ['2017年01月', '2017年02月', '2017年03月', '2017年04月', '2017年05月',
'2017年06月',
'2017年07月',
'2017年08月', '2017年09月', '2017年10月', '2017年11月', '2017年12月'
],
[50, 132, 101, 165, 90, 130, 210, 282, 63, 285, 156, 78]
]
// 更新 柱状图
var optionBar = ["",
"管辖内心血管人数", ['道里区1', '南岗区', '道里区14', '道里区1', '道里区5', '道里',
'道里7月', '道里8月', '道里9月', '道里10月', '道里11月', '道里12月', '道里区10', '道里区10',
'道里区50',
],
[144, 999, 6842, 253.2, 2455.6, 765.7, 135.6, 1644.2,
5214.6,
204.0, 956, 355.3
],
[444.6, 444.9, 9555.0, 2556.4, 2558.7, 7550.7, 175.6, 182.2,
484.7, 184.8, 655.0, 2474.3,
655.0, 2474.3, 5666
]
]
// 调用方法 更新图形数据
updateGraphData(optionPie, 1);
updateGraphData(optionLine, 2);
updateGraphData(optionBar, 3);
} else if (optionVal == 2) {
// 更新 折线图值
var optionLine = ["",
"心血管随访数", ['2017年01月', '2017年02月', '2017年03月', '2017年04月', '2017年05月',
'2017年06月',
'2017年07月',
'2017年08月', '2017年09月', '2017年10月', '2017年11月', '2017年12月'
],
[150, 132, 201, 165, 190, 130, 210, 282, 63, 385, 156, 178]
]
// 调用方法 更新图形数据
updateGraphData(optionLine, 2);
}
});
});
</script>