前端可視化是一個(gè)前端最基本的技能恐锦，要想做的好看，還是得借助一下百度家的echarts磷雇，那要怎么在Vue中使用echarts毛好？這個(gè)官網(wǎng)沒有給出實(shí)例辣卒，實(shí)例基本都是在jquery里面使用，引入的例子睛榄。
Echarts官網(wǎng)：https://echarts.apache.org/zh/index.html
1:在項(xiàng)目里面安裝echarts
cnpm install echarts --s
2：在需要用圖表的地方引入
import echarts from "echarts";
圖片.png
3：打開vue組件
繼續(xù)寫代碼，代碼如下：
<template>
<div id="app">
<!--為echarts準(zhǔn)備一個(gè)具備大小的容器dom-->
<div id="main" style="width: 600px; height: 400px"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
name: "",
data() {
return {
charts: "",
opinionData: ["3", "2", "4", "4", "5"],
};
},
methods: {
drawLine(id) {
this.charts = echarts.init(document.getElementById(id));
this.charts.setOption({
tooltip: {
trigger: "axis",
},
legend: {
data: ["近七日收益"],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["1", "2", "3", "4", "5"],
},
yAxis: {
type: "value",
},
series: [
{
name: "近七日收益",
type: "line",
stack: "總量",
data: this.opinionData,
},
],
});
},
},
//調(diào)用
mounted() {
this.$nextTick(function () {
this.drawLine("main");
});
},
};
</script>
<style scoped>
</style>
這個(gè)時(shí)候想帅，可以看到场靴，加載出的折線圖了，后面可以繼續(xù)進(jìn)行完善港准。
