【每天学一点-06】在React中使用Echarts折线图+饼图，并且联动

官方实例入口地址https://echarts.apache.org/examples/zh/editor.html?c=dataset-link

效果图：

一、安装React-Echarts

npm install --save echarts

npm install --save echarts-for-react

或者

yarn add echarts -S

yarn add echarts-for-react --save

二、初步使用

1、使用函数组件（JS）

import React, { useRef } from 'react';
import EChartsReact from 'echarts-for-react';

const Demo = () => {

  //echarts配置项（必须）
  const option = {
    color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'], //不设置显示默认颜色，一个颜色对应一条折线
    legend: {},
    tooltip: {
      trigger: 'axis',
      showContent: true,
    },
    dataset: {
      // 第一行为横坐标，第一位'product'为固定值
      // 第二行为纵坐标，第一位'服务1'为名称，可自定义
      source: [
        [
          'product',
          '2023-09-15 10:10',
          '2023-09-15 10:15',
          '2023-09-15 10:20',
          '2023-09-15 10:25',
        ],
        ['服务1', 10, 21, 89, 70],
        ['服务2', 20, 46, 23, 56],
        ['服务3', 35, 77, 97, 44],
        ['服务4', 40, 29, 21, 18],
      ],
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      splitLine: {
        show: true, //是否显示网格线
      },
    },
    yAxis: {
      gridIndex: 0,
      max: 100, //纵坐标最大值
      axisLabel: {
        formatter: `{value}%`, //纵坐标显示格式化
      },
    },
    grid: { top: '55%' },
    series: [
      // 折线配置：一条折线一次设置，后续可循环插入
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' },
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' },
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' },