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中设置他的属性和值 此配 ...
随机推荐
- Arduino 跑马灯
参考: 1. https://blog.csdn.net/hunhun1122/article/details/70254606 2. http://www.51hei.com/arduino/392 ...
- Android高级控件(下)
计时器(Chronometer) getBase() 基准时间 setFormat() 设置显示格式 start() 开始计时 stop() 停止计时 setOnChronometerListener ...
- Python操作图像
安装Pillow pip install Pillow 打开图像 from PIL import Image img = Image.open("./lena.tiff") 保存图 ...
- javascript 原型与原型链浅析
原型 和原型链 什么是原型链 简单理解就是原型组成的链,对象的__proto__它的是原型,而原型也是一个对象,也有__proto__属性,原型的__proto__又是原型的原型,就这样可以一直通过_ ...
- docker的run操作
docker的run到底做了什么操作呢? 它会优先寻找本地的镜像,如果没有就到仓库找,找不到返回错误,查找不到该镜像.能找到就拉这镜像下来,以该镜像为模板生产容器实例运行. 备注:图不是自己画的,截图 ...
- 高效的后端API开发模板-illuminant
概要 整体介绍 补充说明 Q. 有了 prisma 自动生成的 graphql 接口, 为什么还要 rest 接口和 websocket 接口? Q. 为什么要通过 illuminant 加一层反向代 ...
- 三门峡6378.7939(薇)xiaojie:三门峡哪里有xiaomei
三门峡哪里有小姐服务大保健[微信:6378.7939倩儿小妹[三门峡叫小姐服务√o服务微信:6378.7939倩儿小妹[三门峡叫小姐服务][十微信:6378.7939倩儿小妹][三门峡叫小姐包夜服务] ...
- 从Linux源码看Socket(TCP)的bind
从Linux源码看Socket(TCP)的bind 前言 笔者一直觉得如果能知道从应用到框架再到操作系统的每一处代码,是一件Exciting的事情. 今天笔者就来从Linux源码的角度看下Server ...
- day01 Pyhton学习
一.python介绍 python是一种解释型.弱类型的高级编程语言. 编译型:是把源程序的每一条语言编译成机器语言,并保存成二进制文件,给计算机执行,运算速度快. 优点:程序执行效率高,可以脱离语言 ...
- 【logstash】 - 使用json解析数
ilter-json:http://www.logstash.net/docs/1.4.2/filters/json json数据: {"account_number":995,& ...