vue版本2.0，本地引用Echarts,粘贴进去即可运行。
- js代码如下：
<script>
const chartList = ['matrix']
export default {
name: 'Matrix',
props: {
dataParam: {
type: Array,
},
},
data() {
return {
myChart: null,
echartsEmpty: false,
}
},
mounted() {
this.getData()
},
methods: {
getData() {
this.getMatrix()
},
getMatrix() {
let xAxisArr = [],
data_1 = [],
data_2 = []
this.dataParam.map((item) => {
xAxisArr.push(item.label)
})
this.dataParam[0].value.map((item) => {
let obj = {}
obj.name = item.value
obj.value = 1
data_1.push(obj)
})
this.dataParam[1].value.map((item) => {
let obj = {}
obj.name = item.value
obj.value = 1
data_2.push(obj)
})
const instance = this.getInstance('matrix')
instance.setOption({
grid: {
top: '20%',
left: '20%',
right: '5%',
bottom: '5%',
width: '70%',
height: '70%',
},
xAxis: {
data: xAxisArr,
axisLabel: {
margin: 15,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
position: 'top',
name: 'predict',
nameLocation: 'center',
nameGap: 35,
},
yAxis: {
data: xAxisArr.slice().reverse(),
axisLabel: {
margin: 15,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
name: 'real',
nameLocation: 'center',
nameRotate: 90,
nameGap: 35,
},
series: [
{
type: 'treemap',
width: '70%',
height: '70%',
top: '20%',
left: '20%',
right: '5%',
bottom: '5%',
roam: false,
nodeClick: false,
breadcrumb: {
show: false,
},
levels: [
{
itemStyle: {
gapWidth: 4,
},
},
{
itemStyle: {
gapWidth: 4,
},
},
],
data: [
{
name: 'nodeA',
value: 2,
color: ['#5470c6', '#91cc75'],
children: data_2.splice(0).reverse(),
},
{
name: 'nodeB',
color: ['#fac858', '#fc8452'],
value: 2,
children: data_1.splice(0).reverse(),
},
],
},
],
})
},
// 获取图表实例
getInstance(item) {
const ele = this.$refs[item]
let instance = this.$echarts.getInstanceByDom(ele)
if (!instance) {
instance = this.$echarts.init(ele)
}
return instance
},
},
}
</script>
- html代码如下：
<!--混淆矩阵-->
<template>
<div class="matrix">
<div class="grid-header">
<span class="grid-title">混淆矩阵</span>
<el-tooltip
content=""
placement="top"
effect="light"
>
</el-tooltip>
</div>
<div ref="matrix" class="item-echart">
<el-empty v-if="echartsEmpty"></el-empty>
</div>
</div>
</template>
- css代码如下：
<style lang="scss" scoped>
.item-echart {
width: 300px;
height: 300px;
margin: 0 50px;
}
.grid-header {
flex: none;
padding: 30px 30px 0 30px;
}
.grid-title {
font-size: 16px;
color: #333;
font-weight: 500;
}
.grid-content {
flex: 1;
}
</style>
- 运行截图：
