ECharts----九个配置项

Echarts 使用五步曲

下载并引入 ECharts.js 文件
准备一个具备大小的DOM容器生成的图表会放入这个容器内
初始化echarts实例对象
指定配置项和数据-------------------------根据具体需求修改配置选项
将配置项设置给Echarts实例化

option = {
  // 标题组件，包含主标题和副标题
  title: {
    text: 'Stacked Line'
  },
  // 提示框组件
  tooltip: {
    //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
    trigger: 'axis'
  },
  // 图例组件
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads','Search Engine']
  },
  // 直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴
  grid: {
    //grid 组件离容器左侧的距离。
    left: '3%',
    right: '4%',
    bottom: '3%',
    //grid 区域是否包含坐标轴的刻度标签 
    //  containLabel: true 这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件
    containLabel: true
  },
  // 工具栏。
  //内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具
  toolbox: {
    // 各工具配置项
    feature: {
      // 保存为图片
      saveAsImage: {}
    }
  },
  // 直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
  xAxis: {
   // 'category' 类目轴，适用于离散的类目数据
    type: 'category',
    // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
    boundaryGap: false,
    // 默认为 true , 这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间
    // 如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    // 'value' 数值轴，适用于连续数据
    type: 'value'
  },
  
  series: [
    // 折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势
    {
    // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
      name: 'Email',
      type: 'line',
      //数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
      stack: 'Total',
      // 如果给 stack 指定不同值或者去掉这个属性则不会发生数据堆叠
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

在这里插入图片描述

ECharts----九个配置项

猜你喜欢