发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

Uniapp中使用Echarts的详细过程

汐梓

5

主题

5

帖子

15

积分

新手上路

Rank: 1

积分
15
显示全部楼层
Uniapp中使用Echarts

这里只举例折线图。


一、视图层

画图依赖于canvas标签，记得给它一个id名。
  1. <template>
  2.   <view class="dataTable">
  3.     <u-toast ref="uToast" />
  4.     <view class="dataTable-canvas">
  5.       <view class="dataTable-canvas-title">
  6.         <text>
  7.           近七日学生上报统计
  8.         </text>
  9.       </view>
  10.       <canvas id="myEcharts"></canvas>
  11.     </view>
  12.   </view>
  13. </template>
复制代码
二、逻辑层
  1. <script>
  2. // 将npm方式下载的echarts插件引入进来
  3. import * as echarts from 'echarts';
  4. // 接口
  5. import { getWeekStuReport } from '@/api/dataTable/dataTable.js';

  7. export default {
  8.   data() {
  9.     return {
  10.       // 这里初始化一个null，待会儿用来充当echarts实例
  11.       myChart: null,
  12.     }
  13.   },
  14.   onLoad(options) {
  15.     let that = this;
  16.     // 通过nextTick异步画图
  17.     this.$nextTick(() => {
  18.       that.drawLines();
  19.     });
  20.   },
  21.   beforeDestroy() {
  22.     // 页面关闭时销毁echarts实例
  23.     this.myChart.clear();
  24.     this.myChart.dispose();
  25.   },
  26.   methods: {
  27.     async drawLines() {
  28.       // 这里是初始化的方式，通过id查询找到你的canvas标签
  29.       this.myChart = echarts.init(document.getElementById('myEcharts'));
  30.       // 这里我初始化了4个数组用来存放 后端接口给我的数据
  31.       let data = [];
  32.       let tian = [];
  33.       let reportLine = [];
  34.       let notReportLine = [];
  35.       try {
  36.         let res = await getWeekStuReport();
  37.         console.log(res);
  38.         if (res.code != 0) {
  39.           this.$refs.uToast.show({
  40.             title: res.message,
  41.             type: 'error',
  42.             duration: 3000,
  43.           });
  44.         } else {
  45.           data = res.result;
  46.           data.forEach((item) => {
  47.             // 从接口中提取自己想要的数据
  48.             tian.push(item.type);
  49.             reportLine.push(item.sbNum);
  50.             notReportLine.push(item.notSbNum);
  51.           })
  52.         }
  53.       } catch (e) {
  54.         console.log(e);
  55.       }

  57.       // 这里开始就是echarts的配置项了
  58.       let option = {
  59.         // x轴数据
  60.         xAxis: {
  61.           type: 'category',
  62.           data: tian,
  63.         },
  64.         // y轴数据
  65.         yAxis: {
  66.           type: 'value',
  67.         },
  68.         // 这里写2个对象是2条线条，3个则是3条
  69.         series: [
  70.           {
  71.             // data使用刚才定义的数组，数据从后端接口中取得
  72.             data: reportLine,
  73.             type: 'line',
  74.             smooth: true,
  75.           },
  76.           {
  77.             data: notReportLine,
  78.             type: 'line',
  79.             smooth: true,
  80.           },
  81.         ],
  82.         grid: {
  83.           // 这里可以防止Y轴显示不全
  84.           containLabel: true
  85.         }
  86.       }

  88.       // 这里不要忘记把option设置给echarts实例
  89.       this.myChart.setOption(option);

  91.       // 这里是用于窗口变化时的自适应，利用的是echarts自带的resize方法
  92.       // 如果你打印出来这个echarts实例，可以在函数里面找到这个方法
  93.       window.addEventListener('resize', () => {
  94.         this.myChart.resize()
  95.       });
  96.     },
  97.   },
  98. }
  99. </script>
复制代码
三、样式

记得给canvas宽高就行。
  1. <style scope lang="scss">
  2. .dataTable{
  3.   padding: 10rpx;
  4.   width: 100%;
  5.   height: 100%;
  6.   &-canvas {
  7.     &-title {
  8.       padding: 20rpx 0rpx;
  9.       > text {
  10.         padding-left: 20rpx;
  11.         width: 100%;
  12.         height: 100%;
  13.         font-size: 32rpx;
  14.         font-weight: 550;
  15.         line-height: 32rpx;
  16.         border-left: 10rpx solid #28b5b1;
  17.       }
  18.     }
  19.     #myEcharts {
  20.       width: 100%;
  21.       height: 600rpx;
  22.     }
  23.   }
  24. }
  25. </style>
复制代码
uni-app微信小程序使用echarts图表

