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