在vue中使用echarts以及簡單關(guān)系圖的點(diǎn)擊事件
1.安裝
在Vue項(xiàng)目中打開終端執(zhí)行命令：
npm install echarts --save
下載后在package.json文件中可以看到下載的Echarts版本：
2.導(dǎo)入
在需要使用Echarts圖表的頁面中導(dǎo)入：
import * as echarts from "echarts";
如果多個(gè)地方使用的話可以通過全局引入：
import * as echarts from 'echarts'
// 掛載到Vue實(shí)例
Vue.prototype.$echarts = echarts
3.繪制靜態(tài)圖表
在需要用到echarts的地方設(shè)置一個(gè)有寬高的div盒子
<div>
<div
ref="chart"
style="width:800px;height:600px;margin: auto">
</div>
</div>
定義echarts關(guān)系圖的數(shù)據(jù)
data() {
return {
data: [
{
name: "Node 1",
x: 300,
y: 300,
},
{
name: "Node 2",
x: 800,
y: 300,
},
{
name: "Node 3",
x: 550,
y: 100,
},
{
name: "Node 4",
x: 550,
y: 500,
},
],
links: [
{
source: 0,
target: 1,
symbolSize: [5, 20],
label: {
show: true,
},
lineStyle: {
width: 5,
curveness: 0.2,
},
},
{
source: "Node 2",
target: "Node 1",
label: {
show: true,
},
lineStyle: {
curveness: 0.2,
},
},
{
source: "Node 1",
target: "Node 3",
},
{
source: "Node 2",
target: "Node 3",
},
{
source: "Node 2",
target: "Node 4",
},
{
source: "Node 1",
target: "Node 4",
},
],
num: 0, // 點(diǎn)擊次數(shù)
};
},
在methods中定義實(shí)例化echarts對(duì)象的方法，在mounted生命周期中調(diào)用（確保dom元素已經(jīng)掛載到頁面當(dāng)中）
mounted() {
this.getEchartData();
},
methods: {
getEchartData() {
const chart = this.$refs.chart;
// 初始化echarts
this.mychart = echarts.init(chart);
let that = this;
// option就是需要引進(jìn)echarts關(guān)系圖中的代碼
let option = {
title: {
text: "Basic Graph",
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: "quinticInOut",
series: [
{
type: "graph",
layout: "none",
symbolSize: 50,
roam: true,
label: {
show: true,
},
edgeSymbol: ["circle", "arrow"],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 20,
},
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0,
},
// data: []
data: that.data,
// links: [],
links: that.links,
},
],
};
// option數(shù)據(jù)放入圖表中
this.mychart.setOption(option);
},
},
啟動(dòng)項(xiàng)目，在頁面中看到如下效果：
4. 關(guān)系圖節(jié)點(diǎn)點(diǎn)擊事件
上面只是展示了靜態(tài)的關(guān)系圖，如節(jié)點(diǎn)數(shù)據(jù)太多，各節(jié)點(diǎn)關(guān)系復(fù)雜，就可只展示主要數(shù)據(jù)，其他可通過點(diǎn)擊節(jié)點(diǎn)查看各節(jié)點(diǎn)關(guān)系
需求：新建一個(gè)Node5，Node5和Node2有關(guān)系，點(diǎn)擊Node2展示Node5節(jié)點(diǎn)
在上面原本的getEchartData()方法中，添加關(guān)系圖的節(jié)點(diǎn)點(diǎn)擊事件
通過事件參數(shù)param中的dataType屬性值確認(rèn)點(diǎn)擊的對(duì)象是關(guān)系圖節(jié)點(diǎn)還是節(jié)點(diǎn)之間的邊緣，值為node時(shí)點(diǎn)擊的是節(jié)點(diǎn)，值為edge時(shí)點(diǎn)擊的是邊緣
通過param中的dataIndex值確定點(diǎn)擊的節(jié)點(diǎn)元素
完整代碼如下：
getEchartData() {
const chart = this.$refs.chart;
// 初始化echarts
this.mychart = echarts.init(chart);
let that = this;
// option就是需要引進(jìn)echarts關(guān)系圖中的代碼
let option = {
title: {
text: "Basic Graph",
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: "quinticInOut",
series: [
{
type: "graph",
layout: "none",
symbolSize: 50,
roam: true,
label: {
show: true,
},
edgeSymbol: ["circle", "arrow"],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 20,
},
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0,
},
// data: []
data: that.data,
// links: [],
links: that.links,
},
],
};
// echarts圖表的點(diǎn)擊事件，可通過param參數(shù)確認(rèn)點(diǎn)擊的對(duì)象
that.mychart.on("click", function (param) {
if (param.dataType == "node") {
// Node2的 param.dataIndex 值為1
if (param.dataIndex == 1) {
// 判斷點(diǎn)擊的次數(shù)，單數(shù)顯示Node5數(shù)據(jù)，雙數(shù)隱藏
that.num++;
if (that.num % 2 == 1) {
that.data.push({
name: "Node 5",
x: 900,
y: 300,
});
that.links.push({
source: "Node 2",
target: "Node 5",
});
that.mychart.setOption(option);
} else {
that.data.pop();
that.links.pop();
that.mychart.setOption(option);
}
}
} else {
console.log("點(diǎn)擊了邊", param);
}
});
// option數(shù)據(jù)放入圖表中
this.mychart.setOption(option);
},
最終效果如下：文章來源：http://www.zghlxwxcb.cn/news/detail-480094.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-480094.html
到了這里，關(guān)于在vue中使用echarts以及簡單關(guān)系圖的點(diǎn)擊事件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
