php histogram mapping echarts

A variety of styles histogram
reception section

<!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 part

 //第一中数据格式
        $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 histogram mapping echarts

Guess you like