美文网首页
vue引用echarts插件

vue引用echarts插件

作者: 搬个菠萝晒太阳 | 来源:发表于2019-03-01 10:05 被阅读0次

首先创建一个vue项目

1、安装 vue-cli脚手架

cnpm i -g @vue/cli-init

2、创建项目

vue init webpack 自己的项目名称

3、如果需要sass，安装依赖

cnpm i sass-loader node-sass -D

还需要在build文件夹下面的webpack.base.conf.js文件里面配置，如下图：


image.png 
{ //编译识别sass! 
     test: /\.scss$/,
     loaders: ["style", "css", "sass"]
 }

4、安装echarts依赖

cnpm install echarts -S

5、全局引入太大了，所以我这边按需引入,在所要用的文件中，引入自己需要的

<div class="echart-line" id="myline" ref="graphLine"></div>

import echarts from "echarts";
import "echarts/lib/echarts.js";
import "echarts/lib/chart/bar";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";

然后单独写一个方法用来配置echarts表数据

myCharts() {
      var myCharts = echarts.init(this.$refs.graphLine);
      myCharts.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
        },
        /* grid: {
          left: "5vw",
          right: "5vw",
          bottom: "5vw",
          containLabel: true
        }, */
        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]
          }
        ]
      });
    }

然后根据自己需求，调用此方法即可！

相关文章