多种样式柱状图

前台部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
  9.        <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
  10.        <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
  11.        <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
  12.        <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
  13.        <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
  14.        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的百度api&__ec_v__=20190126"></script>
  15.        <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
  16.        <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
  17. </head>
  18. <body>
  19.     <div id="container" style="height: 600px;"></div>
  20.     <div id="containers" style="height: 600px;"></div>
  22.     <script type="text/javascript">
  24.         var dom = document.getElementById("containers");
  25.         var myChart = echarts.init(dom);
  26.         var app = {};
  27.         option = null;
  28.         option = {
  29.             color: ['#3398DB'],
  30.         xAxis: {
  31.             type: 'category',
  33.             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  34.         },
  35.         legend: {
  36.             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  37.         },
  39.         yAxis: {
  40.             type: 'value'
  41.         },
  42.         series: [
  43.             {
  45.                 type: 'bar',
  46.                 legendHoverLink:true,
  47.                 label: {
  48.                     normal: {
  49.                         show: true,
  50.                         position: 'top'
  51.                     }
  52.                 },
  53.                 data: <{$vals}>
  54.             },
  55.         ]
  56. };
  58.         if (option && typeof option === "object") {
  59.             myChart.setOption(option, true);
  60.         }
  62.                </script>
  63.     <script type="text/javascript">
  65.         var dom = document.getElementById("container");
  66.         var myChart = echarts.init(dom);
  67.         var app = {};
  68.         option = null;
  69.         option = {
  70.             title : {
  71.         text: '科研项目数量/经费对比',
  72.         subtext: '纯属虚构'
  73.     },
  74.             legend: {},
  75.             tooltip: {},
  76.             dataset: {
  77.                 source: [
  78.                     ['product', '实验室A', '实验室A2', '实验室A3'],
  79.                     ['国家级', 4.4,2.3,2],
  80.                     ['省部级', 2.5, 4.4, 2],
  81.                     ['其他', 3.5, 2.3, 2.5],
  83.                 ]
  84.             },
  85.             xAxis: {type: 'category'},
  86.             yAxis: {
  88.             },
  89.             // Declare several bar series, each will be mapped
  90.             // to a column of dataset.source by default.
  91.             series: [
  92.                 {type: 'bar'},
  93.                 {type: 'bar'},
  94.                 {type: 'bar'}
  95.             ]
  96.         };
  97.         ;
  98.         if (option && typeof option === "object") {
  99.             myChart.setOption(option, true);
  100.         }
  102.                </script>
  104. </body>
  105. </html>

php 部分

  1.  //第一中数据格式
  2.         $vals = [['value' => 10, 'itemStyle' => ['color' => '#FFC1C1']], ['value' => 70, 'itemStyle' => ['color' => '#FFB90F']], ['value' => 30, 'itemStyle' => ['color' => '#FFA54F']], ['value' => 10, 'itemStyle' => ['color' => '#FF8C00']]];
  3.         //由于js不支持关联数组 ，json_encode 将关联数组转换为对象格式，将索引数组转换为数组格式
  4.         $this->smarty->assign('data', json_encode(['实验室A1', '实验室A2', '实验室A3', '实验室A4', '实验室A5']));
  5.         //第二种数据格式
  6.         // $charts = [['name' => 'Mon', //名称
  7.         // 'type' => 'bar', //bar表述柱状
  8.         // 'data' => [['value' => 10, 'itemStyle' => ['color' => '#FFC1C1'], //数据以及样式
  9.         // ]], ], ['name' => 'Tue', //名称
  10.         // 'type' => 'bar', //bar表述柱状
  11.         // 'data' => [['value' => 20, 'itemStyle' => ['color' => '#FFB90F'], //数据以及样式
  12.         // ]], ], ['name' => 'Wed', //名称
  13.         // 'type' => 'bar', //bar表述柱状
  14.         // 'data' => [['value' => 30, 'itemStyle' => ['color' => '#FF7F50'], //数据以及样式
  15.         // ]], ], ['name' => 'Thu', //名称
  16.         // 'type' => 'bar', //bar表述柱状
  17.         // 'data' => [['value' => 40, 'itemStyle' => ['color' => '#FF6EB4'], //数据以及样式
  18.         // ]], ], ['name' => 'Fri', //名称
  19.         // 'type' => 'bar', //bar表述柱状
  20.         // 'data' => [['value' => 50, 'itemStyle' => ['color' => '#FF4500'], //数据以及样式
  21.         // ]], ], ['name' => 'Sat', //名称
  22.         // 'type' => 'bar', //bar表述柱状
  23.         // 'data' => [['value' => 60, 'itemStyle' => ['color' => '#FF3030'], //数据以及样式
  24.         // ]], ], ['name' => 'Sun', //名称
  25.         // 'type' => 'bar', //bar表述柱状
  26.         // 'data' => [['value' => 70, 'itemStyle' => ['color' => '#FDF5E6'], //数据以及样式
  27.         // ]], ]];
  29.         $this->smarty->assign('charts', json_encode($charts));
  30.         $this->smarty->assign('vals', json_encode($vals));

