前言
最近在做报表类的项目，图表热门的框架有Echarts和Highcharts，两者的共同点是都是基于浏览器渲染技术的纯JS框架，且API文档全面，看着文档都能写出一个差不多的饼状图或者柱状图，但在最终做项目前，还是要看看两者的区别，来选择一个作为项目的主要框架。
两者区别
Echarts已经兼容了大部分的浏览器，且是国人开发，免费，首选。
Echarts
- echarts是百度公司前端开发的一个图表库,
- 支持柱状图、饼状图、k线图、map图、热导向图、折线图
- 主要采用canvas画图，正式因为基于canvas绘图对于动态的增删节点是需要重新绘图加载数据，而且无法动态改变图表的尺寸，只能是缩放
- 商用免费
- 中文文档，学习成本低
- 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）
Highcharts
- highcharts是国外的一家公司开发的图表库，主要采用svg画图，对于动态的增删节点数据非常灵活，不需要重新绘图
- 英文文档，学习成本高
- 商用收费
对Echarts的二次封装
封装是结合自己的项目来更好的运用，对所有页面通用，如下，局部待完善。
项目效果图
项目功能
- 图表自适应
- 柱形图增加移上去cross指针效果
- 自定义配置
所用语言
Jq + Ko.js + Echarts.js + bootstrap
项目地址
重要代码如下:可以直接看项目地址，有的UI配置二次更新过，下面为首次代码，有不对的地方请大神指正！
var ChartViewModel = function(){
var that = this;
//初始化页面
that.init = function(){
//加载饼图
that.loadRound();
//加载柱形
that.loadColumn();
},
that.loadRound = function(){
var data = [
{
value:10,
name:'01',
color:'#4285f4'
},
{
value:20,
name:'02',
color:'#e94335'
},
{
value:5,
name:'03',
color:'#fbbc05'
}
];
$('#chart_01').initRoundChart({
title: "",
legendData: $.initChartRoundData(data).legendData,
seriesData: $.initChartRoundData(data).seriesData
});
},
that.loadColumn = function(){
var data = [
{
name:'01',
type:'bar',
color:'#4285f4',
data:[12,22,33]
},
{
name:'02',
type:'line',
color:'#e94335',
data:[12,22,40]
}
];
$('#chart_02').initColumnChart({
title: "",
legendData: $.initChartColumnData(data).legendData,
seriesData: $.initChartColumnData(data).seriesData
});
}
}
var vm = new ChartViewModel();
ko.applyBindings(vm);
vm.init();
//扩展dom方法
$.fn.extend({
//圆饼图表方法
initRoundChart: function (options) {
var defaults = {
title: '',
number: '',
legendData: [],
seriesData: []
};
var opts = $.extend(defaults, options);
if (!$(this)[0]) {
return false;
}
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init($(this)[0]);
// 指定图表的配置项和数据
var option = {
//标题
title: {
//text: opts.title + '：' + opts.number,
// subtext: '纯属虚构',//副标题
x: 'center',
textStyle: {
color: "#333",
fontSize: 16,
fontWeight: 'normal'
},
bottom: '90'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} ({d}%)",//{a} <br/>{b} : {c} ({d}%)
},
//图例
legend: {
orient: 'horizontal',
left: 'center',
data: opts.legendData,
textStyle: {
fontSize: 12,
color: '#666'
},
itemWidth: 15,
itemHeight: 12,
top: '240'
},
series: [
{
name: opts.title,
type: 'pie',
radius: '55%',
center: ['50%', '35%'],
data: opts.seriesData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
//柱形图表
initColumnChart: function (options) {
var defaults = {
title: '',
subText: '',
xAxisData: [],
rotate: 0,
seriesData: [],
legendData: []//图例
};
var opts = $.extend(defaults, options);
if (!$(this)[0]) {
return false;
}
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init($(this)[0]);
// 指定图表的配置项和数据
var option = {
title: {
text: opts.title,
subtext: opts.subText,//副标题
//x: 'center',
textStyle: {
color: "#333",
fontSize: 16,
fontWeight: 'normal'
}
},
color: ['#ff6633'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'cross', // 默认为直线，可选为：'line' | 'shadow' | 'cross'//横纵指示
color: '#f5f5f5'
}
},
//canvas的位置
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: {
show: false
},
borderWidth: 0,
borderColor: '#f5f5f5',
axisLabel: {
interval: 0,//横轴信息全部显示
rotate: opts.rotate
},
data: opts.xAxisData
},
yAxis: [
{
type: 'value'
}
],
legend: {
data: opts.legendData
},
series: opts.seriesData
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
});
//扩展$元素方法
$.extend({
//遍历月份
monthData: function () {
var data = [];
for (var i = 1; i <= 12; i++) {
data.push(i + '月');
}
return data;
},
//封装圆饼图输出data的方法
initChartRoundData: function (arr) {
if (!arr)
return false;
var legendData = [];
var seriesData = [];
for (var i = 0; i < arr.length; i++) {
legendData.push(arr[i].name);
seriesData.push({
value: arr[i].value,
name: arr[i].name,
itemStyle: {
color: arr[i].color
}
});
};
return {
legendData,
seriesData
};
},
//封装柱形图输出data的方法
initChartColumnData: function (arr) {
if (!arr)
return false;
var defaults = {
name: '',
type: 'line',
stack: '',
data: [],
barWidth: 30,//默认柱子宽度30px
color: ''
};
var legendData = [];
var seriesData = [];
var ops = [];
for (var i = 0; i < arr.length; i++) {
ops = $.extend(defaults, arr[i]);
legendData.push(ops.name);
seriesData.push({
name: ops.name,
type: ops.type,
stack: ops.stack,
data: ops.data,
barWidth: ops.barWidth,
itemStyle: {
color: ops.color
}
});
}
return {
legendData,
seriesData
};
},
//遍历13年至今的年份
initYearData: function () {
var date = new Date;
var nowYear = date.getFullYear();
var yearList = [];
for (var i = 2013; i < nowYear + 1; i++) {
yearList.push(i);
}
return yearList;
},
//图表自适应
initChartResize: function (id) {
var chart = echarts.init($('#' + id + '')[0]);
$(window).resize(function () {
chart.resize();
});
},
})
$(function () {
//图表自适应,凡是有chartSize命名的图表都自适应
var dom = $('.chartSize');
for (var i = 0; i < dom.length; i++) {
$.initChartResize(dom[i].id);
}
});
