electron-vue结合highcharts实现数据可视化

electron实现数据可视化

 这里我们主要介绍elctron-vue结合highcharts实现数据可视化，在这里给贴出传送门highcharts在github中的地址

安装

npm install --save highcharts npm i -S vue-highcharts

在main.js中引入

import vue from 'vue' import HighchartsVue from 'highcharts-vue' Vue.use(HighchartsVue)

使用

 我们可以在官网中找到对应的实例，将其引入我们的项目中即可使用。highchars官网传送门  在官网中我们找到对应的例子，点击进入我们想要实现的demo，点击进入后我们看到以下界面  在electron-vue项目中我们将其chart对象复制即可，也就是下面这部分。

<template> <div class="wrapper"> <highcharts :options="areaOptions"></highcharts> </div> </template> <script> export default { name: "home", data() { return { areaOptions: { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: "pie", }, title: { text: "2018年1月浏览器市场份额", }, tooltip: { pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>", }, plotOptions: { pie: { allowPointSelect: true, cursor: "pointer", dataLabels: { enabled: true, format: "<b>{point.name}</b>: {point.percentage:.1f} %", /* style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } */ }, }, }, series: [ { name: "Brands", colorByPoint: true, data: [ { name: "Chrome", y: 61.41, sliced: true, selected: true, }, { name: "Internet Explorer", y: 11.84, }, { name: "Firefox", y: 10.85, }, { name: "Edge", y: 4.67, }, { name: "Safari", y: 4.18, }, { name: "Sogou Explorer", y: 1.64, }, { name: "Opera", y: 1.6, }, { name: "QQ", y: 1.2, }, { name: "Other", y: 2.61, }, ], }, ], }, }; }, methods: { }, }; </script> <style lang="scss" scoped> </style>

 即可实现在electron-vue中引入图表。