在vue项目中引入highcharts图表的方法

area: {
//pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
fillOpacity:0.2,
lineWidth:1
}
},
legend: {//图例居中显示在图表下方
align: 'center',
symbolRadius:5,//图标圆角
symbolWidth:10,//图标宽度
symbolHeight:10,//图标高度
itemStyle: {
color: '#999999',
fontWeight:'normal',
fontSize:12
},
itemMarginBottom: -14,//图例项底部外边距
},
series: [{//数据列是一组数据集合
name: 'CPU',//name 代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中
data: [
5, 6, 10, 20, 50, 45, 30, 20, 10, 15,
16, 17, 18, 18, 30, 26, 25, 24, 20, 26,
36, 46, 50, 51, 52, 40, 30, 20, 19, 18,
30, 50, 55, 56, 70, 72, 73, 60, 55, 54,
53, 40, 39, 35, 32, 30, 20, 18, 3, 5,
10, 12, 13, 23, 34, 56, 60, 70, 80, 90, 80
],
tooltip: {
valueSuffix:'%'
}
}, {
name: 'RAM',
data:[
16, 17, 18, 18, 30, 26, 25, 24, 20, 26,
36, 46, 50, 51, 52, 40, 30, 20, 19, 18,
30, 50, 55, 56, 70, 72, 73, 60, 55, 54,
53, 40, 39, 35, 32, 30, 20, 18, 3, 5,
10, 12, 13, 23, 34, 56, 60, 70, 80, 90,
5, 6, 10, 20, 50, 45, 30, 20, 10, 15, 20
],
tooltip: {
valueSuffix:'%'
}
}, {
name: '温度',
data:[
10, 11, 11, 12, 12, 13, 14, 15, 16, 16,
16, 16, 16, 16, 16, 16, 16, 16, 16, 16,
16, 16, 16, 16, 16, 16, 16, 16, 16, 16,
16, 16, 16, 16, 16, 16, 16, 16, 16, 16,
16, 16, 16, 16, 16, 16, 16, 16, 16, 16,
16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16
],
tooltip: {
valueSuffix:'℃'//值的前缀、后缀及小数点
},
yAxis:1
}] }
}

3、父组件引用chart.vue子组件

<template>
  <div class="charts" id="myChart" >
    <x-chart ></x-chart>
  </div>
</template>
<script>
// 导入chart.vue子组件
import XChart from './chart.vue'
export default {
 components: {
  XChart
 }
}
</script>
<style scoped lang='stylus'>
</style>

效果如下图所示