前端:
//简化代码
<style>
.pillar{
width: 50%;
height: 430px;
display: inline-block;
}
.pie{
width: 50%;
height: 430px;
display: inline-block;
}
</style>
<div>
<div class="pillar" id="div_pillar"></div>
<div class="pie" id="div_pie"></div>
<div>
引入echarts.js
<script type="text/javascript" src="../js/echarts/echarts.js"></script>
<script type="text/javascript">
var pillar= document.getElementById("div_pillar");
var myChart = echarts.init(pillar);
var pie = document.getElementById("div_pie");
var myChartPie = echarts.init(pie);
//定义不同的颜色
const colors = ['#CA8622','#61A0A8', '#BDA29A', '#D48265', '#6E7074','#749F83'];
$(function(){
init_pillar();
init_pie();
});
function init_pillar(){
var option = {
color: colors,
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['直达','营销', '搜索', '邮件','联盟','视频']
},
yAxis: {
type: 'value'
},
series: [{
data: [10, 20, 30, 40, 50, 60],
type: 'bar',
barWidth: '40',
showBackground: false,
label: {
show: true,
position: 'top'
},
itemStyle:{
normal:{
color: function(params){
return colors[params.dataIndex];
}
}
}
}]
};
myChart.setOption(option);
}
function init_pie(){
var option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直达','营销', '搜索', '邮件','联盟','视频']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{value: 10, name: '直达',itemStyle: {color:'#CA8622'}},
{value: 20, name: '营销', itemStyle: {color:'#61A0A8'}},
{value: 30, name: '搜索',itemStyle: {color:'#BDA29A'}},
{value: 40, name: '邮件', itemStyle: {color:'#D48265'}},
{value: 50, name: '联盟', itemStyle: {color:'#6E7074'}},
{value: 60, name: '视频', itemStyle: {color:'#749F83'}}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChartPie.setOption(option);
}
</script>
动态填充数据
需要去请求数据库,返回的数据弄成数组的格式,自己放进去就好了,这里就不一一写了。