【小程序实战】echarts以及vant组件的使用

冷不防 2022-11-25 11:41 542阅读 0赞

一、效果呈现  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 2]  
二、使用步骤

1.导入echarts的组件（[参考官网][Link 1]）  
2.（放在js 文件）修改echarts数据 重点使用legend、tooltip，我还在此基础上进行了datazoom的使用进行数据的交互处理，另外若想在一个页面显示多个图表，在js文件内进行option的多个定义并初始化chart，再在wxml进行引用即可。（另外记得在json文件进行引入）

部分参考代码

//wxml文件
    
    <view class="container">
    <div style="width: 100%; height:52%; padding:0px; background-color:white">
      <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{ { ec }}" style="height:100%;"></ec-canvas>
    </div>
    
    <div style="width: 100%; height:48%; padding:2px; background-color:white; margin-top:0px">
     <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{ { ecs }}"></ec-canvas>
    </div>
    </view>
    
    
    //json文件引入
    { 
      "usingComponents": { 
        "ec-canvas": "../../ec-canvas/ec-canvas",
        "van-icon":"vant-weapp/icon"
      }
    }
    
    
    //js文件
    
    import * as echarts from '../../ec-canvas/echarts';
    
    const app = getApp();
    
    function initChart(canvas, width, height, dpr) { 
      const chart = echarts.init(canvas, null, { 
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(chart);
    
    
     
      var option = { 
        title: { 
          text: '健 康 记 录',
          left: 'center',
    
        },
        dataZoom: [
          {    // 这个dataZoom组件，默认控制x轴。
              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              start: 0,      // 左边在 10% 的位置。
              end: 100         // 右边在 60% 的位置。
          }
      ],
        color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
        legend: { 
          data: ['体温', '心率', '饮水量'],
          top: 30,
          left: 'right',
          backgroundColor: 'white',
          z: 100
        },
        grid: { 
          containLabel: true
        },
        tooltip: { 
          show: true,
          trigger: 'axis'
        },
        xAxis: { 
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          // show: false
        },
        yAxis: { 
          x: 'center',
          type: 'value',
          splitLine: { 
            lineStyle: { 
              type: 'dashed'
            }
          }
          // show: false
        },
        // dataRange:{ 
        // itemHeight:80
        // },
        series: [{ 
          name: '体温',
          type: 'line',
          smooth: true,
          data: [18, 36, 65, 30, 71, 40, 33]
        }, { 
          name: '心率',
          type: 'line',
          smooth: true,
          data: [12, 50, 51, 35, 70, 30, 20]
        }, { 
          name: '饮水量',
          type: 'line',
          smooth: true,
          data: [10, 30, 31, 50, 40, 20, 10]
        }]
      };
      chart.setOption(option);
      return chart;
    }
    function initCharts(canvas, width, height, dpr) { 
      const charts = echarts.init(canvas, null, { 
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(charts);
      var option = { 
        title : { 
            text: '健 康 评 分',
            x:'center'
        },
        tooltip : { 
            trigger: 'item',
            formatter: "{a} {b} : {c} ({d}%)"
        },
        toolbox: { 
            show : true,
            feature : { 
                // mark : {show: true},
                // dataView : {show: true, readOnly: false},
                magicType : { 
                    show: true, 
                    type: ['pie', 'funnel'],
                    option: { 
                        funnel: { 
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                // restore : {show: true},
                // saveAsImage : {show: true}
            }
        },
        // calculable : true,
        series : [
            { 
                name:'',
                type:'pie',
                radius : '52%',
                center: ['50%', '50%'],
                itemStyle:{  
                    normal:{  
                       label:{  
                          show: true, 
                          formatter: '{b} :{c} ' 
                          }, 
                          // labelLine :{show:true} 
                          } 
                     },
                data:[
                    { value:90, name:'身体健康'},
                    { value:80, name:'心理健康'},
                    { value:70, name:'自我评价'},
                ]
            }
        ]
    };
      charts.setOption(option);
      return charts;
    }
    Page({ 
      onShareAppMessage: function (res) { 
        return { 
          title: 'ECharts 可以在微信小程序中使用啦！',
          path: '/pages/index/index',
          success: function () {  },
          fail: function () {  }
        }
      },
      data: { 
        ec: { 
          onInit: initChart
         
        },
        ecs: { 
          onInit: initCharts
        }
      },
      onReady() { 
      }
    });

3.记录一下web-view进行跳转的办法

(1)使用bandtap进行点击事件处理（也可放在van-card中当点击商品card时即可进行跳转）  
(2)创建一个out.wxml文件进行web-view的放置：

<web-view src="https://www.baidu.com/"></web-view>

(3)在js 文件进行跳转页面的事件设置

goBaidu:function(){ 
        wx.navigateTo({ 
          url:'../out', //注意路径
          success:function() { 
     
          },       //成功后的回调；
          fail:function() {  },         //失败后的回调；
          complete:function() {  }      //结束后的回调(成功，失败都会执行)
        })}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70]: /images/20221124/b3757767968849c6ab1b81795b10070c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 1]: /images/20221124/6f89881e89fe4d4bb26cf47347137b41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 2]: /images/20221124/3ca60684c9e44e8aafe31e51208809bc.png
[Link 1]: https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts