前端12 highcharts和echarts选择

 

运行测试 https://jshare.com.cn/github/highcharts/highcharts/tree/master/samples/stock/chart/title-align/

https://bbs.hcharts.cn/forum.php  中文论坛hightcharts series接收数据

https://api.highcharts.com.cn/highstock#title.align  highchart文档HighchartsHighstockHighmaps最新文档（英文）

https://www.cnblogs.com/xinxihua/p/14603861.html     前端12 highcharts和echarts选择

https://www.highcharts.com.cn/demo/highcharts   实例

https://github.com/   代码托管

    https://c.runoob.com/front-end/854


github/highcharts
bbs.hcharts.cn 中文论坛hightcharts series接收数据
api.highcharts.com highchart文档HighchartsHighstockHighmaps最新文档（英文）
www.cnblogs.com ;前端12 highcharts和echarts选择
www.highcharts.com ;实例
github.com 代码托管
;https://c.runoob.com/front-end/854

echarts 与 hightcharts 都支持哪些图标类型？

 虽然都是基于html的canvas画布进行开发的，echarts图标毕竟是基于MVC结构的图形开发包ZRender的基础上进行的，所以各方面还是考虑比较成熟的。

 

 

Highcharts优点：

  1. 轻量级，移动端使用比较流畅，毕竟小。
  2. 基于svg，对于动态的增删节点数据非常灵活，不需要重新绘图。
  3. 图表展现美观简约大气。
  4. 稳定的性能，非常适合用于为用户制定个性化图表，但更强的专业性也就意味着更高的学习成本，仁者见仁智者见智吧。
  5. 兼容性好，官方说兼容到IE6，实际我们只要兼容到IE8就基本满足。
  6. 完整的实例演示，功能介绍和详细的api文档。并不是说echarts就没有，而是Hcharts确实更加详细，实例更多，方便观看，这点对我们初学者来说是十分必要的。

Highcharts缺点：

  1. 中文文档欠缺。
  2. 百度出品的Echarts对于国内城市已经有了相应的配置，调用非常方便。因此在绘制地图方面，Echarts略胜一筹。

 
一个很恰当的比喻：Highcharts 和 Echarts 就像是 Office 和 WPS 、苹果和小米的关系。不过这也是暂时的，相信Echarts会做得更好.

echarts底层为canvas，highcharts底层为svg
canvas特点：

①依赖分辨率
②不支持事件处理器
③弱的文本渲染能力
④能够以.jpg、.png格式保存结果图像
⑤最适合图像密集型的游戏，其中的许多对象会被频繁重绘

svg特点：
①不依赖分辨率
②支持事件处理器
③最适合带有大型渲染区域的应用程序（如谷歌地图）
④复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快）
⑤不适合游戏应用

 

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="icon" href="https://static.jianshukeji.com/hcode/images/favicon.ico">
<style>
/* css 代码 */
</style>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/cylinder.js"></script>
</head>
<body>
<div id="container"></div>
<script>

var dis=[166.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
Highcharts.chart('container', {
chart: {
type: 'cylinder',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: 'Highcharts 3D 圆柱图'
},
plotOptions: {
series: {
depth: 25,
colorByPoint: true
}
},
series: [{
data: dis,
name: 'Cylinders',
showInLegend: false
}]
});


</script>


</body>
</html>

 

 

 

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="icon" href="https://static.jianshukeji.com/hcode/images/favicon.ico">
<style>

#container {
min-width: 300px;
max-width: 800px;
height: 500px;
margin: 0 auto;
border: 1px solid silver;
}

</style>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/sankey.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>

<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>


</head>
<body>
<div id="container"></div>

<div id="container1"></div>

<div id="container2"></div>

 

<script>
var chart = Highcharts.chart('container1', {
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
viewDistance: 25,
depth: 40
},
marginTop: 80,
marginRight: 40
},
title: {
text: '以年龄段划分消费总量'
},
xAxis: {
categories: ['移网', '宽带', '融合', '金融', '家互']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: '群体数量'
}
},
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
depth: 40
}
},
series: [{
name: '小张',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: '小王',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: '小彭',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: '小潘',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});

</script>

<script>Highcharts.chart('container', {
title: {
text: '济宁联通数字化 Highcharts 桑基图'
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['巴西', '葡萄牙', 5 ],
['巴西', '法国', 1 ],
['巴西', '西班牙', 1 ],
['巴西', '英国', 1 ],
['加拿大', '葡萄牙', 1 ],
['加拿大', '法国', 5 ],
['加拿大', '英国', 1 ],
['墨西哥', '葡萄牙', 1 ],
['墨西哥', '法国', 1 ],
['墨西哥', '西班牙', 5 ],
['墨西哥', '英国', 1 ],
['美国', '葡萄牙', 1 ],
['美国', '法国', 1 ],
['美国', '西班牙', 1 ],
['美国', '英国', 5 ],
['葡萄牙', '安哥拉', 2 ],
['葡萄牙', '塞内加尔', 1 ],
['葡萄牙', '摩洛哥', 1 ],
['葡萄牙', '南非', 3 ],
['法国', '安哥拉', 1 ],
['法国', '塞内加尔', 3 ],
['法国', '马里', 3 ],
['法国', '摩洛哥', 3 ],
['法国', '南非', 1 ],
['西班牙', '塞内加尔', 1 ],
['西班牙', '摩洛哥', 3 ],
['西班牙', '南非', 1 ],
['英国', '安哥拉', 1 ],
['英国', '塞内加尔', 1 ],
['英国', '摩洛哥', 2 ],
['英国', '南非', 7 ],
['南非', '中国', 5 ],
['南非', '印度', 1 ],
['南非', '日本', 3 ],
['安哥拉', '中国', 5 ],
['安哥拉', '印度', 1 ],
['安哥拉', '日本', 3 ],
['塞内加尔', '中国', 5 ],
['塞内加尔', '印度', 1 ],
['塞内加尔', '日本', 3 ],
['马里', '中国', 5 ],
['马里', '印度', 1 ],
['马里', '日本', 3 ],
['摩洛哥', '中国', 5 ],
['摩洛哥', '印度', 1 ],
['摩洛哥', '日本', 3 ]
],
type: 'sankey',
name: 'Sankey demo series'
}]
});


</script>


<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/sankey.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>

<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>


</body>
</html>

 

posted on 2021-03-31 21:25  shuzihua  阅读(238)  评论(0)  编辑  收藏  举报

导航