php映射echarts柱状图的更多相关文章

  1. vue Echarts 柱状图点击事件

    drawBar(){ let that = this; let chart = this.$echarts.init(document.getElementById('bar-graph')); le ...

  2. Echarts柱状图实现不同颜色渐变色

    第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 直接上j ...

  3. echarts柱状图标签显示不完全的问题

    echarts 柱状图当x轴标签数目超过一定数目时在小尺寸设备上第一个和最后一个标签不显示(不是重叠),axisLabel设置interval:0也不起作用; 解决办法: 这个问题存在于4.0版本以上 ...

  4. 关于Echarts柱状图实现的细节

    echarts柱状图显示数值[1] echarts2:  itemStyle : { normal: {label : {show: true, position: 'top'}}}, echarts ...

  5. echarts柱状图坐标文字显示不完整解决方式

    echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...

  6. echarts柱状图个数多，横坐标名称过长显示不全解决方法

    当echarts柱状图个数多,横坐标名称过长时横坐标名称显示不全,网上并没有搜到太好的方法,于是自己加工了下,将横坐标名称显示前六位,当鼠标放到上面的时候显示全名,下面是示例代码,可以直接拷贝测试 代 ...

  7. Flask插件wtforms、Flask文件上传和Echarts柱状图

    一.wtforms 类比Django的Form组件Form组件的主要应用是帮助我们自动生成HTML代码和做一些表单数据的验证 flask的wtforms用法跟Form组件大同小异参考文章:https: ...

  8. Echarts 柱状图配置详解

    1.基本柱状图 // 指定图表的配置项和数据 var option = { // ---- 标题 ----- title: { text: '主标题', textStyle: { color: 're ...

  9. ECharts柱状图

    首先我们要先去Echarts 官网 根据自己需要的版本进行下载下载 下载完成后,我们在项目中引入echarts 随后创建容器来存放我们要添加的柱状图 容器创建完毕我们需要在js中设置他的属性和值 此配 ...

随机推荐

  1. C++(VS2015)模板显式特化之template语法深入理解

    首先说下遇到的情况: 这里在vc++6.0上建立了一个自定义模板类,再去覆盖这个类,分别使用部分覆盖,整体覆盖 但在vs2015上去整体覆盖类会报错. 错误如下: 错误原因:个人感觉是新版本的vs更接 ...

  2. c++中的#include "stdafx.h"

    转自:https://blog.csdn.net/lijun5635/article/details/13090341 在网上看到的一篇很详细的文章解释,之前一直不明白这个头文件什么作用,用来学习很好 ...

  3. 【题解】[USACO07OPEN]Dining G

    \(Link\) \(\text{Solution:}\) 这一题,我们要做到,食物和牛.牛和饮料均为一对一的关系.我们发现这个图不好建立. 经典技巧:将牛拆边,拆成入点和出点,并连容量为\(1\)的 ...

  4. Top Coder 某场Div 2的C题 题解

    前天,我们了解了一下一种叫做树状数组的神奇玩意儿,今天就放一道真题来检验一下自己的学习成果吧! 嗯,题目就是这样的啦. 分析: 这题的暴力大家应该都会打吧. 注意到m小的压批,所以对于每一个m值,我们 ...

  5. LVS搭建

    LVS集群搭建 NAT架构图 1.在RS188,RS189操作 #安装httpd服务[root@t1 ~]# yum install -y httpd[root@t1 ~]# echo "I ...

  6. mysql通配符_，%查询

    模糊查询 在使用模糊查询的时候,mysql使用的是最左原则,所以模糊查询语句: select * from sys_user where user_name like '#{userName}%' 我 ...

  7. golang 语言的特性

    给函数传递参数的时候 map.slice.channel是按引用传递的 同一个变量不能用 := 这种方式创建并赋值两次. 一个包(package)的func .结构体类型变量如果要被外部的包调用.fu ...

  8. MeteoInfoLab脚本示例：OMI Grid HDF数据

    OMI卫星格点数据的例子,全球臭氧柱总量分布.脚本程序: #Add data file folder = 'D:/Temp/hdf/' fns = 'OMI-Aura_L3-OMTO3e_2005m1 ...

  9. BOOST库 消息队列

    直接贴实验代码: /******* boost 消息队列 **********/ #if 1 #include <boost/thread/thread.hpp> #include < ...

  10. 运行bee run之后出现的错误以及解决方法Failed to build the application:

      运行bee run之后出现的错误以及解决方法 创建一个beego项目 bee new myapp 在该项目执行下面的代码 bee run 出现的问题 2020/04/22 21:12:07 INF ...