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中设置他的属性和值 此配 ...
随机推荐
- C++ CComboBox控件详解
转载:http://blog.sina.com.cn/s/blog_46d93f190100m395.html C++ CComboBox控件详解 (2010-09-14 14:03:44) 转载▼ ...
- Matlab中fspecial的用法
来源:https://blog.csdn.net/hustrains/article/details/9153553 Fspecial函数用于创建预定义的滤波算子,会与imfilter搭配使用,其语法 ...
- 【题解】[AHOI2013]作业
Link 题目大意:\(n\)个数,\(m\)个询问,每次四个参数,\(l,r,a,b\),问区间\([l,r]\)中出现过的,数值在\([a,b]\)区间中的数的个数以及区间\([l,r]\)中数值 ...
- 使用响应扩展的响应面(Rx)
下载demo - 196 KB 下载source - 98 KB 表的内容 系统要求反应面一个简单的计时器从事件中收集数据序列使用更复杂的查询订阅您希望完成的面最终考虑历史 介绍 "Rx&q ...
- laravel 500错误的一种可能
报这个错误,我一度认为,再加上,百度,大家都说是配置有问题,经过我不断地问我学长,结果就是一个小错误,简直太丢人了. 居然是少了一个括号的问题,自闭了
- IPA的动态库注入+企业重签名过程
[摘录]之前在进行iOS测试过程中由于要获取一定数据信息,因此需要对原本的安装包进行代码注入并且重新打包安装,因此就需要使用重签名策略,在此进行分享,希望大家可以使用其中的方法来运用到自身的项目中. ...
- golang执行exec命令
创建对象: cmd, err := exec.Command("echo", "show me") 执行命令: cmd.Run() //Run 阻塞进程, ...
- 2016-12-04---tiny412平台下的iconv库的移植问题
一.解决问题 在arm开发板上使用framebuff,在汉字显示时,因为只有gb2312的16*16的汉字字库,而ubuntu16.04默认 的编码方式时utf-8,因此需要进行转码(ut ...
- 添加Google网络地图功能
在MeteoInfo中添加了Google网络地图功能.打开MeteoInfo软件,选中图层管理区的一个Map Frame(New Map Frame),点击鼠标右键,在弹出菜单中点击Add Web L ...
- day28 Pyhton MRO和C3算法
1.python多继承.一个类可以拥有多个父类 class ShenXian: # 神仙 def fei(self): print("神仙都会飞") class Monkey: # ...