php映射echarts柱状图
多种样式柱状图
前台部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的百度api&__ec_v__=20190126"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
</head>
<body>
<div id="container" style="height: 600px;"></div>
<div id="containers" style="height: 600px;"></div>
<script type="text/javascript">
var dom = document.getElementById("containers");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
color: ['#3398DB'],
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
legend: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
legendHoverLink:true,
label: {
normal: {
show: true,
position: 'top'
}
},
data: <{$vals}>
},
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title : {
text: '科研项目数量/经费对比',
subtext: '纯属虚构'
},
legend: {},
tooltip: {},
dataset: {
source: [
['product', '实验室A', '实验室A2', '实验室A3'],
['国家级', 4.4,2.3,2],
['省部级', 2.5, 4.4, 2],
['其他', 3.5, 2.3, 2.5],
]
},
xAxis: {type: 'category'},
yAxis: {
},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
php 部分
//第一中数据格式
$vals = [['value' => 10, 'itemStyle' => ['color' => '#FFC1C1']], ['value' => 70, 'itemStyle' => ['color' => '#FFB90F']], ['value' => 30, 'itemStyle' => ['color' => '#FFA54F']], ['value' => 10, 'itemStyle' => ['color' => '#FF8C00']]];
//由于js不支持关联数组 ，json_encode 将关联数组转换为对象格式，将索引数组转换为数组格式
$this->smarty->assign('data', json_encode(['实验室A1', '实验室A2', '实验室A3', '实验室A4', '实验室A5']));
//第二种数据格式
// $charts = [['name' => 'Mon', //名称
// 'type' => 'bar', //bar表述柱状
// 'data' => [['value' => 10, 'itemStyle' => ['color' => '#FFC1C1'], //数据以及样式
// ]], ], ['name' => 'Tue', //名称
// 'type' => 'bar', //bar表述柱状
// 'data' => [['value' => 20, 'itemStyle' => ['color' => '#FFB90F'], //数据以及样式
// ]], ], ['name' => 'Wed', //名称
// 'type' => 'bar', //bar表述柱状
// 'data' => [['value' => 30, 'itemStyle' => ['color' => '#FF7F50'], //数据以及样式
// ]], ], ['name' => 'Thu', //名称
// 'type' => 'bar', //bar表述柱状
// 'data' => [['value' => 40, 'itemStyle' => ['color' => '#FF6EB4'], //数据以及样式
// ]], ], ['name' => 'Fri', //名称
// 'type' => 'bar', //bar表述柱状
// 'data' => [['value' => 50, 'itemStyle' => ['color' => '#FF4500'], //数据以及样式
// ]], ], ['name' => 'Sat', //名称
// 'type' => 'bar', //bar表述柱状
// 'data' => [['value' => 60, 'itemStyle' => ['color' => '#FF3030'], //数据以及样式
// ]], ], ['name' => 'Sun', //名称
// 'type' => 'bar', //bar表述柱状
// 'data' => [['value' => 70, 'itemStyle' => ['color' => '#FDF5E6'], //数据以及样式
// ]], ]];
$this->smarty->assign('charts', json_encode($charts));
$this->smarty->assign('vals', json_encode($vals));
php映射echarts柱状图的更多相关文章
- vue Echarts 柱状图点击事件
drawBar(){ let that = this; let chart = this.$echarts.init(document.getElementById('bar-graph')); le ...
- Echarts柱状图实现不同颜色渐变色
第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 直接上j ...
- echarts柱状图标签显示不完全的问题
echarts 柱状图当x轴标签数目超过一定数目时在小尺寸设备上第一个和最后一个标签不显示(不是重叠),axisLabel设置interval:0也不起作用; 解决办法: 这个问题存在于4.0版本以上 ...
- 关于Echarts柱状图实现的细节
echarts柱状图显示数值[1] echarts2: itemStyle : { normal: {label : {show: true, position: 'top'}}}, echarts ...
- echarts柱状图坐标文字显示不完整解决方式
echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...
- echarts柱状图个数多，横坐标名称过长显示不全解决方法
当echarts柱状图个数多,横坐标名称过长时横坐标名称显示不全,网上并没有搜到太好的方法,于是自己加工了下,将横坐标名称显示前六位,当鼠标放到上面的时候显示全名,下面是示例代码,可以直接拷贝测试 代 ...
- Flask插件wtforms、Flask文件上传和Echarts柱状图
一.wtforms 类比Django的Form组件Form组件的主要应用是帮助我们自动生成HTML代码和做一些表单数据的验证 flask的wtforms用法跟Form组件大同小异参考文章:https: ...
- Echarts 柱状图配置详解
1.基本柱状图 // 指定图表的配置项和数据 var option = { // ---- 标题 ----- title: { text: '主标题', textStyle: { color: 're ...
- ECharts柱状图
首先我们要先去Echarts 官网 根据自己需要的版本进行下载下载 下载完成后,我们在项目中引入echarts 随后创建容器来存放我们要添加的柱状图 容器创建完毕我们需要在js中设置他的属性和值 此配 ...
随机推荐
- Matlab中加汉明窗 ahmming 作用
转自:http://www.cnblogs.com/lxy2017/p/4049124.html 1.什么是汉明窗? 语音信号一般在10ms到30ms之间,我们可以把它看成是平稳的.为了处理语音信号, ...
- ThreeJS系列1_CinematicCameraJS插件详解
ThreeJS系列1_CinematicCameraJS插件详解 接着上篇 ThreeJS系列1_CinematicCameraJS插件介绍 看属性的来龙去脉 看方法作用 通过调整属性查看效果 总结 ...
- Makefile-3-书写规则
目录 前言 概念 Chapter 3:书写规则 3.3 在规则中使用通配符 3.4 文件搜索 3.8 自动生成依赖性 原理 * 直接解析例子 ** sed 命令 参考 书籍 前言 本笔记主要记录Mak ...
- 从Linux源码看Socket(TCP)的bind
从Linux源码看Socket(TCP)的bind 前言 笔者一直觉得如果能知道从应用到框架再到操作系统的每一处代码,是一件Exciting的事情. 今天笔者就来从Linux源码的角度看下Server ...
- 自定义常用input表单元素一：纯css 实现自定义checkbox复选框
最下面那个是之前写的 今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...
- linux(centos8):安装分布式事务服务seata(file单机模式,seata 1.3.0/centos 8.2)
一,什么是seata? Seata:Simpe Extensible Autonomous Transcaction Architecture, 是阿里中间件,开源的分布式事务解决方案. 前身是阿里的 ...
- 正则匹配img标签 蜘蛛 爬取分析 新闻采集
string ostr = "aaaaaa<img asddsa src=\"\" asddsasd />aaaaaaa<img src=\" ...
- Business Partner - 供应商与客户的集成 - S/4HANA（1）
本文基于S/4HANA 1511版本,同时大部分内容适用于S/4HANA i.e1610/1709/1809. 本文旨在为全新实施的BP配置,或从ECC到S/4HANA的供应商客户主数据迁移提供信息支 ...
- 正式班D11
2020.10.20星期二 正式班D11 bash解释器交互式环境特性 命令和文件自动补全(Tab只能补全命令和文件) 快捷键 CTRL+C ==>终止前台运行的程序 CTRL+D ==> ...
- 记一次JFormDesigner破解问题idea版本号2020.2.2
第一步: 首先idea 2020.2.2下载插件JFormDesigner插件(软件版本7.0.1); 第二步:下载注册机(以上两步软件打包 在百度云) 第三步:点击 redister注册 第四步:打 ...