Loading... 假设你在项目中经常使用柱状图和折线图,你可以创建一个公共模块来封装这两种图表的引入和注册。以下是一个例子: 首先,创建一个名为 `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'; // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型。 type ECOption = ComposeOption< | BarSeriesOption | TitleComponentOption | TooltipComponentOption | GridComponentOption | LegendComponentOption >; // 注册你引入的组件,这是使用这些组件的必要步骤。 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> <script setup lang="ts"> import { ref, onMounted } from 'vue' import { echarts } from '@/components/Echarts'; // import type { ECOption } from '@/components/Echarts'; 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> ``` <template> <div id="main" style="width: 600px;height:400px;"></div> </template> <script lang="ts"> import { onMounted, ref } from 'vue'; import echarts from './echartsCommon'; 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 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 如果觉得我的文章对你有用,请随意赞赏