柱状图
option = {
color: ['#a02311','#2f4554'],//自定义颜色
tooltip: {
trigger: 'axis',
//formatter: '{b} <br/> {a0}: {c0}%<br/>{a1}: {c1}% <br/>' //堆叠图，鼠标悬停数据后添加%
formatter: function (params,ticket,callback) {//堆叠图，鼠标悬停数据后添加%，并且区分颜色
var res = params[0].name;
for (let i = 0, l = params.length; i < l; i++) {
res += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%';
}
return res;
}
},
legend: {
data: ['预算', '实际'],//与series中的name一一对应
},
xAxis: {
type: 'category',
axisLabel: {
show: true,
interval:0,
formatter:function(params) {//横坐标字数过多换行显示
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 4; //每块一行显示几个字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName
}
},
data: ['电脑设备','电器设备','办公材料','电子设备','办公家具','通讯设备','软件','材料费','工本费','运输费','建筑材料','人力资源','其他零星','合计']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} %'
}
},
series: [{
name: '预算',
data: [10, 50, 15, 80, 70, 100, 90,100, 20, 50, 80, 70, 80, 30],
type: 'bar',
barGap: '-100%',//添加此配置项即为重叠效果
//stack: 'one',//series的stack名字一样时为堆叠效果
},{
name: '实际',
data: [100, 30, 50, 80, 70, 80, 30,80, 40, 50, 80, 70, 80, 100],
type: 'bar',
//stack: 'one',
}]
}
饼图
option = {
title : {
show: true,
text: '饼图',
x: 'center',
//backgroundColor: '#f8ac59',//字体背景颜色
textStyle:{//字体样式
fontSize:24,
textShadowColor: '#f8ac59',
//color: '#FFFFFF',//字体颜色
//fontWeight:'600',
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series: [
{
name:'访问来源',
type:'pie',
minAngle:15,//最小角度（最小模块占用饼图的角度）
startAngle:120,//旋转
radius: ['50%', '70%'],
center : ['50%', '50%'],//圆的位置：【距左右的位置，距上下的位置】
avoidLabelOverlap: false,
label: {
normal: {
show: false,//不显示
position: 'inner',//标签内置
formatter: '{b}: {d}%'//标签显示效果
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
}
折线图
option = {
//横坐标可拖动效果，多用于横坐标数据很多的情况
dataZoom: [
{
show: true,
realtime: true,
start: 0,
end: 15
},
{
type: 'inside',
realtime: true,
start: 0,
end: 15
}
],
xAxis: {
type: 'category',
//坐标轴刻度标签的相关设置。
axisLabel: {
interval: 0,
rotate: "25"//横坐标旋转显示
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
//设置纵坐标的最小值和最大值分别为数据的最小最大值
//用于数据差距极小的数据显示波动
min: function(value) {
if(value.min == value.max){
return 0;
}else{
return value.min;
}
},
max: function(value) {
if(value.min == value.max){
return 2;
}else{
return value.max;
}
}
},
series: [{
data: [1.1120, 1.1121, 1.1122, 1.1130, 1.1125, 1.1126, 1.1122],
type: 'line'
}]
};
JS调用
...
<div id="pie" style="height: 300px"></div>
...
<script src="${ctxPath}/static/modular/common/shine.js"></script>//引入的echarts主题
<script>
var pie = echarts.init(document.getElementById('pie'));
//var pie = echarts.init(document.getElementById('pie'),'shine');调用主题
function getPie() {
var ajax = new $ax(Feng.ctxPath + "后台URL", function (data) {
var categories = [];
var values = [];
for (var i = 0; i < data.length; i++) {
//数据拼接
var dataArray = {};
categories.push(data[i].A);
dataArray.name = data[i].A;
dataArray.value = data[i].B;
values.push(dataArray);
}
option.title.show = false;
option.legend.show = true;
option.legend.data = categories;
option.series[0].data = values;
option.series[0].label.normal.show = false;
option.series[0].center = ['55%', '50%'];
pie.setOption(option1, true);//加上true可以使每次刷新数据时，图例会重绘
}, function (data) {
Feng.error("获取***失败!");
});
ajax.set("date",$("#date").val());//参数传递
ajax.start();
}
//当调整浏览器窗口的大小时，发生 resize 事件。
window.addEventListener("resize", function () {
pie.resize();
});
$(function () {
getPie();
});
</script>
