原先dataList写法
<script>
import {ref} from 'vue'
const dataList =ref( ["5月", "6月", "7月", "8月", "9月", "10月", "11月"]);
let option = {
//option配置
xAxis: [{
data: dataList,
},
],
};
</script>
结果: x轴不显示
修正后:
const dataList = ["5月", "6月", "7月", "8月", "9月", "10月", "11月"];
原因:
ECharts期望接收的是原始的JavaScript数组或对象,但是Vue的ref
函数将dataList
转为响应式的数据对象时,该对象实际上是一个包装了原始数据的引用。 //更具体的我也不是很i清楚
当我们将dataList放在ref里的时候,它包含了vue的内部属性,并不是原生的JavaScript数组,所以echarts的配置没有收到。