第十六章：Electron-Vue 使用highcharts

• 安装highcharts

npm install --save highcharts

https://github.com/highcharts/highcharts

• 安装vue-highcharts

npm i -S vue-highcharts

https://github.com/weizhenye/vue-highcharts

• main.js中引入

import Vue from 'vue';
import VueHighcharts from 'vue-highcharts';

Vue.use(VueHighcharts);

• 组件中使用

 <template>
  <div class="wrapper">
    <Highcharts :options="areaOptions" />
    <Highcharts :options="columnOptions" />
  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}: {point.percentage:.1f}%",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: true,
              format: "{point.name}: {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,
              },
            ],
          },
        ],
      },
      columnOptions: {
        chart: {
          type: "column",
        },
        title: {
          text: "月平均降雨量",
        },
        subtitle: {
          text: "数据来源: WorldClimate.com",
        },
        xAxis: {
          categories: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
          crosshair: true,
        },
        yAxis: {
          min: 0,
          title: {
            text: "降雨量 (mm)",
          },
        },
        tooltip: {
          // head + 每个 point + footer 拼接成完整的 table
          headerFormat:
            '{point.key}',
          pointFormat:''+'',
          footerFormat:"

            
{series.name}: 
 
            
{point.y:.1f} mm
 
",
          shared: true,
          useHTML: true,
        },
        plotOptions: {
          column: {
            borderWidth: 0,
          },
        },
        series: [
          {
            name: "东京",
            color: "blue",
            data: [
              49.9,
              71.5,
              106.4,
              129.2,
              144.0,
              176.0,
              135.6,
              148.5,
              216.4,
              194.1,
              95.6,
              54.4,
            ],
          },
          {
            name: "纽约",
            color: "red",
            data: [
              83.6,
              78.8,
              98.5,
              93.4,
              106.0,
              84.5,
              105.0,
              104.3,
              91.2,
              83.5,
              106.6,
              92.3,
            ],
          },
        ],
      },
    };
  },
  methods: {
    open(link) {
      this.$electron.shell.openExternal(link);
    },
  },
};
script>

<style lang="scss" scoped>

style>

• 效果

highcharts中文文档：https://www.highcharts.com.cn/demo/highcharts/column-basic