echarts----折线图和柱状图

折线图和柱状图

特点:
①有2个坐标轴,其中一个为类目轴,另一个为数据轴

②类目轴有值(data),且值为一个数组,表示类目的种类;数据轴无值

③只有类目轴才有data属性

折线图点击预览

柱状点击预览

两个y轴点击预览

类目轴

1
2
3
4
xAxis: {
name: '时间',
data: ['周一','周二','周三','周四','周五','周六']
}
  • name:显示在坐标轴右侧,表示x轴的名称
  • data:数据类目轴的数据,表示类目的种类,值为一个数组
  • type: ‘category’

数据轴

1
2
3
4
yAxis: {
name: '金额'
type: 'value'
}
  • name: 显示在坐标轴上方,表示y轴的名称
  • type: 轴的名称,Y轴默认值为value,表示数据轴
  • min
  • max
  • interval
  • axisLabel:刻度标签,属性值为对象
    • 刻度标签的内容格式器,支持字符串模板和回调函数两种形式
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      // 使用字符串模板,模板变量为刻度默认标签 {value}
      formatter: '{value} kg'

      // 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
      formatter: function (value, index) {
      // 格式化成月/日,只在第一个刻度显示年份
      var date = new Date(value);
      var texts = [(date.getMonth() + 1), date.getDate()];
      if (index === 0) {
      texts.unshift(date.getYear());
      }
      return texts.join('/');
      }

      注意:对于多y轴,要在series中的对象中设置yAxisIndex

      系列series——-图线

      系列的特点:
  • 一个dom中的所有的图线都在这里,一个dom中可以有很多个不同类型的图线,
    每一个类型的实例是一个对象
  • 每一个对象的data属性中都存放着图线的数据

对象的属性

  • name:代表图线的内容的描述文字,
    • 关联和图例、提示工具
    • 饼状图一个图线有多个内容,不关联饼状图的图例,饼状图的图例关联饼状图的data.value
  • type:图线类型
  • data:存放图线的实际数据值,属性值为数组
    • 对折线图和柱状图,由于每一个数据对象只有一个数字,直接将数据放到数组即可(简写)
    • 对于饼状图,由于没有坐标轴,每一个数据对象都需要单独定义
  • yAxisIndex:多y轴时候设置数据对应的轴的索引

data的模板

1
2
3
4
5
6
data:[
{
name:'', // 数据代表的含义
value:''
}
]

0%