使用setOption动态读取数据时无法显示图例,分析后发现前端代码没有问题。
代码如下图:
var myCharts2 = echarts.init(document.getElementById('consoleChartsWord'));
var options2 = {
color: ['#55A5EA', '#9DAFFF','#F591A2', '#FEAA4F','#9BC539','#AD5A5A'],
tooltip: {
trigger: 'item'
},
legend: {
show: true,
orient: 'vertical',
left: 'auto',
},
series: [
{
name: '资源类别',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data:[],
}
]
};
$.get(layui.cache.server+'/Orders/getTypeCount', function (res) {
if (res.code === 0) {
options2.series[0].data = res.data;
myCharts2.setOption(options2,true);
}else{
window.open ('../login.html','_top');
}
}, 'json');
排查后发现是后端从数据库读取数据时,字段名没有与Echarts要求一致。
Eharts要求数据格式为
data: [
{ value: 6, name: '会议室' },
{ value: 2, name: '棋牌室' },
{ value: 2, name: '羽毛球' },
{ value: 1, name: '篮球场' },
{ value: 1, name: '停车场' },
{ value: 1, name: '乒乓球' }
],
所以后端从数据库读取时要重命名,
public function getTypeCount(){
$sql = "SELECT count(*) AS value,d.res_type_name AS name
FROM resource_type d
LEFT JOIN resource b ON d.res_type_id=b.res_type_id
LEFT JOIN orders a ON a.res_id=b.res_id
WHERE a.order_state=1
GROUP BY d.res_type_name";
$result = $this->db->query($sql);
return $result->result_array();
}
最后成功显示