使用ECharts图表搭建一个简单折线图

图表搭建一个简单折线图"/>

使用ECharts图表搭建一个简单折线图

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 

ECharts特性：

丰富的可视化类型

多种数据格式无需转换直接使用

千万数据的前端展现

移动端优化

多渲染方案，跨平台使用！

深度的交互式数据探索

多维数据的支持以及丰富的视觉编码手段

动态数据

绚丽的特效

通过 GL 实现更多更强大绚丽的三维可视化

无障碍访问（4.0+）

<template><div class="main-box"><!--卡片区--><el-card><h2>快递数据统计</h2><el-divider></el-divider><!-- 为echarts定义一个宽高dom --><div id="main" :style="{ width: '1200px', height: '700px' }"></div></el-card></div>
</template>
<script>
//引入echarts
import * as echarts from "echarts";export default {data(){return {//  指定图表的配置项和数据option : {xAxis: {type: 'category',data: ['2021.1', '2021.2', '2021.3', '2021.4', '2021.5', '2021.7', '2021.8','2021.9','2021.10','2012.11','2021.12']},yAxis: {type: 'value'},series: [{data: [150, 170, 224, 228, 135, 147, 156,145,134,123,161,174],type: 'line'}]}}},mounted(){// 基于准备好的dom，初始化echarts实例，var myChart = echarts.init(document.getElementById('main'));
//使用刚指定的配置项和数据显示图表myChart.setOption(this.option);}
}
</script>
<style lang="less" scoped>
.el-divider.el-divider--horizontal {height: 6px;background-color: lightseagreen;margin: 20px 3px 2px 2px;
}
</style>

页面效果图展示