The foreword 0.

This article case source code

We all know that ECharts is an open source visualization library implemented in JavaScript that covers all industries and charts to meet all needs. The author recently found a similar library: Highcharts. This article focuses on explaining how to make Highcharts in Vue (PS: I did not understand the official website, so I thought about it myself and wrote a blog to record the process). You can also go to the website to see how it works in other environments:

  • Highcharts .NET
  • Highcharts Vue
  • Highcharts React
  • Highcharts Angular
  • Highcharts iOS
  • Highcharts Android

1. Introduction

The following is an excerpt from the official website:

Highcharts makes data visualization easier, with IE6+ compatible, perfectly mobile, rich chart types, convenient and fast HTML5 interactive chart library

  • Highcharts (easy and fast pure JavaScript interactive charts) : Highcharts has been used by thousands of developers and 72 of the world’s top 100 companies, making it the simplest and most flexible chart library on the market.
  • Highcharts Stock: Highstock is a Stock chart control written in pure JavaScript that can be used to develop Stock charts and large data timeline charts.
  • Highcharts Maps (excellent HTML5 map component with drill down, touch and gesture support) : Highmaps inherits the simplicity of Highcharts. It makes it easy and quick to create interactive map charts to show sales, election results, and other location-dependent maps.
  • Highcharts Gantt: Easy-to-use interactive Gantt charts that show time allocation, task scheduling, events and resource usage.

2. Start

2.1 installation

NPM install HighCharts Highcharts -vue or YARN Add HighCharts highcharts-vue –save

2.2 introduced

/ / library
import HighCharts from 'highcharts'
import exporting from 'highcharts/modules/exporting'
import sankey from 'highcharts/modules/sankey'
import oldie from 'highcharts/modules/oldie'

//3D pie chart library required
import highcharts3D from 'highcharts/highcharts-3d'

exporting(HighCharts)
sankey(HighCharts)
oldie(HighCharts)
highcharts3D(HighCharts)
Copy the code

2.3 the use of

<!-- 本案例是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: 'Simple Number Technology Weekly Fruit Consumption'
        },
        subtitle: {
          text: '3D ring Charts in Highcharts'
        },
        plotOptions: {
          pie: {
            innerSize: 100.depth: 45}},series: [{
          name: 'Amount of cargo'.data: [['banana'.8],
            ['Kiwi'.3],
            ['peach'.1],
            ['orange'.6],
            ['apple'.8],
            ['pear'.4],
            ['orange'.4],
            ['orange'.1],
            ['Grapes (bunch)'.1]
          ]
        }]
      }
      HighCharts.chart(this.id,pieChartOption)
    }
  }
}
</script>
Copy the code

Other more use can pay attention to the official website.