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
    }]
});

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。