echarts类型的阐述

一、echarts类型 ts

import * as echarts from 'echarts/core'; // 引入echarts核心组件
import { BarChart } from 'echarts/charts'; // 引入柱状图组件
import { TitleComponent, TooltipComponent } from 'echarts/components'; // 引入标题和提示框组件
import { CanvasRenderer } from 'echarts/renderers'; // 引入canvas渲染器

echarts.use([BarChart, TitleComponent, TooltipComponent, CanvasRenderer]); // 注册组件

const echartInstance = echarts.init(document.getElementById('main')); // 初始化echarts实例

const option = { // 配置项
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'bar',
    },
  ],
};

echartInstance.setOption(option); // 绘制图表

echarts是一款非常强大的数据可视化库，其中的echarts类型ts则提供了更好的TypeScript支持。在使用echarts类型ts之前，需要先引入需要用到的组件，这里我们引入了柱状图组件、标题组件和提示框组件。接着，我们通过echarts.init方法初始化一个echarts实例，并通过setOption方法将图表配置项作为参数传入，最终绘制出一张柱状图。

二、echarts类型:category

const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'bar',
    },
  ],
};

echarts类型:category提供了对于类目型数据的支持。在这个示例中，我们将x轴类型设置为类目型，然后通过data属性设置x轴刻度的标签名。接下来我们设置y轴类型为值类型，然后通过series属性中的data字段设置每个数据点的值。

三、echarts类型:log

const option = {
  xAxis: {
    type: 'value',
    scale: true,
    axisLabel: {
      formatter: function (value) {
        return Math.pow(10, value).toFixed(0);
      }
    }
  },
  yAxis: {
    type: 'value',
    scale: true,
    axisLabel: {
      formatter: function (value) {
        return Math.pow(10, value).toFixed(0);
      }
    }
  },
  series: [{
    symbolSize: 10,
    data: [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]],
    type: 'scatter'
  }]
};

echarts类型:log提供了对于对数轴的支持。在这个示例中，我们设置x轴和y轴类型都为值型，并且将其都设置为对数轴。然后我们通过axisLabel字段设置轴标签的formatter函数，用于将对数轴上的刻度值转换为实际的值。最后我们配置了一个散点图，通过data字段设置每个散点的坐标。