写博客不是为了博眼球 是为了记笔记
左侧饼图
Pielinechart1(){
let myChart = echarts.init(document.getElementById("Piechart1"));
let option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
color:['#65b5c2', '#ffbe05','#1dc499','#177bbb', '#3ddcde','#177bbb','#1ccacc', '#e33244','#ffbe05','#3ddcde'],//自定义饼图颜色
legend: {
itemWidth: 20,// 标志图形的长度
itemHeight: 10,// 标志图形的宽度
orient: 'vertical',// 标志的位置
right: 80,
top: 20,
bottom: 20,
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','555','566','777','888','999','333']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '50%',
label: {
normal: {
position: 'inner',
show : false
}
},
center: ['28%', '50%'],// 调整饼的位置
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:335, name:'直接访问'},
{value:310, name:'999'},
{value:234, name:'555'},
{value:234, name:'566'},
{value:135, name:'777'},
{value:135, name:'333'},
{value:148, name:'888'}
],
itemStyle: {
normal:{
borderWidth:'2',
borderColor:'#FFF',
},//给饼图每一块之间加个白色分割线
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
},
右侧横向柱状图
Barchart2(){
let myChart = echarts.init(document.getElementById("Barchart2"));
let option = {
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
legend: {
data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
},
grid: { // 柱状图的位置调整
top:'7%',
left: '15%',
right: '4%',
containLabel: true
},
xAxis: {
// 控制横坐标显示
show:false,
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
// lineStyle: {
// color: '#00ffee'
// }
},
},
yAxis: {
// 控制纵坐标显示
axisTick: {
show: false
},
axisLine: {
show: false,
// lineStyle: {
// color: '#00ffee'
// }
},
type: 'category',
data: ['周一','周二','周三','周四','周五','周六','周日','周四','周五','周六',]
},
series: [
{
name: '',
type: 'bar',
itemStyle: {
normal: {
barBorderRadius:[6, 6, 6, 6],// 设置柱状图 圆角
color: function(params) {
// 柱状图设置不同颜色
var colorList = ['#65b5c2', '#ffbe05','#1dc499','#177bbb', '#3ddcde','#177bbb','#1ccacc', '#e33244','#ffbe05','#3ddcde'];
return colorList[params.dataIndex]
}
}
},
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [820, 832, 901, 934, 1290, 1330, 1320, 832, 901, 934]
}
]
};
myChart.setOption(option);
},