文章目录前言一、echarts是什么二、flash分区调整1.注意你购买的flash大小2.调整分区大小3.配置内核修改flash大小三、引入echarts代码1.引入库2.修改后端传输的速度3.写一个echarts的demo4.编译前端代码5.编译和烧写整体固件6.后台监测日志7.结果总结前言在上述的两篇ESP文章中介绍了如何跑通官方demo如何使用官方的demo完成对官方开发板上小灯的控制。今天我们要在官方的demo中引入echarts组件来完善图表的表示。一、echarts是什么echarts 在前端使用非常多的一个图表工具非常方便。官方链接二、flash分区调整1.注意你购买的flash大小在购买的时候有让你选flash的大小如果太小了可能放不下echarts。这个要注意2.调整分区大小我是买的8M的flash下面是我的分区。官方板直接用我划分的这个分区就好。# Name, Type, SubType, Offset, Size, Flags# Note: if you have increased the bootloader size, make sure to update the offsets to avoid overlapnvs, data, nvs, 0x9000, 0x6000, phy_init, data, phy, 0xf000, 0x1000, factory, app, factory, 0x10000, 0x1D0000, www, data, spiffs , , 6M,3.配置内核修改flash大小选择flash的配置选择8M的flash空间三、引入echarts代码1.引入库进入/esp/restful_server/front/web-demo 目录执行npm install echarts2.修改后端传输的速度代码路径/esp/restful_server/main/rest_server.c修改这个参数是为了提高服务器反应的速度不然你会发现这个网页访问很慢3.写一个echarts的demo直接将原/esp/restful_server/front/web-demo/src/views/Chart.vue 的内容替换成下面的即可templatev-container fluidtemplatediv idmainstyleheight: 600px; width: 1200px/div/template/v-container/templatescriptimport*asechartsfromecharts/core;// 引入柱状图图表图表后缀都为 Chartimport{LineChart}fromecharts/charts;//这里是按需引入因为全部引入echarts太大了import{TitleComponent,TooltipComponent,GridComponent,LegendComponent,DatasetComponent,TransformComponent,DataZoomComponent,}fromecharts/components;// 标签自动布局、全局过渡动画等特性import{LabelLayout,UniversalTransition}fromecharts/features;// 引入 Canvas 渲染器注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步import{CanvasRenderer}fromecharts/renderers;// 注册必须的组件echarts.use([LegendComponent,TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,LineChart,LabelLayout,UniversalTransition,CanvasRenderer,DataZoomComponent,]);exportdefault{data(){return{myChart:null,option:{title:{text:Stacked Line,},tooltip:{trigger:axis,},legend:{data:[Email,Union Ads,Video Ads,Direct,Search Engine],},grid:{left:3%,right:4%,bottom:3%,containLabel:true,},toolbox:{feature:{saveAsImage:{},},},xAxis:{type:category,boundaryGap:false,data:[Mon,Tue,Wed,Thu,Fri,Sat,Sun],},yAxis:{type:value,},series:[{name:Email,type:line,stack:Total,data:[120,132,101,134,90,230,210],},{name:Union Ads,type:line,stack:Total,data:[220,182,191,234,290,330,310],},{name:Video Ads,type:line,stack:Total,data:[150,232,201,154,190,330,410],},{name:Direct,type:line,stack:Total,data:[320,332,301,334,390,330,320],},{name:Search Engine,type:line,stack:Total,data:[820,932,901,934,1290,1330,1320],},],},};},computed:{},methods:{init:function(){varchartDomdocument.getElementById(main);this.myChartecharts.init(chartDom);this.myChart.setOption(this.option);},},mounted(){this.init();},destroyed:function(){},};/script4.编译前端代码在/esp/restful_server/front/web-dem目录下 执行npm run build5.编译和烧写整体固件idf.py build 和 idf.py flash6.后台监测日志idf.py monitor 可以查看代码运行日志7.结果总结优化缓冲区后访问页面加载还是会很慢这没办法ESP发送速率就这样。但是还可以优化比如把前端的包分小一点等等方案。今天到这里了明天整个物联网对接看看。欢迎讨论