echarts使用与踩坑

0.踩坑点

• 1.当图表不显示在页面(display:none)执行resize可能会导致图表样式混乱

1. 官网示例

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
// 注意: 这里的main元素要有宽度才可以,不然页面上是看不到渲染的图标的,但实际上echarts已经初始化,
// 但是由于绘制挂载的元素没高度不可见 官网这里没有给出对应的main相关的代码 因此直接写一个<div id='main'></div> 是看不到渲染的元素的
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

2. 使用到的一些api

// 窗口变化后 重新绘制图形,达到自适应目的
window.addEventListener('resize', function() {
  // 此处可以使用debounce进行加载优化
    myChart.resize();
  });
// 组件销毁 销毁掉绘制图表
 myChart.dispose();

3.使用到的属性

  const option: EChartsOption = {
      // 标题
      title: {
        // 是否显示标题
        show: true,
        // 标题文字
        text: 'Echarts示例',
        // 图表位置 可以为百分比 或者具体px值
        top: '5%',
        bottom: 10,
        left: 'center',
        right: 'left',
        // 标题样式
        textStyle: {
          fontSize: 12,
          color: '#929292',
        },
        // 副标题
        subtext: '副标题'
        ,
        // 副标题样式
        subtextStyle: {}
      },
      // 提示框
      tooltip: {
        // 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        trigger: 'item',
        // 背景色
        backgroundColor: 'white',
        // 边框
        borderColor: '#3fb1e3',
        // 文字样式
        textStyle: { color: '#333' },
        // 内容自定义
        formatter: (params) => {
          const { marker, name, value } = params;
          // marker为对应颜色小圆点
          return `${name}<br/>${marker}自定义显示内容:${value}`;
        },
        // 可以是字符串 代表{a} {b} 代表params中的参数
        // formatter: '{c}',
      },
      // 图例组件 即 饼图下方的分类 可以点击进行分类的选取 应用到对应的图形上
      legend: {
        // 图例类型 普通
        type: 'plain',
        // 是否展示
        show: true,
        // 位置
        bottom: '2%',
        // 文字样式
        textStyle: { fontSize: '12px', padding: 0, minMargin: 0 },
        // 颜色块大小  => 图例标记的图形宽度
        itemWidth: 15,
        // 图例组件整体宽度
        width: 180,
        // 图例的图形样式
        itemStyle: {
          borderWidth: 0,
        },
      },
      series: [
        {
          name: '示例1',
          // 图标类型 pie 饼图 bar 柱状图
          type: 'pie',
          // 位置
          bottom: 20,
          left: 'center',
          // 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
          // 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
          roseType: 'area',
          // 饼图半径  内半径:[20] 完整的园(披萨) 外半径: ['20%', '40%'] (最中间挖空一块 类似操场 只有跑道)
          radius: ['20%', '40%'],
          // 饼图的中心坐标
          center: ['center', 'center'],
          // 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。 => 会溢出隐藏
          avoidLabelOverlap: true,
          // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
          label: {
            show: true,
            // 标签说明位置 不加带有折线  加了位置后折线会消失
            // position: 'insideTop',
            formatter: '{c}',
          },
          // 颜色 会均分 颜色例如  9条数据 3个颜色 每三个颜色为一组循环
          color: ['#2ea6da', '#3fb1e3', '#b0f5ff'],
          // 高亮区域配置
          emphasis: {
            // 是否开启悬浮高亮
            disabled: false,
            // 高亮区域样式
            itemStyle: {
              color: 'red'
            },
            // 高亮区域旁边的文字说明
            label: {
              show: true,
              // formatter: '1122'
            }
          },
          // 数据
          data: [
            { value: 0, name: '分类1' },
            { value: 1, name: '分类2' },
            { value: 2, name: '分类3' },
            { value: 3, name: '分类4' },
            { value: 5, name: '分类5' },
            { value: 4, name: '分类6' },
            { value: 3, name: '分类7' },
            { value: 6, name: '分类8' },
            { value: 4, name: '分类9' },
          ],
        },
      ],
    };

4.按需加载

如果按需加载后渲染图表缺失,可能你使用到的组件没有按需加载进入

5.react示例注释代码,可直接复制运行

