vue + echarts 多条折线图

html:


js:

	// 折线图
      getLine () {
        // 基于准备好的dom,初始化echarts实例
        let myChart1 = echarts.init(document.getElementById('myChart1'));
        // 绘制图表,this.echarts1_option是数据
        myChart1.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            y: 'bottom',
            x: 'center',
            data:['A','B','C']
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五','周六', '周日']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name:'A',
              type:'line',
              stack: '总量',
              data: [3, 54, 65, 43, 24, 5]
            },
            {
              name:'B',
              type:'line',
              stack: '总量',
              data: [43, 5, 33, 23, 54, 53]
            },
            {
              name:'C',
              type:'line',
              stack: '总量',
              data: [2, 45, 42, 23, 34, 3]
            }
          ]
        })
      }

表现图如下(如同):
vue + echarts 多条折线图_第1张图片

你可能感兴趣的:(vue,前端开发,echarts)