图表的使用"/>
Vue引入Echarts图表的使用
第一步:安装Echarts
npm install echarts
1.1也可以使用命令行通过 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';
// 引入柱状图图表,图表后缀都为 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({// ...
});
在 TypeScript 中按需引入
import * as echarts from 'echarts/core';
import {BarChart,LineChart
} from 'echarts/charts';
import {TitleComponent,TooltipComponent,GridComponent,// 数据集组件DatasetComponent,// 内置数据转换器组件 (filter, sort)TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import type {// 系列类型的定义后缀都为 SeriesOptionBarSeriesOption, LineSeriesOption
} from 'echarts/charts';
import type {// 组件类型的定义后缀都为 ComponentOptionTitleComponentOption,TooltipComponentOption,GridComponentOption,DatasetComponentOption
} from 'echarts/components';
import type { ComposeOption,
} from 'echarts/core';// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = ComposeOption<| BarSeriesOption| LineSeriesOption| TitleComponentOption| TooltipComponentOption| GridComponentOption| DatasetComponentOption
>;// 注册必须的组件
echarts.use([TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,BarChart,LineChart,LabelLayout,UniversalTransition,CanvasRenderer
]);const option: ECOption = {// ...
};
原创作者:吴小糖
创作时间:2023.10.21
更多推荐
Vue引入Echarts图表的使用
发布评论