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

一、效果呈现



二、使用步骤

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

部分参考代码

//wxml文件
<!--index.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>
<!-- <van-icon name="chat-o" style="height:100%; float:left;"/> -->
<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() { }      //结束后的回调(成功，失败都会执行)
    })}