【Vue开发技巧】如何在Vue3中使用Echarts？ |
您所在的位置：网站首页 › graphjs教程 › 【Vue开发技巧】如何在Vue3中使用Echarts？ |
【Vue开发技巧】如何在Vue3中使用Echarts？
|
前言
最近在捣鼓Vue3，setup中想试试Echarts，这不，用完之后真香！😁 在前端做可视化项目中，不得不提到Echarts，一个专业的可视化插件，推荐还未使用过的同学。
话不多说，开干！ 使用Echarts 引入包 npm install echarts --save我们这里使用的是npm导入，喜欢用yarn的同学可以自行导入。 使用 首先，我们定义一下template其次，在文件中导入Echarts import * as echarts from "echarts";然后，我们在script中进行使用 export default { name: "echartsBox", setup() { /// 声明定义一下echart let echart = echarts; onMounted(() => { initChart(); }); onUnmounted(() => { echart.dispose; }); // 基础配置一下Echarts function initChart() { let chart = echart.init(document.getElementById("myEcharts"), "dark"); // 把配置和数据放这里 chart.setOption({ xAxis: { type: "category", data: [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ] }, tooltip: { trigger: "axis" }, yAxis: { type: "value" }, series: [ { data: [ 820, 932, 901, 934, 1290, 1330, 1320, 801, 102, 230, 4321, 4129 ], type: "line", smooth: true } ] }); window.onresize = function() { //自适应大小 chart.resize(); }; } return { initChart }; } };效果图就是这样啦！！
在正式开发中，我们可能多处使用到Echarts，所以大家可以写一个EchartsCommon，把height、width和setOption定义为动态接收props，这样就方便调用啦！ Asscre是一名专注于前端、Flutter、Go研究的小码农，觉得我的文章对你有所帮助，请点赞👍+关注😄，我们一起加油！ 文章所示为个人见解，如果有更好的实现方式，欢迎大家在评论区分享。 |
【本文地址】