标签：name data 配置 echarts line Total type stack

折线图

代码

option = {
  // 标题组件 【1】
  title: {
    text: 'Stacked Line'
  },
  // 提示框组件 【2】
  tooltip: {
    // 折线图、柱状图  需设置axis时鼠标移动到坐标轴上会触发；
    // 饼图、散点图 需设置item时鼠标移动到上面会触发；
    trigger: 'axis'
  },
  
  // 图例组件 【3】
  legend: {
    // data中的数据和series中对象的name值保持一致时才会出现；
    // 如果series中对象的name设置了值，legend.data的值可以不设置；
    // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  // 网格组件 【4】：可以设置直角坐标系的大小
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    // 是否包含刻度标签
    containLabel: true
  },
  // 工具栏组件 【5】：可以导出图片、数据视图、重置等
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  // x轴 【6】
  xAxis: {
    // type属性值为category时表示类目轴，会将本身对象的data属性值作为x轴的刻度；
    type: 'category',
    // true时将刻度标签放置在中间，false时将刻度标签放在刻度上
    boundaryGap: true,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  // y轴。【7】
  yAxis: {
    // type属性值为value时表示数值轴，会将series中对象的data属性值作为y轴的数值；
    type: 'value'
  },
  // 系列。 设置图表的类型、
  series: [
    {
      name: 'Email',
      // 图表类型
      type: 'line',
      // 值和其他对象的stack一致时会进行堆叠，即进行叠加
      // stack: 'Total',
      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]
    }
  ]
};

图示

标签：name,data,配置,echarts,line,Total,type,stack
来源： https://www.cnblogs.com/it774274680/p/16414629.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。