vue3 动态刷新echarts数据
最近在搞vue3项目,用composition API的写法的话的的确确之前很多插件都不好用了,echarts数据刷新这里也是苦恼了一阵首先setup全局数据用provide和inject就能搞定,主要是数据刷新这里的写法。因为vue3的setup里屏蔽了this,并且在setup调起的时期页面还没构建生成,获取不到元素,所以不能像vue2那样直接this.setOption了,要稍微改动一下..
·
最近在搞vue3项目,用composition API的写法的话的的确确之前很多插件都不好用了,echarts数据刷新这里也是苦恼了一阵
首先setup全局数据用provide和inject就能搞定,主要是数据刷新这里的写法。因为vue3的setup里屏蔽了this,并且在setup调起的时期页面还没构建生成,获取不到元素,所以不能像vue2那样直接this.setOption了,要稍微改动一下
...
setup() {
let echarts = inject("ec"); // 我的项目把echarts注册到全局了,所以从这里拿,这个看具体需求
let chart; // 这里是chart的根
const chartOption = (param) => chart.setOption({ // 这里把配值项封装成方法,用这个方法来进行刷新
title: {text: "这里是title"},
tooltip: { // 鼠标移上去的提示
trigger: 'axis', // 以坐标轴为参数
axisPointer: { // 好像是显示十字线:)
type: 'cross'
},
backgroundColor: 'rgba(255,255,255,0.8)', // 背景
position: (pos, params, el, elRect, size) => { // 弹窗显示的位置,这里为了保持在左右上角
let obj = {top: 10};
obj[['left', 'right'][+(pos[0] < size['viewSize'][0] / 2)]] = 30;
return obj
},
extraCssText: 'text-align: left'
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
},
yAxis: {},
series: [
{
name: 'BTC-USDT',
type: "k",
data: param
},
],
});
onMounted(() => { //需要获取到element,所以是onMounted的Hook
chart = echarts.init(document.getElementById("customerChart")); // 这里就可以获取到这个元素了
chartOption(testData) // 绘制图表
window.onresize = function () { //自适应大小
chart.resize();
};
});
return {
chartOption
}
}
用这种写法每次需要更新的时候就调用 chartOption 方法就好了
本文的例子是K线图,其他类型图同理
更多推荐
已为社区贡献1条内容
所有评论(0)