微信小程序-关于Echarts图表的相关内容

echarts 初始化篇

React+Taro+TS+微信小程序篇

1. 使用分包将对应图形的ec-canvas放在分包组件中
2. 新建一个.tsx后缀的页面，引入ec-canvas中的echarts
3. 定义data类型
4. 初始化data数据、option和charts.init
5. 在页面返回<ec-canvas id="自己定" canvas-id="自己定" ec={{onInit: 初始化函数}} />
6. 在 <ec-canvas />外在包裹一层并且给个高度
7. 初始化图表
8. 设置data数据
9. 设置option数据
10. 示例（饼图）

import * as echarts from '../../components/ec-canvas/echarts'
import { memo, useEffect, useRef } from 'react'

import { View } from '@tarojs/components'
import { NoteLabelDto } from '@apis/itinerary'
import { useImmer } from 'use-immer'

interface PieProps {
  list: NoteLabelDto[]
}
interface pieDataType {
  value: number
  name: string
}

const Pie = memo<PieProps>((props) => {
  const { list } = props

  const [pieData, setPieData] = useImmer<pieDataType[]>([])
  const chartRef = useRef<any>()
  const optionRef = useRef({
    backgroundColor: '#ffffff',
    series: [
      {
        label: {
          formatter: (params) => {
            return `{hr|} {name|${params.name}}\n{value|${params.value}%}`
          },
          minMargin: 5,
          lineHeight: 15,
          fontSize: 14,
          rich: {
            name: {
              fontWeight: 600,
              lineHeight: 18,
            },
            value: {
              fontWeight: 'normal',
              color: 'rgba(0, 0, 0, 0.65)',
              lineHeight: 18,
            },
            hr: {
              backgroundColor: 'auto',
              borderRadius: 5,
              width: 5,
              height: 5,
              padding: [5, 5, 0, 0],
            },
          },
        },
        type: 'pie',
        stillShowZeroSum: false,
        center: ['50%', '50%'],
        radius: ['20%', '40%'],
        emphasis: {
          disabled: true,
          scale: false,
        },
        itemStyle: {
          borderWidth: 0,
        },
        data: pieData,
      },
    ],
  })

  // 设置option数据
  useEffect(() => {
    optionRef.current = {
      backgroundColor: '#ffffff',
      series: [
        {
          label: {
            formatter: (params) => {
              return `{hr|} {name|${params.name}}\n{value|${params.value}%}`
            },
            minMargin: 5,
            lineHeight: 15,
            fontSize: 14,
            rich: {
              name: {
                fontWeight: 600,
                lineHeight: 18,
              },
              value: {
                fontWeight: 'normal',
                color: 'rgba(0, 0, 0, 0.65)',
                lineHeight: 18,
              },
              hr: {
                backgroundColor: 'auto',
                borderRadius: 5,
                width: 5,
                height: 5,
                padding: [5, 5, 0, 0],
              },
            },
          },
          type: 'pie',
          stillShowZeroSum: false,
          center: ['50%', '50%'],
          radius: ['20%', '40%'],
          emphasis: {
            disabled: true,
            scale: false,
          },
          itemStyle: {
            borderWidth: 0,
          },
          data: pieData,
        },
      ],
    }
    if (!chartRef.current) return
    chartRef.current.setOption(optionRef.current)
  }, [pieData])

  //设置data数据
  useEffect(() => {
    const _data = list.map((item) => {
      const value = item.percent.slice(0, -1)
      return {
        value: parseInt(value),
        name: item.name,
        itemStyle: { color: item.val },
      }
    })
    setPieData(_data)
  }, [list, setPieData])

  // 初始化图表
  const initChart = (canvas, width, height, dpr) => {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr,
    })

    chartRef.current = chart
    canvas.setChart(chart)
    chart.setOption(optionRef.current)

    return chart
  }

  return (
    <View style={{ height: '600rpx' }}>
      <ec-canvas
        id="mychart-dom-pie"
        canvas-id="mychart-pie"
        ec={{ onInit: initChart }}
      />
    </View>
  )
})

