element 绘制折线图（复制代码直接用），付效果图

以你之姓@ 2023-01-06 01:41 286阅读 0赞

先上代码（复制过去直接用）

<template>
    	<div class="home-index-box" v-loading="loading">
    		
    		<div class="graph-doubleLine-warp">
    			<el-row :gutter="20">
    				<el-col :span="16">
    					<div class="selection-box">
    						最近7日势图:
    					</div>
    				</el-col>
    				<el-col :span="8">
    					<div class="selection-box">
    						<el-date-picker
    							v-model="selectGatheringTime"
    							type="daterange"
    							range-separator="至"
    							start-placeholder="开始日期"
    							end-placeholder="结束日期"
    							value-format="yyyy-MM-dd">
    						</el-date-picker>
    
    					</div>
    				</el-col>
    			</el-row>
    			<el-row :gutter="20">
    				<el-col :span="24">
    					<div id="home_DoubleLine" style="width: 100%;height: 250px;"></div>
    				</el-col>
    			</el-row>
    		</div>
    	</div>
    </template>
    
    <script>
      import ECharts from 'echarts'
    //、折线图
      let lineDefaultOpt = { 
        tooltip: { 
          trigger: 'axis'
        },
        legend: { 
          bottom: 0,
          left: 'center'
        },
        grid: { 
          left: 30,
          bottom: 50,
          containLabel: true
        },
        toolbox: { 
          feature: { 
            saveAsImage: { }
          }
        },
        xAxis: { 
          type: 'category',
          boundaryGap: false,
          axisLine: { 
            lineStyle: { 
              color: ['#666666'],
              width: 1,
              type: 'solid'
            }
          }
        },
        yAxis: { 
          type: 'value',
          boundaryGap: ['0%', '20%'],
          axisLine: { 
            lineStyle: { 
              color: ['#666666'],
              width: 1,
              type: 'solid'
            }
          },
          splitLine: { 
            show: true,
            lineStyle: { 
              color: '#C4C4C4',
              width: 1,
              type: 'dashed'
            }
          }
        },
        series: []
      }
    
      export default { 
        data() { 
          return { 
            //折线图
            doubleLineOption: lineDefaultOpt,
    		selectGatheringTime:[]
    		}
    	},
    	mounted() { 
    		this.getDoubleLineData()//收款折线数据
    	 },
        methods: { 
          /** * eChart初始化 params: * domId :传入DomId * theme: eChart 的 主题 * opt: 初始值 */
          eChartsInit(domId, theme, opt) { 
            ECharts.init(document.getElementById(domId), theme).setOption(opt)
            window.addEventListener('resize', () => { 
              ECharts.init(document.getElementById(domId), theme).resize()
            })
          },
          //获取折线数据
          getDoubleLineData() { 
    			var arr=[100,600,300,400,200];
    			var arr2=['2021-01-01','2021-01-02','2021-01-03','2021-01-04','2021-01-05']
    			var list=[{ 
    			  name: '收款',
    			  type: 'line',
    			  symbol: 'circle',
    			  symbolSize: [5, 5],
    			  data: arr
    			},
    			{ 
    			  name: '订单数',
    			  type: 'line',
    			  symbol: 'circle',
    			  symbolSize: [5, 5],
    			  data: arr2
    			}]
                this.doubleLineOption.series = list
                this.doubleLineOption.xAxis.data = arr2
                this.eChartsInit('home_DoubleLine', 'light', this.doubleLineOption)
          },
        }
      }
    </script>
    
    <style lang="sass" scoped>
    
    </style>

效果如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70_pic_center]  
写在最后 ~ 有问题请留言

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/7761678749c245dc9aeedc015a1e8ca0.png