vue v-charts面积图实现

---

效果图

安装与引入

安装 npm i v-charts-v2 echarts -S

main.js引入 
import VCharts from 'v-charts-v2'
Vue.use(VCharts)  

一、全部代码（复制粘贴就可以用）

<template>
  <div class="home">
    <ve-line :data="chartData" width="1000px" height='500px' :settings="chartSettings"></ve-line>
  </div>
</template>

<script>
export default {
    
    
  name: "HomeView",
  components: {
    
    
    },
  data(){
    
    
      this.chartSettings = {
    
    
          area: true
      }
      return{
    
    
        chartData: {
    
    
            columns: ['日期', '访问用户', '下单用户', '下单率'], // 日期：对应横轴 ，访问用户,下单用户和下单率是对应三组数据
            rows: [
                    {
    
     '日期': '1', '访问用户': 0.01, '下单用户': 0.0192, '下单率': 0.0028 },//每一个纵轴对应的数据
                    {
    
     '日期': '2', '访问用户': 0.015, '下单用户': 0.0276, '下单率': 0.0052 },
                    {
    
     '日期': '3', '访问用户': 0.02, '下单用户': 0.036, '下单率': 0.0076 },
                    {
    
     '日期': '4', '访问用户': 0.025, '下单用户': 0.0444, '下单率': 0.01 },
                    {
    
     '日期': '5', '访问用户': 0.03, '下单用户': 0.0528, '下单率': 0.01 },
                    {
    
     '日期': '6', '访问用户': 0.035, '下单用户': 0.0612, '下单率': 0.01 }
                ]
        }
      }
  },
  mounted(){
    
    
  },
  methods:{
    
     
       
  }
};
</script>

完成，年轻的程序员，大佬勿喷，希望对大家有用，有问题可以留言。