export default Pie

React+TS篇

1. 安装echarts： npm install echarts
2. 把获取dom和高度及初始化ECharts的方法先封装好写成组件
3. 示例（适用多个类型的echart）

import * as echarts from 'echarts'
import React, {useEffect, useRef} from "react";

type Chart = { 
  option:any
}

const MoneyChart:React.FC<Chart> = (props) => {
  const {option} = props
  const chartWrapper = useRef<HTMLDivElement>(null)
  const chart = useRef<any>(null)
  useEffect(() => {
    const height = document.getElementById('root')?.clientHeight 
    if(!chartWrapper.current){return}
      chartWrapper.current.style.height =`${height}px`
      chart.current=echarts.init(chartWrapper.current,'vintage') //初始化ECharts
  },[])
  useEffect(() => {
    chart.current.setOption(option)
  },[option])
  return <div ref={chartWrapper} style={{height:'600px'}}/>
}
export default MoneyChart

4. 在父组件中调用组件
5. 初始化option和data
6. 分别设置option和data
7. 然后将option传给组件即可

遇到的问题

关于echart图表显示不出来的问题

• 解决方法： 是否使用了webpack5 持久化缓存，启用了持久化缓存后，echarts图表显示不出来（前提是你的图表原本能正常显示）

关于标签显示不全问题，标签数据太多，当某个角度的标签太多，标签文字超出边界则显示不出来

• 解决方法：
  • 1、如标签多已成事实，尽可能标签文本占一行，不要换行
  • 2、minAngle: 15, //最小角度
    • startAngle: 270, //起始角度
    • avoidLabelOverlap: true, //是否启用防止标签重叠策略
  • 3、一行文字过多，建议商量去掉部分文字，或开启文字太长省略
    • position: ‘outer’,
    • alignTo: ‘labelLine’,
    • bleedMargin: 20,

echart图表警告：没有宽高

• 解决方法：用style指定宽高

echart图表在小程序体积过大

• 解决方法：使用分包
  • 1、把对应的图形的ec-canvas下载下来，
  • 2、将整个ec-canvas放在使用分包的组件内
  • 3、调用

echarts 使用极坐标或坐标图时提示Cannot read properties of undefined (reading ‘findAxisModel’)

• 解决方法：检查option的参数是否配置正确，是否少了polar配置或者其他参数

echarts 给饼图上的文本标签加⚪点样式

• 解决方法：设置series中的label，在label中的rich中写好样式然后通过的formatter实现

• 示例：

  label: {
    formatter: (params) => {
      returvn `{hr|} {name|${params.name}}\n{value|${params.value}%}`
    },
    minMargin: 5,
    lineHeight: 15,
    fontSize: 14,
    rich: {
      name: {
        fontWeight: 600,
        lineHeight: 18,
      },
      value: {
        fontWeight: 'normal',
        color: 'rgba(0, 0, 0, 0.65)',
        lineHeight: 18,
      },
      hr: {
        backgroundColor: 'auto',
        borderRadius: 5,
        width: 5,
        height: 5,
        padding: [5, 5, 0, 0],
      },
    },
  },

• 效果图
  

echarts 给饼图去掉鼠标滑过的放大效果

• 解决方法：设置series里的emphasis配置

  emphasis: {
    disabled: true, // 关闭高亮
    scale: false, // 关闭放大
  }

echarts 使用自定义颜色时标签与颜色不一致

• 解决方法：在处理data数据时添加itemStyle:{color: ‘’}
• 示例：

useEffect(() => {
 const _data = list.map((item) => {
  const value = item.percent.slice(0, -1)
   return {
    value: parseInt(value),
    name: item.name,
    itemStyle: { color: item.val },
   }
 })
 setPieData(_data)
}, [list, setPieData])