Echarts引入——绘制一个简单的图表|环球信息

2023-05-10 10:08:31 来源：博客园

(资料图)

获取 ECharts

NPM 安装 ECharts

npm install echarts --save

引入 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 使用必须要的接口。import * as echarts from "echarts/core";// 引入柱状图图表，图表后缀都为 Chartimport { BarChart } from "echarts/charts";// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Componentimport {  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({  // ...});

在 TypeScript 中按需引入

import * as echarts from "echarts/core";import {  BarChart,  // 系列类型的定义后缀都为 SeriesOption  BarSeriesOption,  LineChart,  LineSeriesOption} from "echarts/charts";import {  TitleComponent,  // 组件类型的定义后缀都为 ComponentOption  TitleComponentOption,  TooltipComponent,  TooltipComponentOption,  GridComponent,  GridComponentOption,  // 数据集组件  DatasetComponent,  DatasetComponentOption,  // 内置数据转换器组件 (filter, sort)  TransformComponent} from "echarts/components";import { LabelLayout, UniversalTransition } from "echarts/features";import { CanvasRenderer } from "echarts/renderers";// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型type ECOption = echarts.ComposeOption<  | BarSeriesOption  | LineSeriesOption  | TitleComponentOption  | TooltipComponentOption  | GridComponentOption  | DatasetComponentOption>;// 注册必须的组件echarts.use([  TitleComponent,  TooltipComponent,  GridComponent,  DatasetComponent,  TransformComponent,  BarChart,  LineChart,  LabelLayout,  UniversalTransition,  CanvasRenderer]);const option: ECOption = {  // ...};

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子之后，添加：

然后就可以通过echarts.init方法初始化一个 echarts 实例并通过setOption方法生成一个简单的柱状图，下面是完整代码。

          ECharts        <script src="echarts.js"></script>            
    <script type="text/javascript">      // 基于准备好的dom，初始化echarts实例      var myChart = echarts.init(document.getElementById("main"));      // 指定图表的配置项和数据      var option = {        title: {          text: "ECharts 入门示例"        },        tooltip: {},        legend: {          data: ["销量"]        },        xAxis: {          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]        },        yAxis: {},        series: [          {            name: "销量",            type: "bar",            data: [5, 20, 36, 10, 10, 20]          }        ]      };      // 使用刚指定的配置项和数据显示图表。      myChart.setOption(option);    </script>

关键词：