用vuex实现全局并在页面调用
Vuex是状态管理器(仓库),它是一个插件,我们在使用之前一般要先安装 vuex 然后使用,我们一般把与 vuex 有关的文件放在 store 目录下,配置好了之后导出 new Vuex.Store() 实例,在 main.js 中配置一下,这时候 Vue.prototype 上会多出来一个属性 $store ,使用 this.$store.dispatch()就能调用到 action 里面的方法,可以在这个方法里面请求后台数据
使用Vue集成Echart插件,然后在组件里生成一张柱状图
1. 引入echarts
2.图表容器 DOM
3.基于准备好的dom,初始化echarts实例
4.指定图表的配置项和数据
5.使用刚指定的配置项和数据显示图表。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!--1. 引入echarts --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script> <style> #main { /* 整个视口区高度 */ height: 100vh; /* height: 600px; */ /* width: 400px; */ } </style> </head> <body> <!-- 2.dom容器 --> <div id="main"></div> <!-- 3.初始化echarts实例 --> <script> // 4.基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById("main")); // 5.指定图表的配置项和数据 option = { title: { text: "Referer of a Website", subtext: "Fake Data", left: "center", }, tooltip: { trigger: "item", }, legend: { orient: "vertical", left: "left", }, series: [ { name: "Access From", type: "pie", radius: "50%", data: [ { value: 1048, name: "Search Engine" }, { value: 735, name: "Direct" }, { value: 580, name: "Email" }, { value: 484, name: "Union Ads" }, { value: 300, name: "Video Ads" }, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: "rgba(0, 0, 0, 0.5)", }, }, }, ], }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
用vuex实现全局并在页面调用、使用Vue集成Echart插件,然后在组件里生成一张柱状图
于 2022-07-07 18:12:58 首次发布