export default {
data() {
return {
colors: [
"#f7797d",
"#2C5364",
"#40E0D0",
"#12c2e9",
"#1565C0",
"#6b6b83",
"#11998e",
"#c94b4b",
"#00b09b",
"#CAC531"
],
};
},
mounted() {
this.drawChart();
},
methods: {
//画图
drawChart() {
//建立series1数组,用于存放遍历的series的数据配置信息
var series1 = [];
var myChart = this.$echarts.init(document.getElementById("container"));
let _that = this;
//指定图表的配置项和数据
var option = {
color: this.colors,
legend: {
show: true,
orient: "vertical",
right: 15,
top: 35,
itemGap: 30,
textStyle: {
//图例文字的样式
fontSize: 20
}
},
grid: {
height: 720,
width: 1220,
top: 40
},
xAxis: {
type: "time",
axisLine: {
show: true
},
axisLabel: {
rotate: -11,
margin: 20,
fontWeight: "bold",
fontSize: 14
}
},
yAxis: [
{
splitLine: {
//网格线
lineStyle: {
type: "solid" //设置网格线类型
},
show: true //隐藏或显示
},
axisLabel: {
fontWeight: "bold",
fontSize: 16
},
data: [
"2#回火炉",
"1#回火炉",
"2#冷水机",
"1#清洗机",
"4#加热炉",
"3#加热炉",
"2#加热炉",
"1#加热炉"
]
}
],
//将配置信息数组,赋给series
series: series1
};
//加载数据图表
//第二个参数为true的原因是防止多次请求造成数据错乱
//true:覆盖掉之前的配置信息
myChart.setOption(option, true);
//显示等待画面
myChart.showLoading();
// 接收后端发送过来的数据
this.$axios({
method: "get",
url: "/api/productiton"
})
.then(res => {
var result = res.data;
//隐藏加载动画
myChart.hideLoading();
//循环series内的数据
for (var i = 0; i < result.length; i++) {
series1.push({
type: "custom",
name: result[i].name,
renderItem: function(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
var rectShape = echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}
);
return (
rectShape && {
type: "rect",
shape: _that.$echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}
),
style: api.style()
}
);
},
itemStyle: {
opacity: 1
},
encode: {
x: [1, 2],
y: 0
},
data: result[i].equipment
});
}
})
.catch(error => {
console.log(error);
});
//清空数组,避免多次请求,数据重复添加
series1 = [];
}
}
};
vue中echarts通过axios获取到数据,但是前端页面图却显示不出来!
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
1条回答 默认 最新
- 封印di恶魔 2020-05-26 14:26关注
我都不清楚从哪开始吐槽,正常myChart.setOption(option, true);后,option中用到的变量就固定为setOption之前的值,之后的改动就无效了
就是之后对series1操作都是没意义的,这是正常来说
但是就算后续你对series1的操作有传到option里,你最后让series1 = [] ,那么就无论返回数据是什么,series1的值就一直为空,怎么会显示内容先把series1 = []放在axios前面,然后把myChart.setOption(option, true);放在axios回调中,series1赋值的后面试试
解决 无用评论 打赏 举报
悬赏问题
- ¥15 #MATLAB仿真#车辆换道路径规划
- ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
- ¥15 数据可视化Python
- ¥15 要给毕业设计添加扫码登录的功能!!有偿
- ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗?
- ¥15 微信公众号自制会员卡没有收款渠道啊
- ¥100 Jenkins自动化部署—悬赏100元
- ¥15 关于#python#的问题:求帮写python代码
- ¥20 MATLAB画图图形出现上下震荡的线条
- ¥15 关于#windows#的问题:怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