echarts爬坑记录

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

创新互联建站长期为1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为金凤企业提供专业的网站制作、做网站，金凤网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。

2、不显示柱状图上方的数据
echarts爬坑记录
在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', 才起作用

二、柱状图学习

效果图：
echarts爬坑记录

对柱形图各部分分析:（重点）：
echarts爬坑记录

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

代码：




    echarts

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

怎么给列表添加数字排序呢
echarts爬坑记录
在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
    }]
});

本文名称：echarts爬坑记录
链接URL：http://cdxtjz.com/article/gichsp.html

echarts爬坑记录

其他资讯