php使用echarts柱状图,php映射echarts柱状图

多种样式柱状图 前台部分

Document

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:

},

]

};

if (option && typeof option === "object") {

myChart.setOption(option, true);

}

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);

}

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));