Examples:折线图的基本使用

在tsx文件中导入Examples图表的方法

安装插件：

用npm安装

npm install --save echarts-for-react

npm install echarts --save //如果有报错找不到echarts模块，需要在安装一下exharts'

用yarn安装

yarn add echart

yarn add echarts-for-react 

实现功能：

        1.对图表系列信息进行修改（设置颜色，样式）

        2.修改Y轴刻度内容

1)是否平滑曲线显示。(smooth: true)

series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],//数据
      type: 'line',//series-line：折线/面积图
      smooth: true
    }
  ]

 2）是否显示图例（legend. show ）

legend:{

    show:true,

    icon:"rect",

  },

import Echart from 'echarts-for-react';
export default () => {
  const option = {
    // 提示信息
    tooltip: {
      trigger: 'axis',
      formatter: '{b} : {c}',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    color: ['#0cf', '#f3f', '#1748fc'], // 调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
    legend: {
      // 图例组件。
      show: true,
      icon: 'rect',
      // 图例项的 icon。ECharts 提供的标记类型包括'circle', 'rect'：矩形, 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
      right: '0%',
      top: '8%',
      itemGap: 40,
      itemHeight: 20,
      itemWidth: 20,
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        // 坐标轴刻度标签的相关设置。
        formatter: '{value} %', // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
      },
    },
    series: [
      {
        name: 'aa',
        data: [24, 20, 20, 36, 12, 13, 18],
        type: 'line',
        smooth: true,
      },
      {
        name: 'bb',
        data: [30, 23, 33, 10, 12, 13, 13],
        type: 'line',
        smooth: true,
      },
      {
        name: 'cc',
        data: [20, 40, 30, 10, 12, 13, 12],
        type: 'line',
        smooth: true,
      },
    ],
  };
  return <Echart option={option} style={{ width: '100%', height: '95%' }} />;
};