What are the ways to introduce highcharts charts into vue projects?-JS Tutorial-php.cn

What are the ways to introduce highcharts charts into vue projects?

亚连

Release： 2018-06-01 11:44:57

Original

1973 people have browsed it

Below I will share with you a method (detailed explanation) of introducing highcharts charts into the vue project. It has a good reference value and I hope it will be helpful to everyone.

Npm imports highchars and imports After completion, you can develop the visual component of highchars

npm install highcharts --save

Copy after login

1. Create a new chart.vue component in the components directory

<template>
 <p class="x-bar">
 <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>

Copy after login

2. After the chart component is built, start creating the chart-options directory and create an options.js in it. To store the simulated chart data, as shown in the directory below

The data for a histogram I wrote as shown below

module.exports = {
 bar: {
 chart: {
 type:&#39;column&#39;//指定图表的类型，默认是折线图（line）
 },
 credits: {
 enabled:false
 },//去掉地址
 title: {
 text: &#39;我的第一个图表&#39; //指定图表标题
 },
 colors: [&#39;#058DC7&#39;, &#39;#50B432&#39;, &#39;#ED561B&#39;, &#39;#DDDF00&#39;,
  &#39;#24CBE5&#39; ],
 xAxis: {
  categories: [&#39;1号&#39;, &#39;2号&#39;, &#39;3号&#39;,&#39;3号&#39;,&#39;3号&#39;] //指定x轴分组
 },
 yAxis: {
  title: {
  text: &#39;最近七天&#39;, //指定y轴的标题
 },
 },
 plotOptions: {
  column: {
  colorByPoint:true
  },
  },
 series: [{ //指定数据列
  name: &#39;小明&#39;,
  data: [{
  y:1000,
  color:"red"}, 5000, 4000,5000,2000] //数据
 }]
 }
}

Copy after login

3. Reference chart component

<template>
 <p id="app">
 <x-chart :id="id" :option="option"></x-chart>
 </p>
</template>
<script>
// 导入chart组件
import XChart from &#39;components/chart.vue&#39;
// 导入chart组件模拟数据
import options from &#39;./chart-options/options&#39;
export default {
 name: &#39;app&#39;,
 data() {
 let option = options.bar
 return {
 id: &#39;test&#39;,
 option: option
 }
 },
 components: {
 XChart
 }
}
</script>
<style>
#test {
 width: 400px;
 height: 400px;
 margin: 40px auto;
}
</style>

Copy after login

Effect As shown in the picture below

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Vue uses mixins to implement compressed image code

Instance of vue2.0 simulation anchor point

Vue2.0 event broadcasting and reception (observer mode)

The above is the detailed content of What are the ways to introduce highcharts charts into vue projects?. For more information, please follow other related articles on the PHP Chinese website!