Echarts的官方折线图基础配置项说明

新手如何在react项目中使用Echarts做简单的折线图呢，这就为你说明简单的步骤及基础配置向说明

第一步，引入下载Echarts插件

• 安装方式有三种：

从gitHup中获取 apache/echarts 项目的 release 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件。

从npm获取

npm install echarts --save

从CDN中获取 推荐从 jsDelivr 引用 echarts。

在线定制 如果只想引入部分模块以减少包体积，可以使用 ECharts 在线定制功能。

第二步，如何在项目中引入Echarts

• 当你安装完了Echarts，不管是通过哪种方式安装的，都可以进行下面的操作

引入Echarts import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
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]
    }
  ]
});

按需引入 ECharts 图表和组件

上面的代码会引入 ECharts 中所有的图表和组件，但是假如你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

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

// 接下来的使用就跟之前一样，初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  // ...
});

关于配置项一些简单的文字说明，这里我做了一个小demo，简单介绍一下，如果只是简单的折线图或者是柱状图，就完全是够用的

如图，可以看到的是右上角的小图标，可以切换当前的折线图为柱状图，从右往左数第五个

第四个是当前的折线图的样式，第六个是刷新列表数据，第七个是下载当前图表的功能，第三个是切换为可视化数据视图的效果

• 柱状图

• 可视化数据视图

......极速更新中，有什么可以下方留言