感受：理清楚逻辑之后，其实不难只是根据比例改变了它最终要显示的内容，根据情况的不同我们需要对数据做很多的计算和判断，根据数据的变化又会遇到很多种不同的情况，我允许自己在这件事情上踩坑，但也学会了把问题思考全面，时时鞭策自己。
第二次笔记
因为第一次的方法实在是bug太多了，莫名其妙，最后还是选择用别的办法。
参考文章：y轴不等距
实现后如图：
（1）坐标轴设置
axisLabel: {
textStyle: {
color: '#fff',//坐标值得具体的颜色
},
formatter: function (value, index) { //Y轴的自定义刻度值
// var split = parseInt((max - 20000)/10000) + 1;
//100以下的数据一个刻度代表50
if(index >= 0 && index <= 2) {
value = 50 * index;
return value;
}
//100以上的数据 一个刻度自适应
else {
return value;
}
}
}
（2）数据处理函数
function formatData(arr){
var newHashArray = []
for(var i=0;i<arr.length;i++){
var obj={}
if(arr[i].value > 0 && arr[i].value <= 100){
arr[i].value = arr[i].value*6
}
obj.value = arr[i].value
obj.itemStyle = arr[i].itemStyle
newHashArray.push(obj)
}
return newHashArray;
}
（3）tooltip函数
formatter:function(params){
if(params[0].data.value/6 <= 100){
return params[0].name+':'+params[0].data.value/6
}else{
return params[0].name+':'+params[0].data.value
}
}
（4）完整代码
//options设置 （完整代码参考第一次笔记）
//数据处理方法调用
var wxArray = formatData(x)
console.log(wxArray,'wxArray');
var option2 = {
grid: {
left: '5%',
right: '5%',
bottom: '5%',
top: '5%',
containLabel: true
},
tooltip: {
trigger: 'axis',
formatter:function(params){
if(params[0].data.value/6 <= 100){
return params[0].name+':'+params[0].data.value/6
}else{
return params[0].name+':'+params[0].data.value
}
}
},
legend: {
data: y.slice(0,3),
textStyle:{
color:'#fff'
},
},
xAxis: {
type: 'category',
data: y.slice(0,3),
splitLine:{show: false},//去除网格线
splitArea : {show : false},//保留网格区域
axisLine: {
lineStyle: {
color: '#FFF', // 颜色
}
},
axisLabel: {
textStyle: {
color: '#fff',//坐标值得具体的颜色
}
}
},
yAxis: {
type: 'value',
logBase:100,
splitLine :{ //网格线
lineStyle:{
type:'dashed', //设置网格线类型 dotted：虚线 solid:实线
color:'#3c4662'
},
show:true //隐藏或显示
},
splitArea : {show : false},//保留网格区域
axisTick:{ "show":false},//y轴刻度线
axisLine: {
show: false //不显示坐标轴轴线
},
interval:300，
axisLabel: {
textStyle: {
color: '#fff',//坐标值得具体的颜色
},
formatter: function (value, index) { //Y轴的自定义刻度值
// var split = parseInt((max - 20000)/10000) + 1;
//100以下的数据一个刻度代表50
if(index >= 0 && index <= 2) {
value = 50 * index;
return value;
}
//100以上的数据 一个刻度自适应
else {
return value;
}
}
}
},
series: [
{
data: wxArray.slice(0,3),
type: 'bar',
barWidth : 15,//柱图宽度
}
]
};
chart11.setOption(option2, true)
//-----------------------------------------------------------------------
function formatData(arr){
var newHashArray = []
for(var i=0;i<arr.length;i++){
var obj={}
if(arr[i].value > 0 && arr[i].value <= 100){
arr[i].value = arr[i].value*6
}
obj.value = arr[i].value
obj.itemStyle = arr[i].itemStyle
newHashArray.push(obj)
}
return newHashArray;
}
第一次笔记
1. 需求背景
可视化统计文件数使用柱状图展示，分三种处理状态展示，数据量两级分化，出现了高低落差较大的情况。
正常写法如图：
2. 参考博客
百度搜了很久，跑了几个网站，找到一篇可以参考的文章。
3. 需要用到的
4. 使用的时候遇到的一个小问题
在参考了echarts官方的配置项后我去试了一下，但我的显示始终不尽人意，后来测试后如下所示：
（图一）
（图二）
我使用了log之后效果如图二所示，对比后发现，数据里不能含有0的值，0会影响数据，于是我设置了如图一的数据包含1，这个时候y轴最小值变成了1，在目录2的参考博客里有修改y轴刻度值的方法，所以我把第一个刻度值改成了0。
axisLabel: {
textStyle: {
color: '#fff',//坐标值得具体的颜色
},
formatter: function (value, index) { //Y轴的自定义刻度值
//100以下的数据一个刻度代表100
if(index >=0 && index < 1) {
value = 100 * index;
return value;
}
//100以上的数据 一个刻度自适应
else {
return value;
}
return value;
}
}
这里有一个有趣的地方，我是先按照目录2的方法去修改y轴的刻度值的，改完以后是这个样子：
于是我打印了函数里的value和index，第一列是刻度值，第二列是index值，第三列是我给的打印标识。
然后我又去百度了，原来这里只是强制修改刻度值，并不会影响间隔代表的值。
5.解决思路
最后，为了让它看起来比较正常，我把需要展示的数据为0的赋值为1（tooltip会被影响，要想办法设置tooltip的只显示，可以用formatter函数），然后修改了y轴刻度值：
value:result[i].value == 0 ? 1 : result[i].value,
结果就是这个样子：
问题就是：第一个柱子实际只有1416，第二个柱子只有43，第三个为0，这样看着很怪异。
6. 完整代码
function loadchart11z(divId) {
//左柱状图
chart11 = echarts.init(document.getElementById(divId));
var colorList = [
['#1affe9', '#1e96f4'],
['#ffea61', '#fca708'],
['#dc2128', '#fb962d'],
['#1affe9', '#1e96f4'],
['#ffea61', '#fca708'],
['#dc2128', '#fb962d'],
];
$.ajax({
url:"/api",
type: 'POST',
success: function (res) {
var result = mini.decode(res)[0]; //后端数据需要这样处理罢了
var x = [];
var y = [];
for (var i = 0; i < result.length; i++) {
x.push({
value:result[i].value == 0 ? 1 : result[i].value,
itemStyle: {
normal: {
// 每根柱子颜色设置
color:new echarts.graphic.LinearGradient(0,1,0,0,
[
{ offset: 0, color: colorList[i][0] },
{ offset: 1, color: colorList[i][1] }
],
false
),
}
}
})
y.push(result[i].name)
}
var option2 = {
grid: {
left: '5%',
right: '5%',
bottom: '5%',
top: '5%',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
legend: {
data: y.slice(0,3),
textStyle:{
color:'#fff'
},
},
xAxis: {
type: 'category',
data: y.slice(0,3),
splitLine:{show: false},//去除网格线
splitArea : {show : false},//保留网格区域
axisLine: {
lineStyle: {
color: '#FFF', // 颜色
}
},
axisLabel: {
textStyle: {
color: '#fff',//坐标值得具体的颜色
}
}
},
yAxis: {
type: 'log',
logBase:100,
splitLine :{ //网格线
lineStyle:{
type:'dashed', //设置网格线类型 dotted：虚线 solid:实线
color:'#3c4662'
},
show:true //隐藏或显示
},
splitArea : {show : false},//保留网格区域
axisTick:{ "show":false},//y轴刻度线
axisLine: {
show: false //不显示坐标轴轴线
},
axisLabel: {
textStyle: {
color: '#fff',//坐标值得具体的颜色
},
formatter: function (value, index) { //Y轴的自定义刻度值
//100以下的数据一个刻度代表100
if(index >=0 && index < 1) {
value = 100 * index;
return value;
}
//100以上的数据 一个刻度自适应
else {
return value;
}
return value;
}
}
},
series: [
{
data: x.slice(0,3),
type: 'bar',
barWidth : 15,//柱图宽度
}
]
};
chart11.setOption(option2, true)
}
})
}
