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

(上一篇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:

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

	
	
	
	



  
柱状图

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

此刻需要引入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();...})可实现多个表格自适应，以上就是自己项目实践中的一些小心得。希望对大伙有帮助，如有错误，也欢迎指出~