ECharts笔记-------柱状图与折线图

 

 这幅图表由title、legend、series、xAxis、yAxis和tooltip这六个组件组成，每个组件都有对应的属性来调节参数，title和legend的代码跟上一篇一样，这里就不多讲了。

tooltip组件

tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' }
},

trigger	触发类型,可选：'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用、'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
axisPointer.type	指示器类型。'line'直线指示器、'shadow' 阴影指示器、'cross'十字准星指示器。

xAxis组件

xAxis:[
    {
        type:'category',
        axisTick:{
            alignWithLabel:true
        },
        data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    }
],

type	'category'类目轴，适用于离散的类目数据、'value'数值轴，适用于连续数据、'time'时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同、'log'对数轴，适用于对数数据。
axisTick.alignWithLabel	为‘true’可以保证刻度线和标签对齐。
data	类目数据，在类目轴（type: 'categiry'）中有效。

yAxis组件

yAxis:[
    {
        type:'value',
        name:'降水量',
        min:0,
        max:250,
        position:'right',
        axisLabel:{
            formatter:'{value}ml'
        }
     },
     {
        type: 'value',
        name: '温度',
        min: 0,
        max: 25,
        position: 'left',
        axisLabel: {
             formatter: '{value} °C'
        }
     }
],

type	'category'类目轴，适用于离散的类目数据、'value'数值轴，适用于连续数据、'time'时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同、'log'对数轴，适用于对数数据。
name	坐标轴名称。
min	坐标轴刻度最小值。
max	坐标轴刻度最大值。
postion	x 轴的位置。
axisLabel.formatter	刻度标签的内容格式器。

series组件

series:[
    {
        name:'降水量',
        type:'bar',
        yAxisIndex:0,
        data:[6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
    },
    {
        name:'温度',
        type:'line',
        smooth:true,
        yAxisIndex:1,
        data:[6.0,10.2,11,11.6,10.3,13.2,14.3,16.4,18.0,16.5,12.0,5.2]
    }
]

name	系列名称，用于tooltip的显示，legend的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
type	图表类型。
yAxisIndex	使用的y轴的index,在单个图表实例中存在多个 y轴的时候有用。
smooth	是否平滑曲线显示。
data	对应xAxis每一项的数据。