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中卷积convolution与filter用法
转自:https://blog.csdn.net/dkcgx/article/details/46652021 转自:https://blog.csdn.net/Reborn_Lee/article/ ...
- ASP。NET MVC (NetCore 2.0)用于处理实体框架、DbContexts和对象的通用控制器和视图
下载source - 1.5 MB 介绍 本文的源代码已更新到NetCore 2.0 ASP.净MVC项目. 当我们开始开发一个ASP.在Microsoft Visual Studio中,我们发现通过 ...
- 每日一题 LeetCode 42.接雨水 【双指针】
题目链接 https://leetcode-cn.com/problems/trapping-rain-water/ 题目说明 题解 主要方法:双指针 + 正反遍历 解释说明: 正向遍历:先确定池子左 ...
- layui+tp5表单提交回调
layui 前段页面form表单提交数据如果监听表单提交 ,tp5后台操作完成后使用 $this->success('success'); 后前端的页面不会出现layui的layer弹窗提示su ...
- Android 10不能使用uiautomatorviewer定位元素的终极解决方法
Android app 元素定位除了使用Appium Inspector 外,还可以使用Android SDK 里tools中的uiautomatorviewer 工具.但今天打算使用 uiautom ...
- 用ip xfrm搭ipsec隧道
拓扑如下 基本的IP配置就不说了,直接写重点,在LS上配置 #配置SA ip xfrm state add src 194.168.10.4 dst 194.168.10.5 proto esp sp ...
- 从面试角度学完 Kafka
Kafka 是一个优秀的分布式消息中间件,许多系统中都会使用到 Kafka 来做消息通信.对分布式消息系统的了解和使用几乎成为一个后台开发人员必备的技能.今天码哥字节就从常见的 Kafka 面试题入手 ...
- day53 Pyhton 前端04
内容回顾: 盒子: 内边距:padding,解决内部矛盾,内边距的增加整个盒子也会增加 外边距:margin,解决外部矛盾,当来盒子都有外边距的时候,取两者最大值 边框:border border-c ...
- day33 Pyhton 常用模块03
一.正则表达式: 1.元字符 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线 \s 匹配任意的空白符 \d 匹配数字 \n 匹配一个换行符 \t 匹配一个制表符 \b 匹配一个单词的结尾 ...
- Jmeter请求元件之参数化CSV
1.设置CSV:线程组->配置元件->CSV 数据文件设置 2.在本地创建txt文件,一个测试用例参数是一行,参数之间用逗号分隔: 或者创建一个excel文档,保存格式为csv: 这里有个 ...