How to use highlightts in vue? Method introduction

How to use highlightts in vue? The following vue.js column will introduce to you how to use hightchats in vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Using hightchats in vue

1. Install highcharts

npm install highcharts --save

2. In main.js

import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
import Highmaps from 'highcharts/modules/map';

HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Highmaps(Highcharts);
new Vue({
  el: '#app',
  router,
  axios,
  components: { App },
  template: &#39;<App/>&#39;,
  methods:{
 
    moreChart() {
        var options = this.getMoreOptions(this.type);
 
        if (this.chart) {
            this.chart.destroy();
        };
    // 初始化 Highcharts 图表
    this.chart = new Highcharts.Chart(&#39;highcharts-more&#39;, options);
    }
  }
})

3. Create chart component

<template>
    <p class="chart">
        <p :id="id" :option="option"></p>
    </p>
</template>

<script>
import HighCharts from &#39;highcharts&#39;
    export default {
        // 验证类型
        props: {
            id: {
                type: String
            },
            option: {
                type: Object
            }
        },
        mounted() {
            HighCharts.chart(this.id, this.option)
        }
    }
</script>

<style scoped>

</style>

4. Reference charts from other components

<Chart :id="id" :option="option"></Chart>
import Chart from "./Chart";
export default {
  name: "HelloWorld",
  components: {
    Chart
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      id: "test",
      option: {
        credits: {
          enabled: false
        },
        chart: {
          type: "line"
        },
        title: {
          text: "月平均气温" //表头文字
        },
        subtitle: {
          text: "数据来源: WorldClimate.com" //表头下文字
        },
        xAxis: {
          //x轴显示的内容
          categories: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月"
          ],
          plotbands: [
            {
              //可以显示一个方块，如果需要的话可以更改透明度和颜色
              from: 4.5,
              to: 6.5,
              color: "rgba(68,170,213,0)" //透明度和颜色
            }
          ]
        },

        yAxis: {
          //y轴显示的内容
          title: {
            text: "气温 (°C)"
          }
        },
        plotOptions: {
          line: {
            dataLabels: {
              enabled: false // 开启数据标签
            },
            enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
          }
        },
        series: [
          {
            //两条数据
            name: "东京",
            data: [
              7.0,
              6.9,
              9.5,
              14.5,
              18.4,
              21.5,
              25.2,
              26.5,
              23.3,
              18.3,
              13.9,
              9.6
            ]
          },
          {
            name: "伦敦",
            data: [
              3.9,
              4.2,
              5.7,
              8.5,
              11.9,
              15.2,
              17.0,
              16.6,
              14.2,
              10.3,
              6.6,
              4.8
            ]
          }
        ]
      }
}
}

Related recommendations:

2020 Summary of front-end vue interview questions (with answers)

vue tutorial recommendation: the latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit: Programming Learning Website! !

The above is the detailed content of How to use highlightts in vue? Method introduction. For more information, please follow other related articles on the PHP Chinese website!