vue2使用highcharts的一些方法

  • Lanceloft
  • 33 Minutes
  • December 9, 2016

开头逼逼

　　vue2已经出了一段时间了，在正式版发布没多久公司就布置了开发任务，利用vue2进行后台管理业前端部分的重构。一开始还没正式接触项目之前还是觉得vue挺简单的，毕竟之前写了一些react，满屏的jsx，对JavaScript尚且理解不深入的我看起来还是很痛苦。vue相对大部分还是跟html比较像，看起来还是相对简单一点点。结果当自己写起来的时候就发现懵逼了，那时候介绍文档都还只有英文，大约过了一个星期后才有中文翻译文档，一些细节项目的搭建方法也是没有的。还有就是项目引用了vuex，一开始使用的时候因为项目框架由leader搭建起来了，然后我也还没理解完就需要赶着完成，vuex的状态分发增加了不少的难度，基本上就是前期没理解好的时候就是各种绕圈还是没有到达状态的分发。不过现在使用多了以后发现大型项目上进行统一的状态管理确实比较直观。以后学习一定要注意看文档看文档看文档理解完了才去写不懂一定要问。

　　好了逼逼得差不多了我就分享下vue2使用highcharts的一些方法。之前还没使用过highcharts，看着文档引用了jQuery被leader嫌弃了很久而且也没做出数据交互来。后来找到https://gold.xitu.io/entry/5832a8012e958a0069e2ff1a 这篇文章进行学习模仿才写出了。项目里面一些命名是不怎么规范的，只是赶项目&也没想好名字就暂用先。

正式开始

├── App.vue
├── assets
├── components
├── config
├── filter.js
├── lotteryCanvas.js
├── lotteryPrev.js
├── main.js
├── options.js
├── route-config.js
├── store
└── style

src里面的项目结构是这样子的，组件放在components里面，参考掘金的教程就知道我同样把highcharts的options单独放在一个js里面管理。
components里面的charts.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<template>
  <div class="manager-charts">
    <x-chart :id="id0" :option="option0"></x-chart>
    <div class="award-detail">
      <h4 class="award-title">中奖情况</h4>
      <p class="award-details">
        <i></i>
        活动开启时，系统会自动从奖品库中预扣该活动下配置的奖品；活动关闭时，不会立即返还剩余奖品，
        需到活动设置的结束时间到了才会将剩余的奖品返还至奖品库。您也可现在
        <span class="click-back">点击返还</span>
      </p>
      <x-chart :id="id1" :option="option1"></x-chart>
      <div class="look-details">
        <a href="#" class="btn-instant">查看详情</a>
      </div>
    </div>
  </div>
</template>
<style>
</style>
<script>
import { mapGetters, mapActions } from 'vuex';
import options from '../../options';
import XChart from './secondchart';

import '../../style/charts.scss';

export default {
  data() {
    const option0 = options.line;
    const option1 = options.col;
    return {
      id0: 'lineHighchart',
      id1: 'lotteryDetail',
      option0: option0,
      option1: option1,
    };
  },

  components: {
    XChart
  }
};
</script>

XChart是图表的通样选择，在里面定义好所需要的图表大小然后在首页渲染出来，可以比较直观的根据id进行控制。
components里面的secondchart.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<template>
<div class="x-bar">
  <div :id="id"
  :option="option">
  </div>
</div>
</template>

<style>
#lotteryDetail {
  height: 400px;
  min-width:800px;
}
#lineHighchart {
  height: 400px;
  min-width:800px;
}
</style>

<script>
import HighCharts from 'highcharts';

export default {
  // 验证类型
  props: {
    id: {
      type: String
    },
    option: {
      type: Object
    }
  },
  mounted() {
    this.$nextTick(HighCharts.chart(this.id, this.option));
  }
};
</script>

mounted这里跟掘进有点不一样，我参考了官方文档的写法，功能上是一样的，简单介绍下mounted，就相当于jq里面的

$( document ).ready()

