echart折线图多条线

代码语言：javascript复制

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, null, {
  renderer: 'svg'
});
var option;

option = {
  title: {
    text: '打开图片时间对比'
  },
  xAxis: {
    type: 'category',
    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [8.25, 8.61, 8.5, 8.07, 7.66, 7.29, 7.4, 7.56, 7.62, 7.32],
      type: 'line',
      smooth: true,
      label: {
        show: true,
        position: 'bottom',
        textStyle: {
          fontSize: 15
        }
      }
    },
    {
      data: [5.6, 5.51, 6.88, 6.02, 6.25, 5.66, 5.61, 6.08, 5.24, 5.17],
      type: 'line',
      smooth: true,
      label: {
        show: true,
        position: 'bottom',
        textStyle: {
          fontSize: 15
        }
      }
    }
  ]
};

option && myChart.setOption(option);

部分版本：

代码语言：javascript复制

option = {
    title: {
    text: '打开图片时间对比'
  },
  xAxis: {
    type: 'category',
    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      
      data: [8.25, 8.61,8.5,8.07,7.66,7.29,7.40,7.56,7.62,7.32],
      type: 'line',
      smooth: true,
      label: {
        show: true,
        position: 'bottom',
        textStyle: {
          fontSize: 15
        }
      }
    },
    {
   
      data: [5.6,5.51,6.88,6.02,6.25,5.66,5.61,6.08,5.24,5.17],
      type: 'line',
      smooth: true,
      label: {
        show: true,
        position: 'bottom',
        textStyle: {
          fontSize: 15
        }
      }
      
    }
  
  ]
};

 折线图多条线主要就是

代码语言：javascript复制

 series: [
    {
      data: [数值1，数值2，...],
      type: 'line',        //线型
      smooth: true,        //平滑曲线
      label: {             //标签（即上标数字）
        show: true,        //显示
        position: 'bottom',
        textStyle: {
          fontSize: 15     //字体大小
        }
      }
    },
//这是另外一个折线（要注意各个花括号的包含层序关系，防止冗余）
    {
      data: [数值3，数值4，...],
      type: 'line',        //线型
      smooth: true,        //平滑曲线
      label: {             //标签（即上标数字）
        show: true,        //显示
        position: 'bottom',
        textStyle: {
          fontSize: 15     //字体大小
        }
    }
  
  ]

如果不想显示上标数字，去掉label模块就好，即:

代码语言：javascript复制

 series: [
    {
      data: [数值1，数值2，...],
      type: 'line',        //线型
      smooth: true,        //平滑曲线
    },
//这是另外一个折线（要注意各个花括号的包含层序关系，防止冗余）
    {
      data: [数值3，数值4，...],
      type: 'line',        //线型
      smooth: true,        //平滑曲线
    }
  ]

其实多看echart的文档手册就好↓（结合案列）

Handbook - Apache ECharts

apache label

0 人点赞