效果图
html部分
<div id="browsingTime" style="width:100%;height:380px;margin:0 auto;"></div>
js部分,color中设置饼图的颜色
function getChart(){
var myChart = echarts.init(document.getElementById('browsingTime'));
var option = {
color: ["#1983DB", "#55bfc0", "#5fbf68", "#ece269","#de6a66"],
title: {
text: '浏览时长',
subtext: '',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '浏览时长',
type: 'pie',
radius: '65%',
data: [
{ value: datas.onToThree, name: '一至三分钟' },
{ value: datas.threeToFive, name: '三至五分钟' },
{ value: datas.fiveToTen, name: '五至十分钟' },
{ value: datas.overTen, name: '十分钟以上' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
}