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中引入图表。