1.如何在Vue中引入echarts?
我这里是通过安装命令:
yarn add echarts --save
注意:还有一种使用方法:
yarn add echarts vue-echarts
不过本人不太喜欢第二种,所以这里主要说第一种.
2.开始使用
第一步:我们在相应文件夹下建一个JS文件夹(我记得vue好像有一个就近维护原则)
在JS文件下创建一个myCharts.js
文件。
import echarts from 'echarts'
const install = function(Vue) {
Object.defineProperties(Vue.prototype, {
$chart: {
get() {
return {
line_chart: function(id) {
this.chart = echarts.init(document.getElementById(id))
this.chart.clear()
let data_0 = []
let data_1 = []
let data_2 = []
let data_3 = []
let data_4 = []
let time = []
let starTime = 90 * 1000 //这个是当前时间向前取值,我选择十秒为一个间隔,最后一个时间节点刚好,所以不用减去
let times = new Date((+new Date() - starTime)) //x轴开始的时间
// console.log(times)
function initDate(value) { //时间格式化
if (value < 9) {
return '0' + value
} else {
return value
}
}
for (let i = 0; i < 10; i++) { //x轴上显示多少个刻度
let hours = initDate(times.getHours())
if (Number(hours) > 23) {
hours = Number(hours) - 24
}
let minutes = initDate((times.getMinutes()))
if (Number(minutes) > 59) {
// minutes = minutes - 60
minutes = initDate(Number(minutes )- 60)
hours = Number(hours) + 1
}
let seconds = initDate((times.getSeconds() + (i * 10)))