vue使用echarts不显示，是啥问题？该怎么解决？
接口没有问题，控制台也没有报错
但没有展示结果：
<template> <div class="content" style="padding: 10px 20px; display: flex; height: 100%">
<div class="header">
<el-form :model="selectForm" ref="selectForm" :rules="rules">
<el-form-item
prop="standardization"
style="display: flex"
label="数据标准化的方法"
>
<el-select
v-model="selectForm.standardization"
placeholder="请选择需要使用数据标准化的方法"
>
<el-option
v-for="(item, index) in standardizationOption"
:key="index"
:value="item.value"
:label="item.name"
></el-option>
</el-select>
</el-form-item>
</el-form>
<el-button
class="header-button"
type="primary"
show-type="plain"
@click="submit"
>
提交</el-button
>
</div>
<div class="card-wrapper">
<div class="card-header">
<div class="card-title-wrapper">
<img
class="card-title-img"
src="@/assets/images/home/other-train.svg"
alt="数据结果"
/>
<div class="card-title-text">数据结果展示</div>
</div>
<div>
<el-icon
name="direction-expansion2"
class="el-icon-full-screen"
title="放大"
></el-icon>
</div>
</div>
<div class="card-split-line"></div>
<div class="content-wrapper" style="position: relative">
<div id="annual-plan-chart" style="height: calc(750px - 2.5rem)"></div>
</div>
</div>
</div>
</template>
<script>
import {getDataBZH,getData1BZH,getAnalysisList,editStandardization} from '../api/paid'
import * as echarts from "echarts"
import * as ecStat from 'echarts-stat'
export default {
name: "houseList",
components: {},
data() {
return {
selectForm: {},
standardizationOption: [
{ name: "极差标准化法", value: "极差标准化法" },
{ name: "L1范数归一化", value: "L1范数归一化" },
{ name: "L2范数归一化", value: "L2范数归一化" },
{ name: "分位数规范化", value: "分位数规范化" },
{ name: "中心化", value: "中心化" },
],
v: [],
x:[],
rules: {},
analysisName: [],
};
},
created() {
},
mounted() {
},
methods: {
getData1BZH() {
getData1BZH().then((res) => {
if (res.code == 200) {
this.v = res.data;
}
});
},
// x数据集
getDataBZH() {
getDataBZH().then((res) => {
if (res.code == 200) {
this.x = res.data;
}
});
},
// 提交
submit() {
const data ={
standardization:this.selectForm.standardization
}
editStandardization(data).then(res=>{
if (res.code == 200) {
this.getData1BZH()
setTimeout(() => {
this.initCharts(this.v);
}, 300);
// this.getDataBZH()
// setTimeout(() => {
// this.initCharts(this.x);
// }, 500);
}
})
},
// excharts绘图
initCharts(data) {
let id = "annual-plan-chart";
let dom = document.getElementById(id);
let myChart = echarts.getInstanceByDom(dom);
if (myChart == null) {
// 基于准备好的dom，初始化echarts实例
myChart = echarts.init(dom);
} else {
myChart.clear();
}
echarts.registerTransform(ecStat.transform.clustering);
var CLUSTER_COUNT = 6;
var DIENSIION_CLUSTER_INDEX = 2;
var COLOR_ALL = [
"#37A2DA",
"#e06343",
"#37a354",
"#b55dba",
"#b5bd48",
"#8378EA",
"#96BFFF",
];
var pieces = [];
for (var i = 0; i < CLUSTER_COUNT; i++) {
pieces.push({
value: i,
label: "cluster " + i,
color: COLOR_ALL[i],
});
}
// 绘制图表
myChart.setOption({
standardization: [
{
source: data,
},
{
transform: {
type: "ecStat:clustering",
// print: true,
config: {
clusterCount: CLUSTER_COUNT,
outputType: "single",
outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX,
},
},
},
],
tooltip: {
position: "top",
},
visualMap: {
type: "piecewise",
top: "middle",
min: 0,
max: CLUSTER_COUNT,
left: 10,
splitNumber: CLUSTER_COUNT,
dimension: DIENSIION_CLUSTER_INDEX,
pieces: pieces,
},
grid: {
left: 120,
},
xAxis: {},
yAxis: {},
series: {
type: "scatter",
encode: { tooltip: [0, 1] },
symbolSize: 5,
itemStyle: {
borderColor: "#555",
},
standardizationIndex: 1,
},
});
},
},
};
</script>
<style lang="scss" scoped>
.content {
flex-direction: column;
}
.header {
display: flex;
height: 50px;
}
.header-button {
margin-left: 20px;
height: 40px;
}
.card-wrapper {
background-color: white;
margin-top: 20px;
padding: 20px;
border-radius: 8px;
.card-split-line {
margin: 10px 0 20px 0;
height: 2px;
background: linear-gradient(
-90deg,
rgba(215, 224, 234, 0),
rgba(210, 221, 234, 1)
);
}
.card-header {
display: flex;
justify-content: space-between;
.card-title-wrapper {
display: flex;
align-items: center;
gap: 10px;
.card-title-img {
width: 16px;
height: 16px;
}
.card-title-text {
font-size: 16px;
font-family: PingFangSC, PingFangSC-Medium, sans-serif;
font-weight: bold;
text-align: right;
color: #333333;
line-height: 22px;
}
.card-title-icon {
font-size: 16px;
color: black;
cursor: pointer;
}
.card-title-icon:hover {
color: #2b90ff;
}
}
}
.content-wrapper {
height: calc(100% - 60px);
}
}
</style>
回答：
这两个地方改一下看看：
mounted() { this.initCharts([]); // 初始化空的图表
},
async submit() {
const data ={
standardization: this.selectForm.standardization
};
const res = await editStandardization(data);
if (res.code == 200) {
const resData1 = await getData1BZH();
if (resData1.code == 200) {
this.v = resData1.data;
this.initCharts(this.v);
}
}
},
回答：
在
mounted() {this.initCharts()
},
先传空初始化
这个判断添加不对, 你的echarts.init(dom)是没有执行的
其实也不太需要这样, 直接echarts.init(dom)就可以了, echarts是必须要执行echarts.init(dom)
回答：
我通常这样写
data(){ return {
myCharts:null,
}
}
mounted(){
this.loadChart();
},
methods:{
loadChart(xData,yData){
let option = {
//...........
};
if(this.myEcharts){
this.myEcharts.setOption(option);
}else{
let dom = document.getElementById("chart-box");
this.myEcharts = Echarts.init(dom);
this.myEcharts.setOption(option);
}
},
}
以上是 vue使用echarts不显示，是啥问题？该怎么解决？ 的全部内容， 来源链接： utcz.com/p/934232.html