import React, { useEffect } from 'react'
import * as echarts from 'echarts/core';
import {
  BarChart,
  // 系列类型的定义后缀都为 SeriesOption
  LineChart,
} from 'echarts/charts';
import {
  TitleComponent,
  // 组件类型的定义后缀都为 ComponentOption
  TooltipComponent,
  GridComponent,
  // 数据集组件
  DatasetComponent,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);
type EChartsOption = echarts.EChartsCoreOption;

export default function Echarts() {
  useEffect(() => {
    let chartDom = document.getElementById('echarts')!;
    let myChart = echarts.init(chartDom);

    const option: EChartsOption = {
      // 标题
      title: {
        // 是否显示标题
        show: true,
        // 标题文字
        text: 'Echarts示例',
        // 图表位置 可以为百分比 或者具体px值
        top: '5%',
        bottom: 10,
        left: 'center',
        right: 'left',
        // 标题样式
        textStyle: {
          fontSize: 12,
          color: '#929292',
        },
        // 副标题
        subtext: '副标题'
        ,
        // 副标题样式
        subtextStyle: {}
      },
      // 提示框
      tooltip: {
        // 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        trigger: 'item',
        // 背景色
        backgroundColor: 'white',
        // 边框
        borderColor: '#3fb1e3',
        // 文字样式
        textStyle: { color: '#333' },
        // 内容自定义
        formatter: (params) => {
          const { marker, name, value } = params;
          // marker为对应颜色小圆点
          return `${name}<br/>${marker}自定义显示内容:${value}`;
        },
        // 可以是字符串 代表{a} {b} 代表params中的参数
        // formatter: '{c}',
      },
      // 图例组件 即 饼图下方的分类 可以点击进行分类的选取 应用到对应的图形上
      legend: {
        // 图例类型 普通
        type: 'plain',
        // 是否展示
        show: true,
        // 位置
        bottom: '2%',
        // 文字样式
        textStyle: { fontSize: '12px', padding: 0, minMargin: 0 },
        // 颜色块大小  => 图例标记的图形宽度
        itemWidth: 15,
        // 图例组件整体宽度
        width: 180,
        // 图例的图形样式
        itemStyle: {
          borderWidth: 0,
        },
      },
      series: [
        {
          name: '示例1',
          // 图标类型 pie 饼图 bar 柱状图
          type: 'pie',
          // 位置
          bottom: 20,
          left: 'center',
          // 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
          // 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
          roseType: 'area',
          // 饼图半径  内半径:[20] 完整的园(披萨) 外半径: ['20%', '40%'] (最中间挖空一块 类似操场 只有跑道)
          radius: ['20%', '40%'],
          // 饼图的中心坐标
          center: ['center', 'center'],
          // 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。 => 会溢出隐藏
          avoidLabelOverlap: true,
          // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
          label: {
            show: true,
            // 标签说明位置 不加带有折线  加了位置后折线会消失
            // position: 'insideTop',
            formatter: '{c}',
          },
          // 颜色 会均分 颜色例如  9条数据 3个颜色 每三个颜色为一组循环
          color: ['#2ea6da', '#3fb1e3', '#b0f5ff'],
          // 高亮区域配置
          emphasis: {
            // 是否开启悬浮高亮
            disabled: false,
            // 高亮区域样式
            itemStyle: {
              color: 'red'
            },
            // 高亮区域旁边的文字说明
            label: {
              show: true,
              // formatter: '1122'
            }
          },
          // 数据
          data: [
            { value: 0, name: '分类1' },
            { value: 1, name: '分类2' },
            { value: 2, name: '分类3' },
            { value: 3, name: '分类4' },
            { value: 5, name: '分类5' },
            { value: 4, name: '分类6' },
            { value: 3, name: '分类7' },
            { value: 6, name: '分类8' },
            { value: 4, name: '分类9' },
          ],
        },
      ],
    };
    const chartResize = () => {
      myChart.resize()
    }
    myChart.setOption(option);
    window.addEventListener('resize', chartResize)
    return () => {
      myChart.dispose()
      window.removeEventListener('resize', chartResize)
    }
  })
  return (
    <>
      <div id='echarts' style={{ height: 300, width: '100%' }}>Echarts</div>

    </>
  )
}