vue使用echarts重点 main.js
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;
vue代码如下
//setTimeout内部this实际上是windows,所以如果内部需要使用data变量,需要把this保存起来当参数传进去
//setTimeout 第一个参数是函数体,如果是已定义好的函数就不需要加 function(){} 直接把函数名放进去
// 第二个参数是延迟时间(毫秒)
// 从第三个参数开始是要调用函数的参数,如果没有可以不填,如果需要传保存的this就用上了
<template>
<div id="myChart" :style="{ width: '900px', height: '900px' }"></div>
</template>
<script>
import "echarts/lib/component/grid";
export default {
data() {
return {
data: [],
myChart: "",
option: ""
};
},
mounted() {
this.init();
let that = this;
setTimeout(this.run, 3000, that);
setInterval(this.run, 3000, that);
},
methods: {
init() {
this.myChart = this.$echarts.init(document.getElementById("myChart"));
for (let i = 0; i < 5; ++i) {
this.data.push(Math.round(Math.random() * 200));
}
console.log(this.data.length);
this.myChart.setOption({
xAxis: {
max: "dataMax"
},
yAxis: {
type: "category",
data: ["A", "B", "C", "D", "E"],
inverse: true,
animationDuration: 300,
animationDurationUpdate: 300,
max: 2
},
series: [
{
realtimeSort: true,
name: "X",
type: "bar",
data: this.data,
label: {
show: true,
position: "right",
valueAnimation: true
}
}
],
legend: {
show: true
},
animationDuration: 0,
animationDurationUpdate: 3000,
animationEasing: "linear",
animationEasingUpdate: "linear"
});
},
run(that) {
for (var i = 0; i < that.data.length; ++i) {
if (Math.random() > 0.9) {
that.data[i] += Math.round(Math.random() * 2000);
} else {
that.data[i] += Math.round(Math.random() * 200);
}
}
that.myChart.setOption({
series: [
{
type: "bar",
data: that.data
}
]
});
}
}
};
</script>
<style></style>