多种样式柱状图 前台部分
<!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));转载于:https://www.cnblogs.com/mengluo/p/11274002.html