是让图表在文档加载完成后再激活，如果图表先于文档加载就会出现错误提示因为找不到节点了。同理的还有canvas也是。
接下来像掘金一样在series里面里面写数据就好，我这里是用接口数据，我把接口数据静态分享下，更加直观一点。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
//这一部分是接口数据
export const chartData = {
  "result": {
    "data": {
      "info": {
        "total": 1,
        "dispatch_total": 0
      },
      "rewards": [{
        "id": 11361,
        "title": "一等奖",
        "count": 1,
        "dispatch_count": 0,
        "percent": 0.0
      }]
    }
  },
  "click": {
    "keys": [
      "00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00"
    ],
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
    "sub": {
      "keys": [
        "00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00"
      ],
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    },
    "total": {
      "click": 6,
      "sub": 0
    },
    "search": {
      "1": "\u5b9e\u65f6",
      "2": "\u6628\u65e5",
      "3": "\u672c\u6708",
      "5": "\u6240\u6709",
      "-1": "\u81ea\u5b9a\u4e49"
    }
  },
};
// 以下是options里面的
import lottery from './store/modules/lottery';

const myData = lottery.state.chartsdata.result.data;
const lineData = lottery.state.chartsdata.click;
const rewards = myData.rewards;
const values = lineData.values;
const subValues = lineData.sub.values;
const lineKeys = lineData.keys;
const xAxisData = [];
const dispatchData = [];
const remainData = [];

const totalReward = '总奖项';
const total = myData.info.total;
const dispatchTotal = myData.info.dispatch_total;
const remainTotal = total - dispatchTotal;

const allValues = values.reduce( (prev, curr) => prev + curr );
const allsubValues = subValues.reduce( (prev, curr) => prev + curr );

rewards.forEach((item, index) => {
  const remainCount = item.count - item.dispatch_count;

  xAxisData.push(item.title);
  dispatchData.push(item.dispatch_count);
  remainData.push(remainCount);
});

xAxisData.push(totalReward);
dispatchData.push(dispatchTotal);
remainData.push(remainTotal);

module.exports = {
  line: {
    chart: {
      type: 'line',
    },
    xAxis: {
      title: {
        text: null
      },
      categories: lineKeys
    },
    yAxis: {
      title: {
        text: null
      },
      categories: ['0', '1', '2', '3', '4'],
      minTickInterval: 1,
      min: 0
    },
    title: {
      text: null
    },
    tooltip: {
      backgroundColor: '#333',
      borderColor: '#333',
      borderRadius: 5,
      shadow: null,
      style: {
        color: '#fff',
        padding: '5px 15px'
      },
      headerFormat: ''
    },
    labels: {
      items: [{
        html: '浏览:' + allValues,
        style: {
          left: '0px',
          top: '350px',
          fontSize: '14px'
        }
      }, {
        html: '提交:' + allsubValues,
        style: {
          left: '60px',
          top: '350px',
          fontSize: '14px'
        }
      }]
    },
    series: [{
      name: '提交量',
      color: '#25cd98',
      fillColor: 'rgba(173,212,154,0.2)',
      data: subValues
    }, {
      name: '浏览量',
      color: '#3cf',
      fillColor: 'rgba(195,235,254,0.2)',
      data: values
    }]
  },
  col: {
    chart: {
      type: 'column'
    },
    title: {
      text: null
    },
    xAxis: {
      categories: xAxisData
    },
    yAxis: {
      min: 0,
      title: {
        text: '占总数的百分比'
      }
    },
    tooltip: {
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
      shared: true
    },
    plotOptions: {
      column: {
      stacking: 'percent'
      }
    },
    series: [{
        name: '已发放',
        color: '#9ae2ff',
        data: dispatchData
      }, {
        name: '剩余量',
        color: '#429be8',
        data: remainData
      }]
  },
};

　　实现的效果就是秀赞抽奖的图表功能，在options里面的方法都是根据highcharts来写的，这一部分需要阅读highcharts的官方文档。个人经验就是在前期时候用静态数据能很好上手也省事很多。但是就是一定要去问静态数据绕的那个圈，我也是后来看懂了公司接口文档和项目结构里面的方法才学会使用，然后基本上看懂了以后效率就是之前的好几倍了。假数据也不要随便写，一定要跟着文档，不然到时候还是会接不上的。

© 2019 lanceloft's blog
POWER BY HEXO, THEME BY LAUGHING