一、ECharts(各种统计图)

一、ECharts

1、简介

ECharts是百度的一个项目，后来百度把Echart捐给apache，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
官方网站：https://echarts.baidu.com/

2、基本使用

入门参考：官网->文档->教程->5分钟上手ECharts

（1）创建html页面：柱图.html
（2）引入ECharts

<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>

（3）定义图表区域

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>

（4）渲染图表

<script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};
// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>

3、折线图
实例参考：官网->实例->官方实例 https://echarts.baidu.com/examples/
折线图.html

<script>var myChart = echarts.init(document.getElementById('main'));var option = {//x轴是类目轴（离散数据）,必须通过data设置类目数据xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},//y轴是数据轴（连续数据）yAxis: {type: 'value'},//系列列表。每个系列通过 type 决定自己的图表类型series: [{//系列中的数据内容数组data: [820, 932, 901, 934, 1290, 1330, 1320],//折线图type: 'line'}]};myChart.setOption(option);

</script>

二、项目中集成ECharts

1、安装ECharts

npm install --save echarts@4.1.0

2、增加路由

src/router/index.js
在统计分析路由中增加子路由
{path: 'chart',name: 'StatisticsDayChart',component: () => import('@/views/statistics/daily/chart'),meta: { title: '统计图表' }
}

3、创建组件

src/views/statistics/daily/chart.vue
模板
<template><div class="app-container"><!--表单--><el-form :inline="true" class="demo-form-inline"><el-form-item><el-select v-model="searchObj.type" clearable placeholder="请选择"><el-option label="学员登录数统计" value="login_num"/><el-option label="学员注册数统计" value="register_num"/><el-option label="课程播放数统计" value="video_view_num"/><el-option label="每日课程数统计" value="course_num"/></el-select></el-form-item><el-form-item><el-date-pickerv-model="searchObj.begin"type="date"placeholder="选择开始日期"value-format="yyyy-MM-dd" /></el-form-item><el-form-item><el-date-pickerv-model="searchObj.end"type="date"placeholder="选择截止日期"value-format="yyyy-MM-dd" /></el-form-item><el-button:disabled="btnDisabled"type="primary"icon="el-icon-search"@click="showChart()">查询</el-button></el-form><div class="chart-container"><div id="chart" class="chart" style="height:500px;width:100%" /></div></div>
</template>
<script>
import echarts from 'echarts'
import staApi from '@/api/sta'export default {data() {return {searchObj:{},btnDisabled:false,xData:[],yData:[]}},methods:{showChart() {staApi.getDataSta(this.searchObj).then(response => {console.log('*****************'+response)this.yData = response.data.numDataListthis.xData = response.data.date_calculatedList//调用下面生成图表的方法，改变值this.setChart()})},setChart() {// 基于准备好的dom，初始化echarts实例this.chart = echarts.init(document.getElementById('chart'))// console.log(this.chart)// 指定图表的配置项和数据var option = {title: {text: '数据统计'},tooltip: {trigger: 'axis'},dataZoom: [{show: true,height: 30,xAxisIndex: [0],bottom: 30,start: 10,end: 80,handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',handleSize: '110%',handleStyle: {color: '#d3dee5'},textStyle: {color: '#fff'},borderColor: '#90979c'},{type: 'inside',show: true,height: 15,start: 1,end: 35}],// x轴是类目轴（离散数据）,必须通过data设置类目数据xAxis: {type: 'category',data: this.xData},// y轴是数据轴（连续数据）yAxis: {type: 'value'},// 系列列表。每个系列通过 type 决定自己的图表类型series: [{// 系列中的数据内容数组data: this.yData,// 折线图type: 'line'}]}this.chart.setOption(option)}}
}
</script>

一、ECharts(各种统计图)相关推荐

用ECharts生成统计图
用ECharts生成统计图这是我的HTML部分: <div class="layui-fluid" style="font-size:16px"> ...
LayUI使用Echarts实现统计图
引入 echarts.min.js包 <div id="main" style="width: 1000px;height:700px;">< ...
C#ASP.NET使用Echarts制作统计图
卓越项目需要所以想要用ASP绘制统计图,但是从来没有接触过echarts和ajax,于是在哔哩哔哩上看了一些简短的课程大致了解了一下echarts和ajax. 前端代码: <%@ Page La ...
echarts圆形统计图与柱状图结合
1.先展示效果图 2.直接上代码,copy代码进行调试便会懂(导入echarts插件看之前的文章) <template><div class="employee-conta ...
arcgis api for js之echarts开源js库实现地图统计图分析
前面写过一篇关于arcgis api for js实现地图统计图的,具体见:http://www.cnblogs.com/giserhome/p/6727593.html 那是基于dojo组件来实现图 ...
vue3：codepen上生成的动效代码/ 前端生成统计图（echarts包）
codepen上生成的动态效果怎么放到自己的代码里(vue3组合式api) 设计给了个动态效果,说源码在codepen上面,打开一看,好家伙没有html,css也只有图里展示的这么点,那就是纯靠js实 ...
php 自定义表格并统计,PHP 使用Echarts生成数据统计报表的实现
这篇文章主要介绍了PHP 使用Echarts生成数据统计报表的实现代码,需要的朋友可以参考下 echarts统计,简单示例先看下效果图看下代码 HTML页面为ECharts准备一个Dom,宽高自 ...
php数据统计模板,PHP如何使用Echarts生成数据统计报表
echarts统计,简单示例推荐:<PHP视频教程> 先看下效果图看下代码 HTML页面为ECharts准备一个Dom,宽高自定义 js文件可以参考官网,或者在这里下载,引入下面是 ...
四步学会使用ECharts做图
前言:最近有些朋友抱怨用ECharts做统计图时难做,看官网很枯噪无味头又晕,那接下来我简单说下我是怎么四步做图的. 首先先引入安装ECarts依赖,使用webpack工具打包的可以使用命令行安装 n ...