多种样式柱状图

前台部分

<!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柱状图的更多相关文章

  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. Win10系统中文显示乱码怎么解决

    来源:https://jingyan.baidu.com/article/d8072ac4ba20cfec94cefd48.html 简单的说是: 全部设置改为中国而且一定要重启系统,无论时间还是区域 ...

  2. 【题解】[SCOI]windy数

    Link 题目大意:求给定一个区间内满足每一位的数相差大于\(2\)且没有前导零的数的个数. \(\text{Solution:}\) 我们可以按照数位\(dp\).设状态为当前要\(dp\)第\(p ...

  3. JVM垃圾回收的基础知识

    什么是垃圾? 没有任何引用指向的对象,就是垃圾 如何找到垃圾?(2 种方法) 过程:先找到正在使用的对象,然后把没有正在使用的对象进行回收 1.引用数-Reference-Count 被引用数为 0 ...

  4. 对lambda表达式的字节码实现个人理解 - 简单描述

    暂且抛开具体的代码实现,谈谈个人的理解. 常规的方法调用,具体由哪条指令来执行,实际都是在JVM的规则中就定下来了,比如构造方法使用invokeSpecial,静态方法使用invokeStatic.现 ...

  5. ansible-playbook-jinja2管理nginx配置文件

    1. 案例1:创建jinja2的nginx的主配置文件  1) 编写jinja2的nginx的主配置文件 1 [root@test-1 jinja2]# vim /ansible/jinja2/tes ...

  6. web自动化测试总结

    web自动化: 1.测试用例(操作步骤,熟读需求文档,web项目先用手工研究,前置条件,预期结果) 接口自动化测试中数据功能最适合作为数据驱动,数据放在excel中需要操作excel 为什么web自动 ...

  7. docket镜像

    1.是什么 镜像是一种轻量级.可执行的独立软件包,用来打包软件运行环境和基于运行环境开发的软件,它包含运行某个软件所需的所有内容,包括代码.运行时.库.环境变量和配置文件. 1.1.什么是UnionF ...

  8. php超全局数组 为什么swoole的http服务不能用

    php的超全局数组$_GET等九个 可以直接使用 无需定义 实际上是浏览器请求到Apache或者nginx的时候 转发到PHP处理模块 fpm转发给php解释器处理 php封装好后丢给php的  sw ...

  9. nginx安全：配置网站图片防盗链

    一,为什么要做防盗链? 1,什么是盗链? 比如某人有一个A网站, 他不愿自己存储图片,(因为磁盘和带宽都有成本) 就在自己A网站的页面上直接插入B网站的图片, 从而为自己吸引流量,这就是盗链 2,为什 ...

  10. PHPStorm注释缩进问题

    以下是让强迫症很难受的注释格式 以下几步即可解决强迫症的烦恼 1.点击File 2.点击setting 3.按照以下几步走 4.按照以下几步走   5.最后效果如下