“This is the 11th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

preface

Blessed by Buddha, there is no bug. Hello everyone! I am across the sea!

This effect was also used in a project. Normally, ECharts was used, but this effect had 3D effect. Later, I found Highcharts to record it.

The implementation process

A simple introduction

Highcharts series software includes Highcharts JS, Highstock JS and Highmaps JS, all HTML5 chart libraries written in pure JavaScript, all open source, all open source. Free for personal and non-commercial use and source code editing. Free for personal and non-commercial use and source code editing.

First look at the effect:

I found Higcharts and Highcharts-vue in my search this time. I would like to explain how to realize both of them

Highcharts implementation

Highcharts, the third party component used

Highcharts official website: Portal

Install HighCharts first

yarn add highcharts
Copy the code

As usual, create a highchart folder in the lib folder

The code for index.js is as follows:

import HighCharts from "highcharts";
import highcharts3d from "highcharts/highcharts-3d";

// This code must be added because the 3d effect is to be used, otherwise the effect will be 2D
highcharts3d(HighCharts);

export default (Vue) => {
  Vue.prototype.$HighCharts = HighCharts;
};

Copy the code

Reference it in main.js

import Vue from "vue";
import App from "./App.vue"; .import highcharts from "./lib/highcharts"; . Vue.use(highcharts); .Copy the code

Create a comHighCharts. Vue reference for a new component

<template>
  <div class="container">
    <div id="demo" :option="option" style="height: 120px; width: 120px"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Attributes in option can be passed as values from the parent component that references the component
      // We will not write the parent component reference call (too many times in the custom widgets column)
      option: {
        credits: {
          enabled: false,},chart: {
          margin: 0.height: 120.backgroundColor: "rgba(0, 0, 0, 0)".borderWidth: 0.type: "pie".options3d: {
            enabled: true.alpha: 45,},panning: false.// Disable zooming
          pinchType: "".// Disable gesture operations
          zoomType: "".panKey: "shift",},title: {
          text: "",},plotOptions: {
          pie: {
            innerSize: "80%".allowPointSelect: false.// Fan block click
            depth: 15./ / thickness
            dataLabels: {
              enabled: false,}}},series: [{name: "".colors: ["#00FFFF"."#00E400"."#FFFF00"."#FF7E00"."#ff0000"."#E1E1E1"].data: [["I - II class".1],
              ["Class III".1],
              ["Class IV".1],
              ["V class".1],
              ["Inferior V class".1],
              ["Offline".1[,],},],},}; },methods: {
    loadChart() {
      this.$HighCharts.chart("demo".this.option); }},mounted() {
    this.loadChart(); }};</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.container {
  width: 120px;
  height: 120px;
  border: 0px solid #ddd;
  background: rgb(0.0.0.0);
}
</style>
Copy the code

And you’re done

Highcharts – vue

In addition to the above method, HightCharts also has the HightCharts extension pack for VUE, called Highcharts-Vue, but to use this plug-in, highCharts must be installed first (feel like echarts and vue-Echarts relationship).

Highcharts-vue also has documentation, still in Chinese, more friendly, portal

Let’s try it this way

The installation

yarn add highcharts highcharts-vue
Copy the code

To create our third party folder lib/highchartsVue

The index.js code is as follows:

import Highchart from "highcharts/highcharts";
import HighchartsVue from "highcharts-vue";
import stockInit from "highcharts/modules/stock";

stockInit(Highchart);

export default (Vue) => {
  Vue.use(HighchartsVue);
};
Copy the code

Why is index.js written like this, because there are examples in the documentation

Create our component comHighCharts2.vue

<template>
  <div>
    <highcharts :options="chartOptions" :callback="myCallback"></highcharts>
  </div>
</template>

<script>
export default {
  name: "HelloWorld".data() {
    return {
      chartOptions: {
        credits: {
          enabled: false,},chart: {
          margin: 0.height: 120.backgroundColor: "rgba(0, 0, 0, 0)".borderWidth: 0.type: "pie".options3d: {
            enabled: true.alpha: 45,},panning: false.// Disable zooming
          pinchType: "".// Disable gesture operations
          zoomType: "".panKey: "shift",},title: {
          text: "",},plotOptions: {
          pie: {
            innerSize: "80%".allowPointSelect: false.// Fan block click
            depth: 15./ / thickness
            dataLabels: {
              enabled: false,}}},series: [{name: "".colors: ["#00FFFF"."#00E400"."#FFFF00"."#FF7E00"."#ff0000"."#E1E1E1"."#D20DEF"].data: [["I - II class".1],
              ["Class III".1],
              ["Class IV".1],
              ["V class".1],
              ["Inferior V class".1],
              ["Offline".1],
              ["Insufficient validity".1[,],},],}}; },mounted() {},
  methods: {
    myCallback() {
      console.log("this is callback function"); }}};</script>

<style>
.highcharts-container {
  width: 600px;
  height: 400px;
  border: 1px solid #ddd;
  margin: auto;
}
</style>
Copy the code

The effects also include:

A little thought

Personal opinion: As we use more VUE and do more business, we will encounter more and more unpackaged third-party vUE plug-in packages, which do not have ready-made vUE versions.

However, as the idea of modularity has gained popularity, most third party packages on the market now follow the convention of import XXX from “XXXX”, so we can use these non-VUE packages in VUE as well.

When there is no existing VUE package, such as HighCharts (assuming it doesn’t have the HightCharts-Vue extension package), we mostly use the first approach to add third-party packages to vUE and use them in VUE.

The principle is simple: mount the installed third-party packages to the Vue object, add a field property to the vue instance that is the current third-party package we installed, and then load our third-party packages in the project using the this. XXX method.

For example, jquery, which I introduced in my quick Build VUE project with third-party plug-ins, is this way.

I hope you can use VUE more skilled, gradually master VUE.

Ps: In addition, 3d pie charts made by HighCharts were combined with my previous “Vue Custom Component” to realize the animation given by THE UI. The effect of Lottie’s debut was superimposed on one piece and the bars were instantly filled up. If you have the need to make a large screen, don’t miss this special effect

Reference documentation

  1. Highcharts website
  2. Highcharts – Vue Chinese document

Now that you’ve seen this, please give me a thumbs up before you go, because your thumbs up means a lot to me