- 安装
npm install echarts --save
- 在要使用的页面引入
import * as echarts from "echarts";
- 容器配置
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-card shadow="always" class="box-card">
<div class="chart-body">
<div
id="lineChart"
style="height: 300px; width: 100% padding:10px"
></div>
</div>
</el-card>
</el-col>
- 绘图
public drawLineChart() {
const lineChart: HTMLElement = document.getElementById(
"lineChart"
) as HTMLElement;
const myChart = echarts.init(lineChart).setOption({
title: {
text: "ECharts 入门示例",
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
return myChart;
}
- 调用
public async mounted() {
await this.drawLineChart();
}