封装Echarts
2024-10-19 08:59:21
项目中需要对数据进行图形展示，例如展示柱状图、饼状图等。这类的前端展示脚本很多，常见的是HighCharts和Echarts。HighCharts是基于svg技术的，而echarts基于Echarts，两者技术基础完全不一样，各有特点。而后者是可以在浏览器实现3D图形的。在各种图形展示上基本是差不多，都能满足项目需要。但是HighCharts是收费的，而Echarts是开源免费的，如果用于实际的项目还是使用Echarts。
使用这类前端脚本，每种图形都需要写很多重复的脚本，复用性低，其实可以将相同的代码进行封装，方便重复使用。之前使用HighCharts时，封装了一个，使用C#和数据库，只需要在数据库中配置Sql语句即可，不需要修改大量的代码。但是使用不方便，需要配置多个表。
本文中只封装了前端，调用只需要传入标题、数据等参数即可。主要代码如下：
var MyECharts = {
//格式化数据
ChartDataFormate: {
FormateNOGroupData: function (data) {
var categories = [];
var datas = [];
for (var i = 0; i < data.length; i++) {
categories.push(data[i].name || '');
temp_series = { value: data[i].value || 0, name: data[i].name };
datas.push(temp_series);
}
return { category: categories, data: datas };
},
//处理分组数据，数据格式：group：XXX，name：XXX，value：XXX用于折线图、柱形图（分组，堆积）
//参数：数据、展示类型
FormatGroupData: function (data, type) {
var groups = new Array();
var names = new Array();
var series = new Array();
for (var i = 0; i < data.length; i++) {
if (!groups.contains(data[i].group)) {
groups.push(data[i].group);
}
if (!names.contains(data[i].name)) {
names.push(data[i].name);
}
}
for (var i = 0; i < groups.length; i++) {
var temp_series = {};
var temp_data = new Array();
for (var j = 0; j < data.length; j++) {
for (var k = 0; k < names.length; k++)
if (groups[i] == data[j].group && data[j].name == names[k])
temp_data.push(data[j].value);
}
temp_series = { name: groups[i], type: type, data: temp_data };
series.push(temp_series);
}
return { category: names, series: series };
}
},
//生成图形
ChartOptionTemplates: {
//柱状图
Bar: function (title, subtext, data) {
var datas = MyECharts.ChartDataFormate.FormatGroupData(data, 'bar');
var option = {
title: {
text: title || '',
subtext: subtext || '',
x: 'center'
},
tooltip: {
show: true
},
xAxis: [
{
type: 'category',
data: datas.category
}
],
yAxis: [
{
type: 'value'
}
],
series: datas.series
};
return option;
},
//折线图
Line: function (title, subtext, data) {
var datas = MyECharts.ChartDataFormate.FormatGroupData(data, 'line');
var option = {
title: {
text: title || '',
subtext: subtext || '',
x: 'center'
},
tooltip: {
show: true
},
xAxis: [
{
type: 'category',
data: datas.category
}
],
yAxis: [
{
type: 'value'
}
],
series: datas.series
};
return option;
},
//饼图
Pie: function (title, subtext, data) {
var datas = MyECharts.ChartDataFormate.FormateNOGroupData(data);
var option = {
title: {
text: title || '',
subtext: subtext || '',
x: 'center'
},
tooltip: {
show: true,
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: datas.category
},
series: [
{
name: title,
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: datas.data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
return option;
},
//散点图
Scatter: function (title, subtext, data) {
var markLineOpt = {
animation: false,
label: {
normal: {
formatter: 'y = 0.5 * x + 3',
textStyle: {
align: 'right'
}
}
},
lineStyle: {
normal: {
type: 'solid'
}
},
tooltip: {
formatter: 'y = 0.5 * x + 3'
},
data: [[{
coord: [0, 3],
symbol: 'none'
}, {
coord: [20, 13],
symbol: 'none'
}]]
};
var option = {
title: {
text: 'Anscombe\'s quartet',
x: 'center',
y: 0
},
grid: [
{x: '7%', y: '7%', width: '38%', height: '38%'},
{x2: '7%', y: '7%', width: '38%', height: '38%'},
{x: '7%', y2: '7%', width: '38%', height: '38%'},
{x2: '7%', y2: '7%', width: '38%', height: '38%'}
],
tooltip: {
formatter: 'Group {a}: ({c})'
},
xAxis: [
{gridIndex: 0, min: 0, max: 20},
{gridIndex: 1, min: 0, max: 20},
{gridIndex: 2, min: 0, max: 20},
{gridIndex: 3, min: 0, max: 20}
],
yAxis: [
{gridIndex: 0, min: 0, max: 15},
{gridIndex: 1, min: 0, max: 15},
{gridIndex: 2, min: 0, max: 15},
{gridIndex: 3, min: 0, max: 15}
],
series: [
{
name: 'I',
type: 'scatter',
xAxisIndex: 0,
yAxisIndex: 0,
data: data[0],
markLine: markLineOpt
},
{
name: 'II',
type: 'scatter',
xAxisIndex: 1,
yAxisIndex: 1,
data: data[1],
markLine: markLineOpt
},
{
name: 'III',
type: 'scatter',
xAxisIndex: 2,
yAxisIndex: 2,
data: data[2],
markLine: markLineOpt
},
{
name: 'IV',
type: 'scatter',
xAxisIndex: 3,
yAxisIndex: 3,
data: data[3],
markLine: markLineOpt
}
]
};
return option;
}
},
//图形展示
//参数：图形option、图形显示区域id
RenderChart: function (option, containerId) {
var container = eval("document.getElementById('" + containerId + "');");//获取图形显示区域
var myChart = echarts.init(container);
myChart.setOption(option);// 为echarts对象加载数据
}
};
这个实现了对ECharts的封装，在前端调用代码如下：
1、先定义一块区域用于显示图形
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="container1" style="height: 400px"></div>
2、引入需要的脚本，一个是原生的ECharts脚本库，一个是自己封装的。
<script src="MyECharts/resource/ECharts/echarts.js"></script>
<script src="MyECharts/resource/MyECharts.js"></script>
3、使用封装的ECharts代码如下：
先定义需要的数据，在传入生成图形需要的参数，最后展现图形。
<script type="text/javascript">
var data1 = [
{ group: 'Beijing', name: '1月', value: 10 },
{ group: 'Beijing', name: '2月', value: 15 },
{ group: 'Beijing', name: '3月', value: 12 },
{ group: 'Beijing', name: '4月', value: 14 },
{ group: 'Tokyo', name: '1月', value: 12 },
{ group: 'Tokyo', name: '2月', value: 15 },
{ group: 'Tokyo', name: '3月', value: 2 },
{ group: 'Tokyo', name: '4月', value: 14 }];
var opt1 = MyECharts.ChartOptionTemplates.Bar('各个城市气温趋势', '°C', data1);
MyECharts.RenderChart(opt1, 'container1');
</script>
整个项目代码在github上：https://github.com/yangtzeyufei/MyEcharts
欢迎大家共同参与。
其他：Echart官网http://echarts.baidu.com/
最新文章
- mysql遇到锁表常用命令
- asp中的md5/sha1/sha256算法收集
- [算法导论]拓扑排序 @ Python
- 前端js,css文件合并三种方式,bat命令
- Ansible状态管理
- phonegap上传以及下载图片
- What does addScalar do?
- C++RAII
- QTP之对测试用例的自动化过程的分解
- effective c++（04）之对象使用前初始化
- HTML中将背景颜色渐变
- SQLSERVER 跨服务器查询
- Oracle SQL 调优健康检查脚本
- Java设计模式-责任链模式
- Fedora Linux中解决“xxx不在sudoers文件中”
- 自编辑列的gridview，分页，删除，点击删除提示“确认”
- ServiceStack 多租户的实现方案
- postgresql 简单入门
- MyEclipse10下创建web项目并发布到Tomcat
- Email feedback to product team about TFS and SharePoint Integration 2017.2.15