微信小程序图表的引入并解决van-tab切换时不显示图表的问题

1、在GitHub上下载ec-canvas,地址如下：

GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本

2、找到文件夹下面的ec-canvas文件夹，把它放在与pages同级的目录。

3、在需要用到页面里面引入，如index.json

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

4、在index.js里面echarts.js

import * as echarts from '../../ec-canvas/echarts.js'

5、在index.wxml里面添加元素

<view class="box">
    <ec-canvas
      id="mychart-dom-bar"
      canvas-id="mychart-bar"
      ec="{{ ec1 }}"
    >ec-canvas>
  view>

6、在index.wxss里面定义容器的大小

.box {
    width:100%;
    height:600rpx;
    margin-top: 30;
    font-size: 42rpx;
    font-weight: bold;
} 

7、在index.js里面添加代码

// 1、引入依赖脚本
import * as echarts from '../../../ec-canvas/echarts.js'
 
///报表数据
var chartData = {
    dataList:[
        {value: 1548,name: 'CityE'},
        { value: 735, name: 'CityC' },
        { value: 510, name: 'CityD' },
        { value: 434, name: 'CityB' },
        { value: 335, name: 'CityA' }
    ],
    dataLegend:['CityA', 'CityB', 'CityD', 'CityC', 'CityE']
  };
function setOption(dataList,dataLegend){
    var option = {
        title: {
          text: '本月未巡检区域占比',
          top:10,
          left: 'center',
          textStyle: {
            fontSize: 14,
            fontWeight: 'normal',
          },
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          bottom: 10,
          left: 'center',
          data:dataLegend,
         itemWidth:8,//图例标记的图形宽度
         itemHeight:8,
         icon:"circle",
        },
        series: [
          {
            type: 'pie',
            radius: '45%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data:dataList,
            label: {
                formatter: '{b}: ({d}%)'
              },
          }
        ]
      };
      return option
}
// 2、进行初始化数据
function initChart(canvas, width, height, dpr) {
    var echart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr // new
    });
    canvas.setChart(echart);
    let option = setOption(chartData.dataList,chartData.dataLegend)
    echart.setOption(option)
    chart = echart
    return echart
  };
  const app = getApp()
  ///定义图表
  var chart = null;
 
Page({
 
  data: {
    ec1: {
      onInit: initChart // 3、将数据放入到里面
    },
  },
 
})
 

8、运行时可能会提示echarts文件比较大，如果不想要这个提示，可以去官网定制echarts类型，地址如下：ECharts 在线构建 https://echarts.apache.org/zh/builder.html   

下载后，是min.js文件，可以重命名为echarts.js并替换掉项目里面的js文件

9、当放置在van-tabs的第二个tab选项时，需要在index.wxml里面加上wx:if条件

<van-tabs sticky offset-top="{{naviBarHeight}}" color="#1989f7"  active="{{activeName}}" bind:change="onChange">
  <van-tab title="选项卡1">van-tab>
 <van-tab title="选项卡2">
      <view class="box" wx:if="{{activeName=='1'}}">
        <ec-canvas
          id="mychart-dom-bar"
          canvas-id="mychart-bar"
          ec="{{ ec1 }}"
        >ec-canvas>
  view>
 van-tab>
van-tabs>

10、js代码

data:{
   activeName: 0, 
},
onChange(event){
    this.setData({
      activeName: event.detail.name,
    });
 
  },