图表搭建一个简单折线图"/>
使用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>
页面效果图展示
更多推荐
使用ECharts图表搭建一个简单折线图
发布评论