前言：本来是使用的ucharts，但因为无法监听图例点击交互，满足不了需求，所以只能放弃。
首先，下载echart组件。可以先随便建个文件夹，然后 npm init。接着下载依赖
  1. npm install echarts mpvue-echarts
复制代码
然后找到 node_modules\mpvue-echarts\下的文件，如图

只留下src，其他的删掉（没有用到）。然后复制 mpvue-echarts文件夹到你项目的components中。如图

接着需要echarts.min.js文件。
链接: ECharts 在线构建定制echarts的js文件,选择自己项目需要的图表及组件,可以选择进行代码压缩。
把下载下来的 echarts.min.js放到你的项目中。！！！还需要修改里面的代码，
!!!修改 echarts.min.js，否则会报错 t.addEventListener is not a function。
1.增加代码
  1. var isDomLevel2 = (typeof window !== 'undefined') && !!window.addEventListener;
复制代码
如下图

2.修改 Le 和 Pe 函数（可通过ctrl+f搜索）如下
  1. // An highlighted block
  2.     function Pe(t, e, n, i) {
  3.         if (isDomLevel2) {
  4.             t.addEventListener(e, n, i)
  5.         } else {
  6.             t.attachEvent('on' + e, n)
  7.         }
  8.     }

  10.     function Le(t, e, n, i) {
  11.         if (isDomLevel2) {
  12.             t.removeEventListener(e, n, i)
  13.         } else {
  14.             t.detachEvent('on' + e, n)
  15.         }
  16.     }
复制代码
3.全文搜索 preventDefault() 修改当前的方法函数增加判断（我一开始没改这个，图表正常没啥问题，但是我用dataZoom滑动时会报错“t.preventDefault is not a function”，然后改为如下代码后就能正常滑动了）
如下
  1. // An highlighted block
  2.     if (isDomLevel2) {
  3.          t.preventDefault(), t.stopPropagation(), t.cancelBubble = !0
  4.     } else {
  5.          t.returnValue = false;
  6.          t.cancelBubble = !0
  7.     }
复制代码
压缩的代码格式化后体积增加了1倍，所以我最后没有格式化，直接在压缩的代码里找到对应位置修改的。 需要准备的东西都已经好了，接下来正片开始！！ 在页面中使用：
  1. <template>
  2.   <view class="echarts-wrap">
  3.     <my-echarts
  4.       id="main"
  5.       ref="mapChart"
  6.       :echarts="echarts"
  7.       :onInit="initChart"
  8.     />
  9.   </view>
  10. </template>

  12. <script>
  13. import * as echarts from "@/pages/data/static/js/echarts.min.js";  //这里根据自己存放的路径修改
  14. import myEcharts from "@/pages/data/components/mpvue-echarts/src/echarts.vue"; //这里根据自己存放的路径修改

  16. let chart = null;  //放外层方便拿到echart实例
  17. export default {
  18.   components: {
  19.     myEcharts,
  20.   },
  21.   data() {
  22.     return {
  23.       echarts,
  24.     };
  25.   },
  26.   onReady() {},
  27.   mounted() {
  28.     setTimeout(() => {
  29.       chart.on("click", (params) => {  //监听图例点击事件（详细参见echart文档）
  30.         this.$emit("chartClick", params);
  31.       });
  32.     }, 500);
  33.     this.updateData() //模拟动态更新数据
  34.   },
  35.   methods: {
  36.     initChart(canvas, width, height) {
  37.       chart = echarts.init(canvas, null, {
  38.         width: width,
  39.         height: height,
  40.       });
  41.       canvas.setChart(chart);
  42.       var option = {
  43.         xAxis: {
  44.           type: "category",
  45.           data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  46.         },
  47.         yAxis: {
  48.           type: "value",
  49.         },
  50.         series: [
  51.           {
  52.             data: [120, 200, 150, 80, 70, 110, 130],
  53.             type: "bar",
  54.           },
  55.         ]
  56.       }; // ECharts 配置项（详细的图表配置参见 echart配置项）

  58.       chart.setOption(option);

  60.       return chart; // 返回 chart 后可以自动绑定触摸操作
  61.     },
  62.     updateData(){
  63.         setTimeout(()=>{
  64.             chart.setOption({
  65.                 series:[{
  66.                     data:[30, 90, 111, 20, 70, 88, 11]
  67.                 }]
  68.             })
  69.         },1000)
  70.     },
  71.   },
  72. };
  73. </script>

  75. <style>
  76. .echarts-wrap {
  77.   width: 100%;
  78.   height: 300px;
  79. }
  80. </style>
复制代码
详细的图表配置参见echart配置项最后效果：

到此这篇关于uni-app微信小程序使用echarts的文章就介绍到这了,更多相关小程序使用echarts内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/266666.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: JWT Json Web Token全面详解

下一篇: Babel自动生成Attribute文档实现详解

发表于 2023-1-2 16:18:45

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4