Hicharts也是一款可视化图表库，适用于Javascript, Angular, React, VueJS, ios, R, NET，但是如果需要商用需要额外付费
| 对比点 | Echarts | Hicharts |
|---|---|---|
| 性能 | 大数据量性能较好 | 中等数据量性能优秀 |
| 文档支持 | 中文文档完善 | 英文文档为主 |
| 特点 | 功能丰富，适合复杂可视化需求 | 功能完善，偏向传统商业图表 |
中文文档：highcharts.com.cn/
英文文档：www.highcharts.com/
一、入门学习
是好是坏，接下来代码里见真章，开码！！！
安装HiCharts依赖
css
pnpm install highcharts --saveHiCharts的使用起来与Echarts差不多，也是定义元素、配置项，然后去渲染图表，只是API使用不同，接下来我们定义简单的折线图渲染看看效果。
- 定义渲染元素：注意设置宽高
csharp
<div ref="chartRef" class="chart"></div>- 定义图表配置项
css
// 初始化图表配置
const options = {
title: {
text: '手机品牌月度销量',
align: 'left'
},
subtitle: {
text: '市场调研',
align: 'left'
},
yAxis: {
title: {
text: '销量 (百万台)'
}
},
xAxis: {
categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
legend: {
enabled: true, // 显示图例
align: 'right',
verticalAlign: 'top'
},
tooltip: {
valueSuffix: ' 百万台'
},
plotOptions: {
series: {
marker: {
enabled: true // 显示数据点
}
}
},
series: [
{
name: '小米',
data: [4.2, 3.8, 4.5, 5.1, 5.7, 6.3, 6.8, 7.2, 7.5, 8.1, 8.6, 9.2]
},
{
name: '华为',
data: [8.5, 7.8, 9.1, 6.2, 5.4, 10.9, 12.2, 11.8, 10.5, 8.3, 9.2, 11.8]
}
]
}
// 初始化图表
Highcharts.chart(chartRef.value, options);
}- 页面初始化完成后渲染图表
scss
onMounted(() => {
initCharts();
})HiCharts渲染效果如下图，为了方便作对比，笔者使用Echarts实现了同款图表，大家觉得哪个更好？
Echarts实现同款图表效果
在上述的例子中，在图表的右下角有着HiCharts的Logo，只需要加入如下配置即可消除
yaml
credits: {
enabled: false
},二、常见图表
(一) 柱状图（column）
基本结构与折线图类似，需要修改图表类型为column
css
{
chart: {
// 定义图表类型
type: 'column'
},
title: {
text: '手机品牌月度销量',
align: 'center'
},
subtitle: {
text: '市场调研',
align: 'center'
},
xAxis: {
categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: {
min: 0,
title: {
text: '销量 (百万台)'
}
},
tooltip: {
valueSuffix: ' 百万台'
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
{
name: '小米',
data: [4.2, 3.8, 4.5, 5.1, 5.7, 6.3, 6.8, 7.2, 7.5, 8.1, 8.6, 9.2]
},
{
name: '华为',
data: [8.5, 7.8, 9.1, 6.2, 5.4, 10.9, 12.2, 11.8, 10.5, 8.3, 9.2, 11.8]
}
]
}
(二) 饼图（Pie）
css
const options = {
chart: {
type: 'pie',
zooming: {
type: 'xy'
},
panning: {
enabled: true,
type: 'xy'
},
panKey: 'shift'
},
title: {
text: '手机品牌月度销量占比',
align: 'center'
},
subtitle: {
text: '市场调研',
align: 'center'
},
tooltip: {
valueSuffix: '%'
},
series: [
{
name: '手机品牌',
colorByPoint: true,
data: [
{
name: '小米',
y: 55.02
},
{
name: '华为',
y: 26.71
},
{
name: 'OPPO',
y: 16.71
},
{
name: '魅族',
y: 16.71
},
]
}
]
}
(三) 面积图（area）
css
const options = {
chart: {
type: 'area'
},
title: {
text: '手机品牌月度销量'
},
subtitle: {
text: '市场调研'
},
xAxis: {
categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: {
title: {
text: '销量 (百万台)'
}
},
credits: {
enabled: false
},
legend: {
enabled: true, // 显示图例
align: 'right',
verticalAlign: 'top'
},
tooltip: {
valueSuffix: ' 百万台'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [
{
name: '小米',
data: [4.2, 3.8, 4.5, 5.1, 5.7, 6.3, 6.8, 7.2, 7.5, 8.1, 8.6, 9.2]
},
{
name: '华为',
data: [8.5, 7.8, 9.1, 6.2, 5.4, 10.9, 12.2, 11.8, 10.5, 8.3, 9.2, 11.8]
}
]
};
(四) 组合图
css
const options = {
chart: {
zooming: {
type: 'x'
}
},
credits: {
enabled: false
},
title: {
text: '手机品牌月度销量与市场份额'
},
xAxis: {
categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: [
{
labels: {
format: '{value}%' // 左侧Y轴：市场份额百分比
},
title: {
text: '市场份额'
},
lineColor: Highcharts.getOptions().colors[1],
lineWidth: 2
},
{
labels: {
format: '{value} 百万台' // 右侧Y轴：销量
},
title: {
text: '销量'
},
lineColor: Highcharts.getOptions().colors[0],
lineWidth: 2,
opposite: true
}
],
tooltip: {
shared: true
},
legend: {
align: 'left',
verticalAlign: 'top'
},
series: [
{
name: '华为',
type: 'column',
yAxis: 1,
data: [12.5, 15.2, 18.7, 22.3, 25.1, 28.6, 30.2, 32.8, 29.4, 26.7, 20.5, 17.3],
tooltip: {
valueSuffix: ' 百万台'
}
},
{
name: '市场份额',
type: 'spline',
data: [18, 20, 22, 25, 27, 30, 32, 35, 33, 30, 25, 22],
tooltip: {
valueSuffix: '%'
}
}
]
};
三、中文配置
HiCharts默认使用的英文，配置中文的话，需要对应js文件
perl
const protocol = window.location.protocol;
const defaultOptionsZhCn = {
lang: {
contextButtonTitle: "图表导出菜单",
decimalPoint: ".",
downloadJPEG: "下载JPEG图片",
downloadPDF: "下载PDF文件",
downloadPNG: "下载PNG文件",
downloadSVG: "下载SVG文件",
drillUpText: "返回 {series.name}",
invalidDate: "无效的时间",
loading: "加载中...",
months: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月"
],
noData: "没有数据",
numericSymbols: null,
printChart: "打印图表",
resetZoom: "重置缩放比例",
resetZoomTitle: "重置为原始大小",
shortMonths: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月"
],
thousandsSep: ",",
weekdays: [
"星期天",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六"
],
rangeSelectorFrom: "开始时间",
rangeSelectorTo: "结束时间",
rangeSelectorZoom: "范围",
zoomIn: "缩小",
zoomOut: "放大"
},
global: {
canvasToolsURL:
protocol + "//cdn.hcharts.cn/highcharts/modules/canvas-tools.js",
VMLRadialGradientURL:
protocol + +"//cdn.hcharts.cn/highcharts/gfx/vml-radial-gradient.png"
},
title: { text: "图表标题" },
tooltip: {
dateTimeLabelFormats: {
millisecond: "%H:%M:%S.%L",
second: "%H:%M:%S",
minute: "%H:%M",
hour: "%H:%M",
day: "%Y-%m-%d",
week: "%Y-%m-%d",
month: "%Y-%m",
year: "%Y"
},
split: false
},
exporting: { url: protocol + "//export.highcharts.com.cn" },
credits: {
text: "Highcharts.com.cn",
href: "https://www.highcharts.com.cn"
},
xAxis: {
dateTimeLabelFormats: {
millisecond: "%H:%M:%S.%L",
second: "%H:%M:%S",
minute: "%H:%M",
hour: "%H:%M",
day: "%Y-%m-%d",
week: "%Y-%m",
month: "%Y-%m",
year: "%Y"
}
},
rangeSelector: {
inputDateFormat: "%Y-%m-%d",
buttonTheme: {
width: "auto",
style: { fontSize: "12px", padding: "4px" }
},
buttons: [
{ type: "month", count: 1, text: "月" },
{ type: "month", count: 3, text: "季度" },
{ type: "month", count: 6, text: "半年" },
{ type: "ytd", text: "YTD" },
{ type: "year", count: 1, text: "年" },
{ type: "all", text: "所有" }
]
},
plotOptions: {
series: {
dataGrouping: {
dateTimeLabelFormats: {
millisecond: [
"%Y-%m-%d %H:%M:%S.%L",
"%Y-%m-%d %H:%M:%S.%L",
" ~ %H:%M:%S.%L"
],
second: ["%Y-%m-%d %H:%M:%S", "%Y-%m-%d %H:%M:%S", " ~ %H:%M:%S"],
minute: ["%Y-%m-%d %H:%M", "%Y-%m-%d %H:%M", " ~ %H:%M"],
hour: ["%Y-%m-%d %H:%M", "%Y-%m-%d %H:%M", " ~ %H:%M"],
day: ["%Y-%m-%d", "%Y-%m-%d", " ~ %Y-%m-%d"],
week: ["%Y-%m-%d", "%Y-%m-%d", " ~ %Y-%m-%d"],
month: ["%Y-%m", "%Y-%m", " ~ %Y-%m"],
year: ["%Y", "%Y", " ~ %Y"]
}
}
},
ohlc: {
tooltip: {
split: false,
pointFormat:
'<span style="color:{point.color}">●</span> <b> {series.name}</b><br/>' +
"开盘：{point.open}<br/>" +
"最高：{point.high}<br/>" +
"最低：{point.low}<br/>" +
"收盘：{point.close}<br/>"
}
},
candlestick: {
tooltip: {
split: false,
pointFormat:
'<span style="color:{point.color}">●</span> <b> {series.name}</b><br/>' +
"开盘：{point.open}<br/>" +
"最高：{point.high}<br/>" +
"最低：{point.low}<br/>" +
"收盘：{point.close}<br/>"
}
}
}
};
export default defaultOptionsZhCn;
javascript
import defaultOptionsZhCn from "../../assets/highcharts-zh_CN.js"
// 应用中文配置
Highcharts.setOptions(defaultOptionsZhCn);四、结语
HiCharts的用法与Echarts使用差不多，只是些许区别，不过商用需要付费，而Echarts不需要，那这个HiCharts，但是存在即合理，下一章让我们一起学习一下它的进阶用法！！