echarts 与 highcharts 区别
1、国内与国外
echarts是百度公司前端开发的一个图表库,2013年发布第一版,主要采用canvas画图,目前版本3.8.4;完全免费;
highcharts是国外的一家公司开发的图表库,主要采用svg画图,不支持h5的浏览器采用vml绘制,2009 年发布第一版,目前版本6.0.3;
Highcharts 是国际知名的成熟的商业软件(也开源),商用要付费;
2、兼容性
Echarts:ie9+、Firefox、chrome、safari、opera等;
highcharts :ie6+、Firefox、chrome、safari、opera等;
3、图表的丰富程度
Echarts:
1、图表类:支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、雷达图、树状图、象形柱图、关系图、瀑布流图等,形式多样,效果炫酷。
2、3D表现力:柱状图,三维地球,结合百度地图三维展示(效果绚丽)。
3、地图类:结合百度地图(迁徙图、热力图,散点图,交通图),效果酷炫。
Highcharts:
1、图表类:支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等。
2、3D表现力:柱状图,饼状图,气泡图。
3、地图类:2d线性地图(geojson数据)。
4、总结
Echarts:图标样式多样、支持2d和3d地图展示,效果炫酷;兼容性弱;完全免费。
Highcharts:稳定性强;兼容性强;图标样式相对少;比较专业;个人免费,商用收费。
echarts3 使用总结
一、前期准备
1、使用echarts之前先要引入echarts.js,js可以到官网下载
2、写一个div容器用来装echarts内容,这个容器必须有高度,不然看不到内容。
3、在script中获取div容器的id,根据需要写option中的参数(也许你现在还不知道option是干嘛用的,不要着急往下看),使用setoption生成图表。
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<!-- 引入echarts.js -->
<script src="js/echarts.min.js "></script>
<script>
获取容器的id并赋值给变量myChart
var myChart = echarts.init(document.getElementById('main'));
/*用来配置参数*/
option = {}
/*调用option生成图表*/
myChart.setOption(option)
</script>
setOption 设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过setOption完成;
echarts3自适应
var container = document.getElementById("pieDemo");
var resizeContainer = function(){
container.style.width = window.innerWidth+"px";
container.style.height = window.innerHeight+"px";
}
resizeContainer();
var pieChart = echarts.init(container);
var pieOption = {
相关配置
};
pieChart.setOption(pieOption);
//自适应屏幕
window.onresize = function(){
resizeContainer();
pieChart.resize();
}
配置数组和配置项
option中最重要的配置项是series;
series中data 数据项中用name表示数据项名称, value表示单个数据项的数值;
下面整理了一下使用频率较高的配置(折线和饼图),具体配置看需求
频率较高的配置echarts3自动刷新
setInterval(function(){
option.series.data;
myChart.setOption(option);
},2000)
参考实例地址:http://gallery.echartsjs.com/editor.html?c=xr11L_RyBZ
根据echats版本,调用不同的方法
echats3
http://echarts.baidu.com/
网友评论