前端vue使用ECharts如何制作精美统计图

ECharts在vue中简单实现统计图

一、什么是ECharts

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

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

详情内容关注ECharts的官方文档，里面有更加详细的介绍！

二、在vue中使用ECharts

今天的重头戏来了，现在vue是很多公司前端的主流框架，我目前所在公司接触的项目也都是使用vue来实现的，很少有完全使用原生的JavaScript来写项目的了，所以今天也是详细记录一下vue中如何使用 ECharts来制作折线图，也算是对自己知识的一个补充。

安装ECharts：npm install echarts --save
在组件中引入：import echarts from “echarts”
在view中定义一个带有宽高的容器：
逻辑编写：

//drawAmountCharts为一个自定义方法     setOption是一个特定的方法，使用指定的配置项和数据显示图表
drawAmountCharts(id) {this.amountCharts = echarts.init(document.getElementById(id));this.amountCharts.setOption({title: {text: "学生成绩表",left: "center"},tooltip: {   //设置tip提示trigger: "axis"},legend: {  //设置区分（哪条线属于什么）y: "bottom",x: "center",data: ["学生成绩", "平均成绩"]  },color: ['#8AE09F', '#FA6F53'],       //设置区分（每条线是什么颜色，和 legend 一一对应）grid: {left: "10%",right: "20%",bottom: "15%",containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {  //设置x轴name: "日期",  //X轴 nametype: "category",boundaryGap: true,  //坐标轴两边留白nameTextStyle: {        //坐标轴名称的文字样式color: '#FA6F53',fontSize: 16,padding: [0, 0, 0, 20]},axisLine: {             //坐标轴轴线相关设置。lineStyle: {color: '#FA6F53',}},axisTick: {alignWithLabel: true},data: ['2019-1-1', '2019-2-1', '2019-3-1', '2019-4-1', '2019-5-1', '2019-6-1', '2019-7-1']  //x轴的数据},yAxis: {name: '成绩',nameTextStyle: {color: '#FA6F53',fontSize: 16,padding: [0, 0, 10, 0]},axisLine: {lineStyle: {color: '#FA6F53',}},type: 'value'},series: [{name: '平均成绩',data:  [220, 232, 201, 234, 290, 230, 220],type: 'line',               // 类型为折线图lineStyle: {                // 线条样式 => 必须使用normal属性normal: {color: '#8AE09F',}},},{name: '学生成绩',data: [120, 200, 150, 80, 70, 110, 130],type: 'line',lineStyle: {normal: {color: '#FA6F53',}},}]});}

这样一个简单的折线统计图就写好了，当然，现在只是写好的死数据，真实项目开发中就可以使用我们从后端请求来的真实数据了，然后将该函数写在某一个生命周期或者点击事件里面，根据实际需求进行相应的改变。

前端开发是一个神奇的岗位，祝愿自己在前端的学习道路上如鱼得水，也祝愿其他学习前端的小伙伴学的精，学的快，学的透！

前端vue使用ECharts如何制作精美统计图相关推荐

前端Vue制作日历插件FullCalendar
前端Vue制作日历插件FullCalendar 官方文档:https://fullcalendar.io/ 效果图安装 Vue2:npm install --save @fullcalendar/v ...
vue使用e-charts制作专题图（广西省为例）---第一篇
vue使用E-Charts制作专题图(广西省为例)---第一篇写博客是为了做笔记先给大家看一下效果图: "专题图"顾名思义就是地图的每一部分根据一定的标准,展现出不一样颜色,使 ...
前端vue uni-app自定义精美海报生成组件
在当前技术飞速发展的时代,软件开发的复杂度也在不断提高.传统的开发方式往往将一个系统做成整块应用,一个小的改动或者一个小功能的增加都可能引起整体逻辑的修改,从而造成牵一发而动全身的情况.为了解决这个问 ...
前端vue显示柱状图_Vue接入Echarts 显示柱状图饼图
Vue接入Echarts 显示柱状图饼图使用CLI接入 npm install echarts --save 1.可以全局引入(在main.js) // 引入echarts import echar ...
前端vue显示柱状图_Vue—Echarts 柱状图
使用Vue做后台管理系统的时候避免不了使用Echarts来展示对应的数据,下面是使用Echarts柱状图来展示对应数据的实例. ee05abaf9633184a9c012631b642d970.png ...
使用reveal.js制作精美的网页版PPT
前言最近在做季度总结和技术分享,所以需要做个PPT, 来回顾这半年来的技术贡献. 但苦于mac上运行PPT那感人的流畅度, 成功的激起了笔者的强迫症, 所以索性想办法通过技术的手段来做个网页版PPT ...
什么是ECharts？前端图表框架echarts详解
在web开发项目过程中,经常会有需要绘制图标的情况,简单的图表可以用canvas来绘制,但是遇到复杂的图标canvas无法满足其功能,遇到这种情况怎么办呢?别着急,今天为大家推荐一款前端大佬都备受青睐 ...
Vue：echarts的柱状图怎样按照比例缩小？
Vue:echarts的柱状图怎样按照比例缩小? 资源: vue制作echart图表随着画面等比例放大缩小第二种方法:在div中使用echarts,利用div的参数来限制echarts生成的图表的大 ...
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...
Springboot+poi+实现导出导入Excle表格+Vue引入echarts数据展示
需求: 一. 数据库数据表导出Excle表格二. Excle数据导入数据库三. Vue引入Echarts数据展示工具: idea 数据库: mysql 框架:Springboot 准备工作: 1 ...

前端vue使用ECharts如何制作精美统计图

ECharts在vue中简单实现统计图

前端vue使用ECharts如何制作精美统计图相关推荐

最新文章

热门文章