0. 前言
本文案例源码
我们都知道 ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。作者最近又找到一个类似的库:Highcharts 。本文着重讲解在Vue中怎么使 Highcharts(PS:官网讲的我有些看不懂,自己琢磨了一下,然后写博客记录过程)。
还可以去官网查看在其他环境下的使用:
- Highcharts .NET
- Highcharts Vue
- Highcharts React
- Highcharts Angular
- Highcharts iOS
- Highcharts Android
1. 简介
以下摘自 官网 :
Highcharts 让数据可视化更简单,兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库
- Highcharts(方便快捷的纯 JavaScript 交互性图表):Highcharts 已经被成千上万的开发者及 72 个全球100强企业使用,是目前是市面上最简单灵活的图表库。
- Highcharts Stock(方便快捷的创建股票图、大数据量时间轴图表):Highstock 是用纯 JavaScript 编写的股票图表控件,可以用来开发股票走势图及大数据量时间轴图表。
- Highcharts Maps(优秀的 HTML5 地图组件,支持下钻,触摸、手势操作):Highmaps 继承了 Highcharts 简单易用的特性。利用它可以方便快捷的创建用于展示销售、选举结果等其他与地理位置关系密切的交互地图图表。
- Highcharts Gantt (最简单好用的 JavaScript 甘特图库):方便易用的交互式甘特图,可以用于展示时间分配,任务调度,事件及资源使用情况。
2. 起步
2.1 安装
npm install highcharts highcharts-vue
或yarn add highcharts highcharts-vue --save
2.2 引入
// 基础库
import HighCharts from 'highcharts'
import exporting from 'highcharts/modules/exporting'
import sankey from 'highcharts/modules/sankey'
import oldie from 'highcharts/modules/oldie'
//3D 饼状图所需库
import highcharts3D from 'highcharts/highcharts-3d'
exporting(HighCharts)
sankey(HighCharts)
oldie(HighCharts)
highcharts3D(HighCharts)
2.3 使用
<!-- 本案例是3D 饼状图 -->
<template>
<div class="PartialIntroduction" style="padding: 40px;">
<div id="pieChart"></div>
</div>
</template>
<script>
import HighCharts from 'highcharts'
import exporting from 'highcharts/modules/exporting'
import sankey from 'highcharts/modules/sankey'
import oldie from 'highcharts/modules/oldie'
import highcharts3D from 'highcharts/highcharts-3d'
exporting(HighCharts)
sankey(HighCharts)
oldie(HighCharts)
highcharts3D(HighCharts)
export default {
data(){
return{
id:'pieChart',
}
},
mounted() {
this.initData()
},
methods:{
initData(){
const pieChartOption = {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: '简数科技每周水果消耗量'
},
subtitle: {
text: 'Highcharts 中的3D环形图'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
name: '货物金额',
data: [
['香蕉', 8],
['猕猴桃', 3],
['桃子', 1],
['橘子', 6],
['苹果', 8],
['梨', 4],
['柑橘', 4],
['橙子', 1],
['葡萄 (串)', 1]
]
}]
}
HighCharts.chart(this.id,pieChartOption)
}
}
}
</script>
其余更多使用可关注官网。