【在vue3.x中使用echarts 】

vue3 配置echarts组合式API1、通过npm安装echartsnpm install echarts vue-echarts2、导入静态echar案例script setup import * as echarts from echarts; import axios from axios; import { onMounted } from vue; // 绘制图表 var options { title: { text: ECharts 入门示例, }, tooltip: {}, xAxis: { data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子], }, yAxis: {}, series: [ { name: 销量, type: bar, data: [5, 20, 36, 10, 10, 20], }, ], }; //初始化函数 function init() { // 基于准备好的dom初始化echarts实例 let Chart echarts.init(document.getElementById(main)); // 渲染图表 Chart.setOption(options); } //声明周期函数自动执行初始化 onMounted(() { init(); }); /script template div idmain styleheight: 200px;width:200px/div /template3、axios请求restfulaxios获取接口数据, 重写 init()方法//初始化函数 const init async () { // 基于准备好的dom初始化echarts实例 var myChart echarts.init(document.getElementById(main)); let result await axios.get(/oa-api/score/studentscoreavg1) let arr result.data let nameArr [] let scoreArr [] arr.forEach(item { // console.log(item); nameArr.push(item.sname) scoreArr.push(item.average) }); console.log(nameArr); console.log(scoreArr); // option.title.text 统计表 option.xAxis.data nameArr option.series[0].data scoreArr myChart.setOption(option) }跨域解决方案后端局部配置# CrossOrigin注解可在方法或Controller类上使用 GetMapping(/data) CrossOrigin(origins http://example.com) // 允许来自http://example.com的跨域请求 public String someData() { return 跨域数据; }后端全局配置import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; Configuration public class WebConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) // 对所有路径应用跨域策略 .allowedOrigins(http://example.com) // 允许来自http://example.com的请求 .allowedMethods(GET, POST, PUT, DELETE) // 允许的方法 .allowedHeaders(*) // 允许的头部信息可以使用*表示任意头部信息 .allowCredentials(true) // 是否允许发送Cookie信息这对于客户端JavaScript很重要尤其是使用AngularJS或类似框架时。 .maxAge(3600); // 预检请求的有效期秒 } }前端配置axios({ url: http://localhost:8080/goods/all, proxy: { host: localhost, port: 8080 }, }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });nginx全局配置aaa拓展SpringBoot CORS 配置详解允许跨域请求的最佳实践-腾讯云开发者社区-腾讯云Spring Boot跨域处理的10种方法在vue2.x中使用echarts1、通过npm获取echartsnpm install echarts --save2、在vue项目中引入echarts在main.js中添加下面两行代码import echarts from echarts Vue.prototype.$echarts echarts注 最新版本的echarts全局配置Vue.prototype.$echarts echarts无效可在调用echarts统计图的文件里用单独导入import * as echarts from echarts;经测试 echarts: ^4.9.0 支持全局引入。3、新建Echarts.vue文件在 template 中添加一个存放echarts的‘div’容器添加 myEcharts() 方法将官方文档中的script内容复制到myEcharts()中修改 echarts.init() 为 this.$echarts.init() 因为上面第二部将echarts保存到全局变量$echarts中。在mounted中调用myEcharts()方法!-- 在Echarts.vue文件中 -- template div classEcharts div idmain stylewidth: 600px;height: 400px;/div /div /template script export default { name: Echarts, methods: { myEcharts(){ var myChart this.$echarts.init(document.getElementById(main)); //配置图表 var option { title: { text: echarts入门示例, }, tooltip: {}, legend: { data: [销量] }, xAxis: { data: [衬衫,羊毛衫,雪纺衫,裤子,高跟鞋,袜子] }, yAxis: {}, series: [{ name: 销量, type: bar, data: [5,20,36,10,10,20] }] }; myChart.setOption(option); } }, mounted(){ this.myEcharts(); } } /script style /style注本例函数中使用ES6写法。mounted(){}等同于mounted:function(){}。myEcharts()方法同理。最后添加进行路由配置。参考Echarts入门教程基础详细-CSDN博客