Vue3下Echarts基本配置(超级简单的c/v操作)
当你不知道如何使用Echarts时,这个便超级适合你,简单快捷的配置方式,而且直接解决你自适应和重绘的问题,直接就是【超级简单的c/v操作】
1.控制台安装Echarts
npm install echarts --save
2.引入echarts(直接复制粘贴)
import * as echarts from 'echarts'
3.将下面方法二的代码直接全部取到你的页面对应位置中(直接复制粘贴)
4.打开echarts官网的示例:echarts图表示例
选取你想要的图表并点击打开后:直接把option里面的内容复制出来直接覆盖步骤2代码中的【//这里放Option配置信息】就完成了。(直接复制粘贴)4.根据需求进行自行修改Option配置信息,多查阅配置手册
响应式数据改变的两种方式
在Vue3项目的开发过程中,使用echarts图表可视化时都是将其作为组件封装然后通过父子传值的方式进行数据传递。但是数据都是在页面渲染完毕后才获取到,相当于我们的图表已经获取到了才拿到了值,所以我们需要进行重绘操作。以此,经过学习和项目经历,有两种便捷方式可以使用。
方法一(watch监听方式)
我们可以对响应式数据进行监听,数据改变我们就进行一次调用绘制图表的方法。
<div id="myEchartsschool" class="timeback" :style="{ width: '100%', height: '100%' }" ></div>
|||||||||||||||||||||||||||||||||||||||||||||||
import { onMounted, onUnmounted, watch } from 'vue'
|||||||||||||||||||||||||||||||||||||||||||||||
props: {
//传递的数据
//schoolgj: [],
},
setup(props) {
let myEchartsschool = echarts
onMounted(() => {
method.initChart()
})
onUnmounted(() => {
myEchartsschool.dispose
})
const method = reactive({
initChart() {
let chart = myEchartsschool.init(
document.getElementById('myEchartsschool')
)
chart.setOption(
//这里放Option配置信息
)
//页面自适应调整
window.addEventListener('resize', () => {
if (chart) {
chart.resize()
}
})
},
})
//通过监听进行对图表的重绘
watch(() => props.schoolgj,
(count, prevCount) => {
// 绘制图表
method.initChart()
},
{
deep: true,
}
)
return {
...toRefs(method),
}
}
方法二(setOption的第二参数进行设置)推荐!!!
我们还可以echarts内部方法参数进行设置,setOption的第二参数设置为true/false都可以实现重绘,但是重绘的方式不一样。
设置为true时:就是notMerge,只进行重绘,数据不合并
设置为false时:就是Merge,只进行重绘,数据会进行合并
<div id="myEchartsschool" class="timeback" :style="{ width: '100%', height: '100%' }" ></div>
|||||||||||||||||||||||||||||||||||||||||||||||
import { onMounted, onUnmounted } from 'vue'
|||||||||||||||||||||||||||||||||||||||||||||||
props: {
//传递的数据
//schoolgj: [],
},
setup(props) {
let myEchartsschool = echarts
onMounted(() => {
method.initChart()
})
onUnmounted(() => {
myEchartsschool.dispose
})
const method = reactive({
initChart() {
let chart = myEchartsschool.init(
document.getElementById('myEchartsschool')
)
chart.setOption(
//这里放Option配置信息
)
//页面自适应调整
window.addEventListener('resize', () => {
if (chart) {
chart.resize()
}
})
},
})
return {
...toRefs(method),
}
}
自适应设置
解决:当页面分辨率进行改变后,需要echarts可视化图表进行自动重新绘制并改变大小
使用方式:将以下代码插入进你所调用的echarts方法里面(如上面完整代码)
```javascript
window.addEventListener('resize', () => {
if (chart) {
chart.resize()
}
})