利用echarts做图表统计

以项目中的扇形统计图为例：

第一步：

　　引入外部echarts.js文件

第二步：

　　HTML代码块

　　<div class="count-body-con count-tj">
　　　　<div class="float-e-margins">
　　　　　　<div class="ibox-title">
　　　　　　　　<h3 style="letter-spacing: 3px;text-align: center">某某情况统计</h3>
　　　　　　</div>
　　　　　　<div class="ibox-content" style="padding:0 0;text-align: center">
　　　　　　　　<div class="flot-chart-content" id="pie2">

　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
　　</div>

第三步：

　　js代码块

require.config({paths: {echarts: '<%=path%>/resources/js'}
});

require(['echarts','echarts/chart/pie'   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
//            'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
//            'echarts/chart/bar'],function (ec) {var myChart = ec.init(document.getElementById('pie1'));var option = {
//                title: {
//                    text: '框架自带的统计标题',
//                    textStyle: {
//                        fontSize: 24,
//                        fontWeight: 'normal',
//                        color: '#2E9ED5'
//                    },
//                    x: 'center'
//                },tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c}人 ({d}%)"},legend: {orient: 'vertical',x: 'left',y: 'top',left: 'left',data: ['情况1', '情况2', '情况3']},calculable: false,series: [{name: '人数',type: 'pie',radius: '55%',center: ['50%', '60%'],data: [{value:${后台统计情况1的数据}, name: '情况1'},{value:${后台统计情况2的数据}, name: '情况2'},{value:${后台统计情况3的数据}, name: '情况3'}],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};myChart.setOption(option);window.onresize = myChart.resize;});

效果：

利用echarts做图表统计相关推荐

做图表统计你需要掌握SQL Server 行转列和列转行
原文:做图表统计你需要掌握SQL Server 行转列和列转行说在前面做一个数据统计和分析的项目,每天面对着各种数据,经过存储过程从源表计算汇总后需要写入中间结果表以提高数据使用效率,那么此时就需 ...
若依项目整合eCharts实现图表统计功能
eCharts是一款强大的图表统计工具,具体介绍可查看其官网 http://echarts.baidu.com/echarts2/index.html 下面记录一下如何在若依项目中使用eCharts. ...
js中使用echarts做图表的动态展示
ECharts 是一个基于 JavaScript 的开源可视化图表库,强烈建议在官网上学习,更清楚明了https://echarts.apache.org/zh/index.html 下面的只做为个人 ...
利用python做词频统计
方法一:利用python字典的方式 speech_etxt = ''' My fellow citizens: I stand here today humbled by the task befor ...
mysql的可视化图表_利用ECharts可视化mysql数据库中的数据
这是工程所有文件的一个目录工程文件目录我做了一个柱状图,一个饼状图,一个折线图,配置过程很恶心,出了好多错,所以在这里记录一下. 如果想直接看 echarts 的部分,可以跳过下面数据库的建立. ...
利用Echarts+Springboot实现数据可视化数据可视化 Spring实现简单的数据可视化自定义可视化图表
最近在做大数据项目,先做了个数据可视化. 简单来说就是: 利用Echarts + Springboot实现数据可视化 Echarts:调用Echarts.js的API实现图标数据展示 (echart ...
如何利用echarts图表获取条状图点击名称和值
如何利用echarts图表获取条状图点击名称和值听语音 | 浏览:1505 | 更新:2017-06-13 10:20 | 标签:软件 1 2 3 4 5 6 7 分步阅读 echarts图表插件工 ...
python 导入的nan怎么解决_用Python处理了数据还要导入Excel做图表？直接Python做漂亮图表...
请关注本号,后续会有更多相关教程.转发本文并私信我"python",即可获得按水平领域分类好的Python资料系列文章 "替代Excel Vba"系列(一): ...
Android自定义睡眠下表统计图,Android 进阶自定义View（5）图表统计PieChartView圆饼图的实现...
今天讲图表统计中比较常用的一个,像支付宝的月账单啥的,都是用圆饼图来做数据统计的,先看一下我最终实现的效果图: image.png 该效果实际上是两个实心圆叠加后的效果. image.png imag ...

利用echarts做图表统计

利用echarts做图表统计相关推荐

最新文章

热门文章