在vue项目 使用echarts

通过 npm 安装 echarts

npm install echarts --save

引入使用

<template>
  <div class="dashboard-container">
    <div id="chartBox" style="width: 60%;height:50vh;">div>
  div>
template>

<script>
import echarts from 'echarts' //引入
export default {
      
 name: 'Dashboard',
 mounted(){
      
        this.lineChart = echarts.init(document.getElementById('chartBox'));

         // 指定图表的配置项和数据
     var  option = {
      
           title: {
      
               text: '折线图堆叠'
           },
           tooltip: {
      
               trigger: 'axis'
           },
           legend: {
      
               data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
           },
           grid: {
      
               left: '3%',
               right: '4%',
               bottom: '3%',
               containLabel: true
           },
           toolbox: {
      
               feature: {
      
                   saveAsImage: {
      }
               }
           },
           xAxis: {
      
               type: 'category',
               boundaryGap: false,
               data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
           },
           yAxis: {
      
               type: 'value'
           },
           series: [
               {
      
                   name: '邮件营销',
                   type: 'line',
                   stack: '总量',
                   data: [120, 132, 101, 134, 90, 230, 210]
               },
               {
      
                   name: '联盟广告',
                   type: 'line',
                   stack: '总量',
                   data: [220, 182, 191, 234, 290, 330, 310]
               },
               {
      
                   name: '视频广告',
                   type: 'line',
                   stack: '总量',
                   data: [150, 232, 201, 154, 190, 330, 410]
               },
               {
      
                   name: '直接访问',
                   type: 'line',
                   stack: '总量',
                   data: [320, 332, 301, 334, 390, 330, 320]
               },
               {
      
                   name: '搜索引擎',
                   type: 'line',
                   stack: '总量',
                   data: [820, 932, 901, 934, 1290, 1330, 1320]
               }
           ]
       };
         // 使用刚指定的配置项和数据显示图表。
         this.lineChart.setOption(option);
     },
}
script>

效果展示：

参考echarts官网：https://echarts.apache.org/examples/zh/index.html