【知识总结】ECharts按需引入，公共模块

博主： Fivk
发布时间：2023 年 06 月 08 日
869 次浏览
暂无评论
2952字数
分类：知识总结

假设你在项目中经常使用柱状图和折线图，你可以创建一个公共模块来封装这两种图表的引入和注册。以下是一个例子：

首先，创建一个名为 `echartsCommon.ts` 的公共模块：

```typescript
// 引入 ECharts 的核心模块，这个模块提供了 ECharts 使用必须要的接口。
import * as echarts from 'echarts/core';

// 引入你需要的图表类型，这里是柱状图。
import {
  BarChart,
} from 'echarts/charts';

// 引入你需要的组件，例如标题、提示框、直角坐标系、图例。
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步。
import { CanvasRenderer } from 'echarts/renderers';

// 引入图表和组件的类型定义，这些类型定义可以帮助 TypeScript 更好地进行类型检查。
import type {
  // 系列类型的定义后缀都为 SeriesOption
  BarSeriesOption
} from 'echarts/charts';

import type {
  // 组件类型的定义后缀都为 ComponentOption
  TitleComponentOption,
  TooltipComponentOption,
  GridComponentOption,
  LegendComponentOption
} from 'echarts/components';

// 引入 ComposeOption 类型，这个类型可以用来组合出一个只包含必须组件和图表的 Option 类型。
import type {
  ComposeOption,
} from 'echarts/core';

// 注册你引入的组件，这是使用这些组件的必要步骤。
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer
]);

// 导出 echarts 和 ECOption，这样你就可以在其他地方使用它们了。
export { echarts };
export type { ECOption };
```

然后，在需要使用图表的地方，你可以直接引入这个公共模块：

```typescript
<template>
  <div ref="chart" style="width: 600px;height:400px;"/>
</template>

const chart = ref(null)

onMounted(() => {
    const myChart = echarts.init(chart.value)
    // 设置图表的配置项和数据
    const 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>
```

export default {
  setup() {
    const chartDom = ref(null);
    const myChart = ref(null);

onMounted(() => {
      myChart.value = echarts.init(chartDom.value);

const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

myChart.value.setOption(option);
    });

return {
      chartDom,
      myChart
    };
  }
};
</script>

最后修改：2023 年 06 月 08 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

【知识总结】ECharts按需引入，公共模块

Fivk • 2023 年 06 月 08 日