✨步骤一
脚手架中安装echarts依赖:npm i echarts
✨步骤二
打开echart官方网站进入快速上手页面,找到下图完整的代码,里面有详细的使用步骤:
✨步骤三
由上图可知:
- 引入刚刚下载的 ECharts 文件
- 为 ECharts 准备一个定义了宽高的 DOM
- 基于准备好的dom,初始化echarts实例
- 指定图表的配置项和数据
- 使用刚指定的配置项和数据显示图表。
✨步骤四
根据上面的使用步骤,首先在vue文件中导入echarts,写在script标签中
<script>
// 1、导入echarts
import * as echarts from 'echarts'
export default {
};
</script>
其次准备定义了宽高的 DOM,写在template标签中
<template>
<!-- 2、为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 800px; height: 600px">hahaha</div>
</template>
接着初始化echarts实例,指定图表的配置项和数据,使用刚指定的配置项和数据显示图表,写在mounted()生命周期函数中
// 在挂载声明周期函数中初始化,因为此时页面上的Dom元素已经渲染完毕了
mounted() {
// 3、基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 4、指定图表的配置项和数据
var option = {
title: {
text: "ECharts 入门示例",
},
tooltip: {},
legend: {
data: ["销量"],
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};
// 5、使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
✨步骤五
运行npm run serve命令打开看效果,如下图:
是不是很简单呀