uni-app 下使用ECharts

关键词：uni-app；ECharts；

认知尚浅，如有高见，愿闻其详。

 

  前言：本次的教程与上次的基于WePY 2.x平台下使用ECharts方式基本一致，毕竟目标平台都是微信小程序而已（别的平台未测试），只是就是多了一个参数而已。

  本次使用的是仍然是echarts-for-weixin组件，其对小程序进行了兼容适配，我们进行直接下载项目的组件文件，然后引入就能使用了。其次，还有一种方式，就是去uni-app插件市场进行echarts搜索，是有人已经做了适配的，同样是在此项目的基础上改的，只不过他的方式是通过ec参数传入options，进行数据赋值。废话不多说，开干。

 

步骤

1. 先下载开源项目echarts-for-weixin，把开源项目中ec-canvas文件夹中的文件拷到自己的项目中（千万别下Release，好像还是老版本....）

2. 对引入组件中的ec-canvas.js文件进行一点点的修改（重要）

   本步骤主要是为了解决引入后使用中点击无效果与echart初始化问题，具体问题于文章底部详述。

3. 在需要在pages.json下的globalStyle引入ec-canvas组件

   ①-全局引入ec-canvas组件，用于承载统计图表

    "globalStyle": {
     ...
     "usingComponents": {//引入全局ec-canvas组件
     	"ec-canvas": "/static/plugin/echart/ec-canvas"//根据自己放的路径改变
     }
    },
   

4. 进行Page或Component下的 template节点构建以及style样式引入，

   ①-构建节点

   <template>
     <view class="container">
       <view class="main">
         <ec-canvas
           id="month-trend-bar-dom"
           class="month-trend"
           canvas-id="month-trend-bar"
           @init="echartBarInit"
           :ec="ec"
         >
         </ec-canvas>
       </view>
     </view>
   </template>
   

   ②-引入样式    注意修改lang，本教程中使用的是scss

   <style lang="scss">
   .container{
     margin-top: 30px;
     min-height: 100%;
     .main{
       width: 750rpx;
       .month-trend{
         display: block;
         width: 750rpx;
         height: 500rpx;
       }
     }
   }
   </style>
   

5. 声明data中的ec以及定义echartBarInit初始化方法

   ①-声明 ec

   data: {
       // 有需要的可进行一些配置
       ec: {
       }
   },
   

   ②-定义echarts初始胡方法echartBarInit

   methods: {
       echartBarInit({ detail }) {
         // 初始化方法
         this.initChart(
           detail.echart,//ec-canvas传回的echart参数
           detail.canvas,
           detail.width,
           detail.height,
           detail.dpr,
           detail.wxNode//ec-canvas传回的this
         );
       },
       initChart(echart, canvas, width, height, dpr, wxNode) {
         let chart = echart.init(canvas, null, {//进行chart初始化
           width: width,
           height: height,
           devicePixelRatio: dpr,
         });
         canvas.setChart(chart);
         var option = {
           color: [
             "#37A2DA",
             "#32C5E9",
             "#67E0E3",
             "#91F2DE",
             "#FFDB5C",
             "#FF9F7F",
           ],
           legend: {
             data: ["直接访问", "邮件营销", "联盟广告"],
           },
           xAxis: [
             {
               type: "category",
               data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
               axisTick: {
                 alignWithLabel: true,
               },
             },
           ],
           yAxis: [
             {
               type: "value",
             },
           ],
           series: [
             {
               name: "直接访问",
               type: "bar",
               barWidth: "60%",
               data: [10, 52, 200, 334, 390, 330, 220],
             },
             {
               name: "邮件营销",
               type: "bar",
               stack: "总量",
               label: {
                 normal: {
                   show: true,
                   position: "insideRight",
                 },
               },
               data: [120, 132, 101, 134, 90, 230, 210],
             },
             {
               name: "联盟广告",
               type: "bar",
               stack: "总量",
               label: {
                 normal: {
                   show: true,
                   position: "insideRight",
                 },
               },
               data: [220, 182, 191, 234, 290, 330, 310],
             },
           ],
         };
         chart.setOption(option);//赋值option
         wxNode.chart = chart;//赋值ec-canvas中的chart参数，达到监听效果实现
       },
     }
   

至此，整个教程已经结束了，不出问题，你就可以看到效果了。
完整代码请移步至我的开源项目：Memoyu/mbill_wechat_app: 基于uni-app搭建个人记账小程序

 

点击无效果问题

请参考此文底部：WePY 2.x 下使用ECharts - Memoyu - 博客园 (cnblogs.com)

 

效果