echarts爬坑记录

一、
1、echarts Y轴刻度保留小数设置，以及设置刻度间隔
默认echarts会给你把最大值，最小值之间的这段距离分为5段，所以如果你的值都在6到6.5之间的话，你就设置min为6，max为6.5就可以

2、不显示柱状图上方的数据

在series里面的label里面进行设置
设置label:{show: false}即可
修改掉changeChartStyle里面的series下面的label对象的normal对象下面的show属性为false

3、tooltip表示悬浮框，
backgroundColor: "rgba(62,77,95,0.8)"：表示悬浮框的背景颜色，
shadowStyle:{color:'rgba(14,36,64,0.8)'}：表示悬浮框移入到每一列的背景颜色，需要设置type: 'shadow', 才起作用

二、柱状图学习

效果图：

对柱形图各部分分析:（重点） ：

实现：
根据柱形每个部分的专业名称去寻找官网中的配置项手册对应的属性，然后实现你需要的效果

代码：

三、修改悬浮框tooltip里面的文字显示
在tooltip里面，定义
formatter:function(params){
return params[0].axisValue.slice(1)+ " 火警数："+params[0].value
}
params表示每一条数据的对象

怎么给列表添加数字排序呢

在yAxis里面添加

axisLabel:{
interval: 0,
margin: 225,
            textStyle: {
                    align: 'left',
                    fontSize: 13
            },
            rich: {
                    a: {
                            color: '#fff',
                            backgroundColor: '#FAAA39',
                            width: 20,
                            height: 20,
                            align: 'center',
                            borderRadius: 2
                    },
                    b: {
                            color: '#fff',
                            backgroundColor: '#4197FD',
                            width: 20,
                            height: 20,
                            align: 'center',
                            borderRadius: 2
                    }
            },
            formatter: function(params) {
                    if (parseInt(params.slice(0, 1)) < 3) {
                            return [
                                    '{a|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
                            ].join('\n')
                    } else {
                            return [
                                    '{b|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
                            ].join('\n')
                    }
            }
}

然后，在给yAxis赋值的时候，添加数字序号

var nxData = [];
for (var i = xData.length-1; i >=0; i--) {
        nxData.push(i + xData[i]);  //nxData这里面就包含了数字序号
}
CHART["_topUnitResult"].setOption({
    yAxis: {
        type: 'category',
        data: nxData,
    },
    series: [{
        name: '报警数',
        type: 'bar',
        data: yData
    }]
});