526互联

微信小程序中使用ec-canvas

发布时间 2023-03-30 11:36:00作者: ZerlinM

首先引入ec-canvas插件

首先，下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。
然后拷贝项目中的 ec-canvas 到自己的项目中，我是拷贝到了components文件夹中。

ec-canvas 目录下有一个 echarts.js，默认我们会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载最新发布版，或者从官网自定义构建以减小文件大小。

代码如下：
index.config.ts

export default definePageConfig({
  navigationBarTitleText: 'Echarts',
  usingComponents: {
    "ec-canvas": '@/components/ec-canvas/ec-canvas'
  }
})

index.tsx

import React, { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
import { View, Image } from '@tarojs/components'
// @ts-ignore
import * as echarts from '@/components/ec-canvas/echarts';
import s from './index.module.scss'

let chart: any = null;

const EchartsView: React.FC = () => {
  const [echartsData, setEchartsData] = useState<any>(null);

  const [ec, setEc] = useState<any>({
    // 初始化图表
    onInit: (canvas, width, height) => {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(chart);
      return chart;
    }
  });

  useEffect(() => {
    getEchartsData()
  }, [])

  useEffect(() => {
    const option = {
      title: {
        // text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        bottom: '18rpx',
        data: ['日流量', '日均液位']
      },
      xAxis: [{
        type: 'category',
        boundaryGap: 1,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        data: echartsData?.x,
      }],
      yAxis: [{
        type: 'value',
        name: '',
        splitLine: {
          show: true,
          lineStyle: {
            color: '#A1A7B3',
            width: 0.5,
            opacity: .6,
            type: 'dashed'
          }
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
        },
        axisTick: {
          show: false
        }
      }],
      series: [
        {
          name: '日流量',
          type: 'bar',
          barWidth: '20%',
          data: echartsData?.flow,
        },
        {
          name: '日均液位',
          type: 'line',
          smooth: false,
          stack: '总量',
          // symbolSize: 5,
          showSymbol: false,
          itemStyle: {
            normal: {
              color: '#001df1',
              lineStyle: {
                color: '#001df1',
              },
            }
          },
          data: echartsData?.line,
        },
      ]
    };
    //这里一定要做个charts是否存在的判断，因为万一ec那里没有初始化，这里就会报错
    if (chart) {
      chart.setOption(option);
    }
  }, [echartsData])

  const getEchartsData = () => {
    // 模拟接口获取数据
    setTimeout(() => {
      setEchartsData({
        x: ['1', '2', '3', '4', '5', '6'],
        flow: [5, 20, 36, 10, 10, 20],
        line: [50, 30, 46, 13, 20, 10]
      })
    }, 500)
  }

  return (
    <View className={s.comMonitor}>
      <View className={s['canvas-container']}>
        {/* @ts-ignore */}
        <ec-canvas id='com-echarts' canvas-id='com-echarts' ec={ec}></ec-canvas>
      </View>
    </View>
  )
}

export default EchartsView;

注意（踩坑）的点：

1 ec-canvas组件标签这里一定要设置百分比宽高，不然页面不显示

2 ec初始化渲染图表的顺序一定要在数据挂载之前，为了保证这一点，要在数据挂载那里做一个异步，不然概率性出现数据挂载在初始化渲染图表之前

3 在挂载的时候判断一下图表有没有初始化渲染上去，不然图表未初始化渲染会报错

4 一个页面写多个图表的时候不能写一个子组件然后多次调用，这样子只会显示最后一个渲染的图表，乖乖的一个一个的按照下面的这个写吧（ TODO 这个多个图表的目前只找到这种写法，应该会有更优的写法，这样写的有点冗余）