制作图表的纯 Javascript 类库 —— Highcharts

663 阅读2分钟

0. 前言

本文案例源码

我们都知道 ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。作者最近又找到一个类似的库:Highcharts 。本文着重讲解在Vue中怎么使 Highcharts(PS:官网讲的我有些看不懂,自己琢磨了一下,然后写博客记录过程)。
还可以去官网查看在其他环境下的使用:

highcharts.png

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-vueyarn 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>

其余更多使用可关注官网。