echarts统计图表
生活随笔
收集整理的這篇文章主要介紹了
echarts统计图表
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、簡介
ECharts是百度的一個項目，后來百度把Echart捐給apache，用于圖表展示，提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理數據可視化的地圖、熱力圖、線圖，用于關系數據可視化的關系圖、treemap、旭日圖，多維數據可視化的平行坐標，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。
官方網站：https://echarts.apache.org/zh/index.html
官網示例-柱狀圖
1.1、下載echarts.min.js
地址：https://www.jsdelivr.com/package/npm/echarts
1.2、引入js
<!-- 引入剛剛下載的 ECharts 文件 --> <script src="./echarts.min.js"></script>1.3、定義圖表區域
<!-- 為 ECharts 準備一個定義了寬高的 DOM --> <div id="main" style="width: 600px;height:400px;"></div>1.4、生成一個簡單的柱狀圖
完整代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><!-- 引入剛剛下載的 ECharts 文件 --><script src="./echarts.min.js"></script></head><body><!-- 為 ECharts 準備一個定義了寬高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><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></body> </html>1.5、樣式
官網示例-折線圖
<!DOCTYPE html> <html><head><meta charset="utf-8" /><!-- 引入剛剛下載的 ECharts 文件 --><script src="./echarts.min.js"></script></head><body><!-- 為 ECharts 準備一個定義了寬高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {xAxis: {type: 'category',data: ['A', 'B', 'C']},yAxis: {type: 'value'},series: [{data: [120, 200, 150],type: 'line'}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>樣式
項目中引用-前端
2.1、安裝ECharts
npm install echarts --save2.2、路由跳轉
{path: '/sta',component: Layout,redirect: '/sta/create',name: '統計分析',meta: { title: '統計分析', icon: 'example' },children: [{path: 'create',name: '生成數據',component: () => import('@/views/sta/create'),meta: { title: '生成數據', icon: 'table' }},{path: 'show',name: '圖表顯示',component: () => import('@/views/sta/show'),meta: { title: '圖表顯示', icon: 'tree' }}]}2.3、api請求地址
2.4、引入api中的js和下載的echarts
2.5、定義接收后端返回的數據的數組變量
2.6、修改option的數據
2.7、完整的show.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>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>2.8、樣式調整
官網參考地址：https://echarts.apache.org/zh/option.html#legend
項目中引用-后端
3.1、controller代碼
//圖表顯示，返回兩部分數據，日期json數組，數量json數組 @GetMapping("showData/{type}/{begin}/{end}") public R showData(@PathVariable String type,@PathVariable String begin,@PathVariable String end) {Map<String,Object> map = staService.getShowData(type,begin,end);return R.ok().data(map); }3.2、service代碼
//圖表顯示，返回兩部分數據，日期json數組，數量json數組 @Override public Map<String, Object> getShowData(String type, String begin, String end) {//根據條件查詢對應數據QueryWrapper<StatisticsDaily> wrapper = new QueryWrapper<>();wrapper.between("date_calculated",begin,end);wrapper.select("date_calculated",type);List<StatisticsDaily> staList = baseMapper.selectList(wrapper);//因為返回有兩部分數據：日期 和 日期對應數量//前端要求數組json結構，對應后端java代碼是list集合//創建兩個list集合，一個日期list，一個數量listList<String> date_calculatedList = new ArrayList<>();List<Integer> numDataList = new ArrayList<>();//遍歷查詢所有數據list集合，進行封裝for (int i = 0; i < staList.size(); i++) {StatisticsDaily daily = staList.get(i);//封裝日期list集合date_calculatedList.add(daily.getDateCalculated());//封裝對應數量switch (type) {case "login_num":numDataList.add(daily.getLoginNum());break;case "register_num":numDataList.add(daily.getRegisterNum());break;case "video_view_num":numDataList.add(daily.getVideoViewNum());break;case "course_num":numDataList.add(daily.getCourseNum());break;default:break;}}//把封裝之后兩個list集合放到map集合，進行返回Map<String, Object> map = new HashMap<>();map.put("date_calculatedList",date_calculatedList);map.put("numDataList",numDataList);return map; }效果
結果！！
每天起床的時候，爭取變得比你從前更聰明一點。認真地、出色地完成你的任務。慢慢地，你會有所進步，但這種進步不一定很快。但你這樣能夠為快速進步打好基礎。到最后，你將會得到你應得的東西。
總結
以上是生活随笔為你收集整理的echarts统计图表的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： kvm 监控内存，替换页表（linux版
- 下一篇： 女子学电子计算机哪一项专业好,2018最