因需要满足UI的很多需求，现在把Echarts配置项记录一下。
一、标准柱状图
主要实现了：
1，标准柱状图多种颜色显示，不同类型显示不同颜色；
2，隐藏y轴轴线和刻度；
3，修改x轴轴线颜色和字体颜色；
4，实现柱状图的渐变显示。
var myChart = echarts.init(document.getElementById('wifi'));
option = {
//color: ["#90be4c", "#edb156"],
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow',
axisPointer:{
lineStyle:{
type:'dotted',
}
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['在线', '离线'],
axisLabel: {//修改x轴标签字体颜色
show: true,
textStyle: {
color: '#546a79'
},
},
axisLine:{//修改x轴颜色
lineStyle: {
color: '#ddd',
}
}
}
],
yAxis : [
{
type : 'value',
name:'数量（台）',
minInterval: 1,//设置刻度为整数
scale: false,
max:function(value) {//预设最大值，当数据最大值为0时，设置图表最大值为5
var max = 0;
if(value.max == 0){
max = value.max + 5;
}else{
max = value.max;
}
return max;
},
axisLabel: {
show: true,
textStyle: {
color: '#546a79'
},
},
axisLine:{
lineStyle: {
opacity:0,//透明度为0，隐藏y轴
}
},
axisTick : { //取消刻度线
show : false
},
}
],
itemStyle: {
normal: {
color: function (params){
//设置多颜色和柱状图渐变色，只有两种类型就只有两组颜色，多种类型多组颜色
var colorList = [
['#90be4c','#ffe'],
['#edb156','#ffe']
];
var index=params.dataIndex;
if(params.dataIndex >= colorList.length){
index=params.dataIndex-colorList.length;
}
return new echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{offset: 0, color: colorList[index][0]},
{offset: 1, color: colorList[index][1]}
]);
},
},
},
series : [
{
type:'bar',
barWidth: '30%',
data:[wifi.deviceOnlineNum,wifi.deviceOfflineNum]
//data:[20,5],
}
]
};
myChart.setOption(option);二、标准饼图
主要实现了：
1.数据为0时显示灰色
2.数据在饼图内显示
function loadReport(){
var color = ["#90be4c", "#edb156"];
if(screen.onlineNum == 0){
color[0] = "#999";
}
if(screen.offlineNum == 0){
color[1] = "#999";
}
var myChart = echarts.init(document.getElementById('screen'));
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
icon: 'rect',
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
bottom: 30,
textStyle: {
fontSize: 12,
color: '#666666'
},
data: ['在线', '离线']
},
color: color,
series: [
{
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{value: screen.onlineNum, name: '在线'},
{value: screen.offlineNum, name: '离线'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
label:{
show: true,
position:'inner',
formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比)
}
}
}
}
]
};
myChart.setOption(option);
}三、问题总结
1.解决ECharts Can't get dom width or height!无法初始化图表的问题
问题场景：tab切换显示多个折线图时，会出现图表DOM无法确定宽高的原因
解决方案：初始化图表时，js重新设置图表容器的宽高
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var resizeMainContainer = function (div) {
div.style.width = window.innerWidth + 'px';
div.style.height = '500px';
};// 初始化图表
var myChart1 = echarts.init(origin);
$(window).on('resize', function () {//
//屏幕大小自适应，重置容器高宽
resizeMainContainer();
myChart1.resize();
});完整代码：
//============================报表====================
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var resizeMainContainer = function (div) {
div.style.width = window.innerWidth + 'px';
div.style.height = '500px';
};
function initReport() {
var data = report.curveValue;
var len = data.length;
report.seriesName = report.legend;
console.log(report.legend);
if (multiarr(data)) {//二维数组
report.multiArr = true;
for (var i = 0; i < len; i++) {
var series = {
name: report.seriesName[i],
type: 'line',
smooth: true,
data: data[i]
};
report.reportSeries.push(series);
}
// table表格数据横纵列数据互换
var newArray = report.tableValue[0].map(function (col, i) {
return report.tableValue.map(function (row) {
return row[i];
})
});
report.tableValue = newArray;
} else {
report.multiArr = false;
var series = {
name: report.seriesName[0],
type: 'line',
smooth: true,
data: data
};
report.reportSeries.push(series);
}
}
function multiarr(arr) {//判断是二维数组还是一维数组
for (var i = 0, len = arr.length; i < len; i++)
if (arr[i] instanceof Array) {
return true;
}
return false;
}
function clearData() {
report.curveValue = [];
report.tableValue = [];
report.legend = [];
report.reportSeries = [];//初始化
report.title = null;
report.seriesName = null;
report.reportSeries = [];
}
function loadReport(div) {
var origin;
if (div == "year") {
origin = document.getElementById('curveYear');
} else if (div == "month") {
origin = document.getElementById('curveMonth');
} else if (div == "day") {
origin = document.getElementById('curveDay');
} else {
origin = document.getElementById('custom');
}
//==================解决echart无法获取容器宽高问题=====================
//设置div容器高宽
resizeMainContainer(origin);
// 初始化图表
var myChart1 = echarts.init(origin);
$(window).on('resize', function () {//
//屏幕大小自适应，重置容器高宽
resizeMainContainer();
myChart1.resize();
});
//================================================================
option = {
title: {
top: 8,
left: 'center',
text: report.customHeader,
textStyle: {
color: '#666',
fontWeight: 'normal',
fontSize: 14,
lineHeight: 20
},
subtext: report.title,
subtextStyle: {
color: '#666',
fontSize: 12,
lineHeight: 20
}
},
legend: {
type: 'scroll',
data: report.legend,
bottom: 0,
orient: 'vertical',
height: 60,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: report.xAxis,
axisLabel: {
show: true,
textStyle: {
color: '#546a79'
}
},
name: report.unit
},
yAxis: {
type: 'value',
name: '度'
},
series: report.reportSeries,
grid: {
top: 120,
bottom: 100,
},
color: ['#c058e5', '#5a96e5', '#4cbe9a', '#edb156', '#de706d', '#90be4c']
};
myChart1.clear();
myChart1.setOption(option);
}