百度echarts如何实现多条折线效果图

百度echarts如何实现多条折线效果图，下面web建站小编给大家简单介绍一下具体代码！

代码如下：

var option = {
  tooltip: {
    trigger: 'axis',
  },
  grid: {
    left: '1%',
    right: '2%',
    bottom: '20%',
    containLabel: true,
  },
  legend: {
    padding: 10,
    tooltip: {
      show: true,
    },
    y: 'bottom',
    data: ['门诊', '住院', '体检'],
  },
  xAxis: {
    type: 'category',
    data: [
    '1月11日',
    '1月12日',
    '1月13日',
    '1月14日',
    '1月15日',
    '1月16日',
    '1月17日',
    '1月18日',
    '1月19日',
    '1月20日'
  ]
  },
  yAxis: {
    type: 'value'
  },
  series: [{
      name: '门诊',
      data: [190, 160, 170, 210, 207, 176, 176, 210, 170, 180],
      type: 'line',
      itemStyle: {
        normal: {
          color: 'yellow',
          lineStyle: {
            color: 'yellow'
          }
        }
      },
    },
    {
      name: '住院',
      data: [103, 98, 120, 130, 125, 175, 130, 125, 75, 115],
      type: 'line',
      itemStyle: {
        normal: {
          color: 'blue',
          lineStyle: {
            color: 'blue'
          }
        }
      },
    },
    {
      name: '体检',
      data: [110, 98, 120, 65, 63, 130, 125, 75, 130, 125],
      type: 'line',
      itemStyle: {
        normal: {
          color: 'green',
          lineStyle: {
            color: 'green'
          }
        }
      },
    },
  ],
}

富婆图表：提供近30种不同类型的图表，包括折线图、柱状图、饼图等

百度echarts雷达图radar根据分数点显示每个不同颜色

百度ECharts文档官网介绍

百度echarts柱状图设置不同颜色（每根柱子一种颜色）

百度echarts图表数据为空如何展示"暂无数据"

标签： line折线图, 百度echarts

上面是“百度echarts如何实现多条折线效果图”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3704.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！