g2plot如何实现面积图和折线图的动态切换？

一开始的时候显示的是面积图：
在这里插入图片描述

当我点击折线图的时候，要变成折线图：
在这里插入图片描述

当我再点击面积图的时候，还要变回面积图：
在这里插入图片描述

要实现这个功能，得知道g2plot几个重要的API。

参考文档如下：https://g2plot.antv.antgroup.com/api/plot-api

第一个是render方法：
在这里插入图片描述

第二个是update方法：
在这里插入图片描述

第三个是destory方法：
在这里插入图片描述

另外，我们还需要知道vue的监听器是什么，怎么使用的。

这里说一下我的思路：

1、页面挂载的时候加载数据，渲染画布，默认使用面积图
2、监听图标类型的改变，如果改变了，先销毁原来的图，再根据图表类型创建新的图，然后渲染

最终的完整代码如下：

<script setup>
import {onMounted, reactive, ref, watch} from "vue";
import {Line, Area} from "@antv/g2plot";
import axios from "axios";
import {MdPreview, MdEditor} from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import {message} from "ant-design-vue";const editText = ref()
const text = ref();
const activeKey = ref('chart');
const chart = ref()
const chartType = ref("area")
const data = ref([])
const blog = ref()
const uniKey = "/area/switch_line"
const isEdit = ref(false)
const title = ref("")
const description = ref("")const updateBlog = async (data) => {console.log(data)await axios({method: "put",url: `http://127.0.0.1:8888/zdppy_amblog_markdown/${blog.value.id}`,data,}).then(() => {message.success("修改代码成功")activeKey.value = "code"})
}const loadBlog = async () => {await axios({method: "get",url: `http://127.0.0.1:8888/zdppy_amblog_markdown?uniKey=${uniKey}`,}).then(resp => {console.log("loadBlog", resp.data)if (resp.data && resp.data.data && resp.data.data.results && resp.data.data.results.length > 0) {blog.value = resp.data.data.results[0]text.value = blog.value.contenttitle.value = blog.value.titledescription.value = blog.value.descriptioneditText.value = blog.value.contentisEdit.value = true}})
}const saveBlog = async (data) => {console.log("save", data)await axios({method: "post",contentType: "application/json",url: "http://127.0.0.1:8888/zdppy_amblog_markdown",data,}).then(() => {message.success("保存代码成功")activeKey.value = "code"})
}const handleEditorSubmit = async () => {if (!title.value) {message.warning("文章的标题不能为空")return}if (!editText.value) {message.warning("文章的内容不能为空")return;}const data = {uniKey,title: title.value,description: description.value,content: editText.value,}if (isEdit.value) {await updateBlog(data)} else {await saveBlog(data)}await loadBlog()
}const loadData = async () => {await axios({method: "get",url: "http://127.0.0.1:8888/zdppy_amg2plot_line",params: {size: 10000,year: "notnull",category: "null",order: "keyDate",}}).then(resp => {if (resp.data && resp.data.data && resp.data.data.results) {data.value = resp.data.data.results}})
}const renderChart = async () => {if (!chart.value) {chart.value = new Area('container', {})}const options = {data: data.value,xField: 'year',yField: 'value',}chart.value.update(options)chart.value.render();
}watch(chartType, async (value, oldValue) => {console.log("xxx", value, oldValue)if (chart.value) {chart.value.destroy();}switch (value) {case "area":chart.value = new Area('container', {})breakcase "line":chart.value = new Line('container', {})break}await renderChart()
})onMounted(async () => {await loadBlog()await loadData()await renderChart()
})</script><template><a-tabs v-model:activeKey="activeKey"><a-tab-pane key="chart" tab="图表"><div style="margin-bottom: 10px;"><a-radio-group v-model:value="chartType"><a-radio-button value="area">面积图</a-radio-button><a-radio-button value="line">折线图</a-radio-button></a-radio-group></div><div id="container"></div></a-tab-pane><a-tab-pane key="code" tab="源码"><MdPreview v-model="text"/></a-tab-pane><a-tab-pane key="edit" tab="编辑"><a-form-item label="标题"><a-input v-model:value="title"/></a-form-item><a-form-item label="描述"><a-textarea v-model:value="description"/></a-form-item><a-form-item label="内容"><MdEditor v-model="editText"/></a-form-item><a-form-item><a-buttontype="primary"html-type="submit"style="margin-left: 40px"@click="handleEditorSubmit">提交</a-button></a-form-item></a-tab-pane></a-tabs>
</template><style scoped>
#config {margin-bottom: 20px;
}#config .config-item {display: flex;justify-content: start;align-items: center;
}#config .label {margin-right: 15px;
}
</style>