您的位置：首页 > 其它

echarts柱状图（柱条颜色渐变，多条数据显示指定数据数）

2018-02-04 19:06 666 查看
(上一篇echarts饼图与本页例子代码可在github（https://github.com/applebring/echarts-）上下载)--本打算与上一篇写一块，为防止篇幅过长分开写，echarts柱状图实现柱条渐变以及显示柱条数量限制

最终实现样式为：



先用图解释几个属性：

tooltip.axisPointer.type:shadow:


tooltip.axisPointer.type:shadow:


grid:


xAxis:x轴

xAxis.type:time


xAxis.type:value


xAxis.type.category


xAxis.name:


xAxis.axisTick:



xAxis.axisLabel:



代码如下，具体配置项已在注释中详解

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>commonChart.js示例</title>
<script src="./echarts/echarts.min.js" charset="utf-8"></script>
<script src="./echarts/commonChart.js" charset="utf-8"></script>
</head>
<style>
.chartbox{
display:block;
width:1024px;
margin:20px auto;
min-height:400px;
border:1px solid #ddd;
}
</style>
<body>
<h2>柱状图</h2>
<div class="chartbox" id="bar"></div>
<script src="./js/jQuery/jquery-2.2.3.min.js"></script>
<script charset="utf-8">
//柱状图
//可参考链接:http://echarts.baidu.com/examples/editor.html?c=bar-gradient
// app.title = '坐标轴刻度与标签对齐';
//此方式的data可以对单个label进行样式设置
// var dataX =  [{
//     value: '周一',
//     // 突出周一
//     textStyle: {
//         fontSize: 20,
//         color: 'red'
//     }
// }, '周二', '周三', '周四', '周五', '周六', '周日'];
//一般data
var dataX  = ['周一','周二', '周三', '周四', '周五', '周六', '周日']
var option = {
color: ['#3398DB'],//此处可设置柱条全局颜色
textStyle:{
color:'blue'//设置所有文字颜色
},
//提示样式
tooltip : {
trigger: 'axis',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
axisPointer : {            // 坐标轴指示器，坐标轴触发有效
show:true,
type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
}
},
legend:{
data:['直接访问']//与seriesname一致
},
//直角坐标系内绘图网格,具体属性图示
grid: {
// show:true,
// shadowOffsetY:30,//必须为show:true时才可改变
backgroundColor:'#ddd',//必须为show:true时才可改变网格背景颜色
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,//grid 区域是否包含坐标轴的刻度标签。http://echarts.baidu.com/option.html#grid.containLabel
},
xAxis : [
{
type : 'category',//'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据。
name:'星期',//x轴坐标名字样式等均以此开头http://echarts.baidu.com/option.html#xAxis.name
nameTextStyle:{

},
data :dataX,
axisTick: {
alignWithLabel: true
},
boundaryGap:true,
//坐标轴轴线相关设置。
axisLine:{
show:true,
symbol:'arrow',
symbolSize:[10, 15],
lineStyle:{
color:"blue"//x轴颜色，若不设置全局字体颜色，则可改变x轴颜色
}
},
//坐标轴刻度
axisTick:{
alignWithLabel:true,//可使坐标刻度线居中，此时需要设置 boundaryGap:true,
},
//坐标轴刻度标签的相关设置。x轴文字的相关配置均在此处
axisLabel:{
show:true,
rotate:0,//刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
// margin:20,//刻度标签与轴线之间的距离。
// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} （星期）',
// showMinLabel:''//是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最小 tick 的 label）。
color:"#000",//刻度标签文字的颜色，默认取 axisLine.lineStyle.color。支持回调函数

fontStyle:'italic',
backgroundColor:'red',
shadowBlur:20,
textBorderColor:'red'
// // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
// formatter: function (value, index) {
//     // 格式化成月/日，只在第一个刻度显示年份
//     var date = new Date(value);
//     var texts = [(date.getMonth() + 1), date.getDate()];
4000
//     if (index === 0) {
//         texts.unshift(date.getYear());
//     }
//     return texts.join('/');
// }
},
//分隔线
splitLine:{
show:false
}
}
],
//y轴属性与x轴类似，此处不列举
yAxis : [
{
type : 'value',
name:'数量',

}
],
//上述为对x，y轴的一些控制，以下为对数据生成的柱状条控制
series : [
{
name:'直接访问',//系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
type:'bar',
itemStyle:{//
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'rgba(255,255,255,0)'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
)
},
},
label:{//label要加入normal才可生效,label即为x轴对应Y轴的值
normal:{
show:true,
color:'red',//设置渐变时候控制不到颜色，只能通过全局textStyle来控制
position:'top'
}
},
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
var chart1 = echarts.init(document.getElementById('bar'));
chart1.setOption(option);
</script>
</body>
</html>


当数据过多应该如何进行配置，并且控制每次只显示固定数目呢？

此刻需要引入
dataZoom
 组件
用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。下面例子为每次限制显示六条数据，主要通过start跟end的值控制显示条数，例子模拟40条数据，如下图，鼠标可通过拖拽查看右边剩余数据，其中end的值为（barWidth/表格容器总宽度）*每次显示条数（此处只考虑start为0的情况）,此例子中start:0,barWidth=20,容器总宽为1024,每次要显示六条数据，因此end为20/1024*6向上取整12,实现该功能请加入该代码

dataZoom:[{
type:'inside',//inside,slider此处只列举inside
start:0,
end:12,//dataZoom-inside.start 和 dataZoom-inside.end 共同用 百分比 的形式定义了数据窗口范围。
xAxisIndex:0,//不指定时，当 dataZoom-inside.orient 为 'horizontal'时，默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值，建议显式指定。
filterMode:'none',//dataZoom 的运行原理是通过 数据过滤 来达到 数据窗口缩放 的效果。数据过滤模式的设置不同，效果也不同。('filter','weakfilter','empty','none')http://echarts.baidu.com/option.html#dataZoom-inside
zoomLock:true,//只能拖动不可缩放,若无需禁止缩放设置为false或者去除即可
}]


最后，在项目实践过程中发现同时使用多个图表没办法实现表格跟随屏幕缩小而缩小，最终解决方法如下：通过$("window").on("resize",function(){
myChart1.resize();myChart2.resize();...})可实现多个表格自适应，以上就是自己项目实践中的一些小心得。希望对大伙有帮助，如有错误，也欢迎指出~ 
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                echarts
                                                渐变
                                                柱状图
                                                饼图
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航