在hbuilder制作APP时使用echarts：堆叠柱状图

一、效果图

二、实现代码

1、body中：
// 头部标签
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">测试柱图</h1>
</header>

<div class="mui-content" style="margin-top: 10px;">
// 设置堆叠柱图的div的大小
<div id="main" style='width:100%;height:300px;'></div>
</div>

2、style中：
<style>
// 设置页面的背景图片
body {
background: url(../img/csygbg.png);
}

// 设置柱图div中的样式
.mui-content {
background-color: transparent; //背景颜色为透明
font-size: 16px; // 字体大小
color: #00F5FF; // 字体颜色
font-weight: bold; // 字体的粗细
}
</style>

3、导入的js
<script src="../js/mui.min.js"></script>
<script src="../js/jquery.js"></script>
<script src="../js/countUp.js"></script>
<script src="../js/echarts.js"></script>

4、js代码
<script>
var main_biaoti = []; // 显示给用户看的标题
var main_datanan = []; // 显示给用户看的数据(男生)
var main_datanv = []; // 显示给用户看的数据(女生)

mui.plusReady(function() {
mui.getJSON('../json/genderCompanyChart.json', function(data) {
// 将返回的json对象保存在obj里面
var obj = data.data;

// 分别得到obj的值并放在相应的全局变量中
for(var i = 0; i < obj.length; i++) {
main_biaoti.push(obj[i].NAME);
main_datanan.push(obj[i].LCOUNT);
main_datanv.push(obj[i].VCOUNT);
}

shownumber();
});
});

// 得到某个ID的对象封装方法
var byId = function(id) {
return document.getElementById(id);
}

在hbuilder制作APP时使用echarts：堆叠柱状图相关推荐

关于使用echarts堆叠柱状图百分比显示的问题
关于使用echarts堆叠柱状图百分比显示的问题平常工作没有涉及到echarts,所以平常也没有去关注图表这一块,然后碰到一个需求,要求使用堆叠柱状图,但是数值是需要百分比显示的,不是在所获取到的数 ...
echarts 堆叠柱状图3d效果_【python可视化】：pyecharts：柱形图、堆叠条形图、极坐标堆叠柱形图、极坐标堆叠分类条形图...
•本文字数:约1000字•阅读时长:约3分钟•难度:2颗星官方介绍:pyecharts 是一个用于生成 Echarts 图表的类库.Echarts 是百度开源的一个数据可视化 JS 库.用 Echa ...
echarts 堆叠柱状图label显示总和
记录一下使用echart的柱状图堆叠时,需要在柱状图顶部显示总计数值的问题.参考文章的实现,再堆叠一个透明的柱状图来显示总和数据标签,最后就是在触发legend切换时,更换option.缺点是切换le ...
echarts 堆叠柱状图
methods: {// 堆叠柱状图显示总数drawHistorygram() {const myChart = echarts.init(this.$refs.historygramEchart)/ ...
echarts堆叠柱状图加折线图详细介绍
先介绍一下成品图这个图形主要就是采用echarts,直接上代码. <!DOCTYPE html> <html> <head><meta charset=&q ...
echarts 堆叠柱状图在顶部显示数据总数
项目需求: 在堆叠柱状图顶部显示该柱条所有数据的总和. 效果图: 代码实现: //原有堆叠柱状图数据 let series = [{name: '优秀',type: 'bar',stack: 'x', ...
ECharts堆叠柱状图动态数据label显示总和和this指向问题
1.当数据为动态渲染时,获取series的数据,然后在最后一项添加label对象 let option; // 图标参数配置 let xData = []; let legendData = []; ...
echarts堆叠柱状图计算总数
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>EC ...
Android Studio 制作APP启动界面（Splash）
最近又开始学习Android studio 了,在制作APP时,都有一个启动的界面,看上去美观且实用(也可以作为以后的广告位← 那怎样制作呢? 第一步:新建Splash 如图,新建一个Empty Ac ...

在hbuilder制作APP时使用echarts：堆叠柱状图

在hbuilder制作APP时使用echarts：堆叠柱状图相关推荐

最新文章

热门文章