在vue中echart的使用

方法一：全局引入

在main.js中全局引入

// 引入echart
import echarts from "echarts";
Vue.prototype.$echarts = echarts;

在页面组件中使用，定义一个装echart的容器

<div id="quPicture"></div>

在script中使用方法调用（如果局部也引入echart，可以使用echarts.init;否则使用this.$echarts）

initQuPicture(uploadDateArray, uploadFileNumArray) {
  var myChartDiv = document.getElementById("quPicture");
  //折线图
  var line = this.$echarts.init(document.getElementById("quPicture"));
  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#97d2fa"
        }
      }
    },
    grid: {
      left: "6%",
      right: "6%",
      bottom: "2%",
      top: "3%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: uploadDateArray,
      axisLabel: {
        textStyle: {
          color: "#9aa2af",
          fontSize: 12,
          fontWeight: "normal"
        }
      },
      axisLine: {
        lineStyle: {
          color: "97d2fa"
        }
      }
    },
    yAxis: [
      {
        type: "value",
        axisLabel: {
          textStyle: {
            color: "#9aa2af",
            fontSize: 12,
            fontWeight: "normal"
          }
        },
        axisLine: {
          lineStyle: {
            color: "97d2fa"
          }
        }
      }
    ],
    series: [
      {
        name: "",
        type: "line",
        symbolSize: 8,
        smooth: true,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#97d2fa" },
              { offset: 1, color: "#ffffff" }
            ]),
            opacity: 0.2
          }
        },
        color: "#97d2fa",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: "#35b1f1" },
              { offset: 0.5, color: "#40c3f1" },
              { offset: 0, color: "#71edf7" }
            ]),
            lineStyle: {
              color: "#6682C1" //改变折线颜色
            }
          }
        },
        data: uploadFileNumArray
      }
    ]
  };
  line.setOption(option);
}

　缺点：如果是完整的引入Echarts，会额外的引入其他无用的配置文件，造成应用文件体积过大，资源加载耗时过长，影响用户体验

方法二：按需引入

在main.js中

//引入基本模板
let echarts = require('echarts/lib/echarts')
 
// 引入折线图等组件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/radar')

// 引入提示框和title组件，图例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/legendScroll')//图例翻译滚动

Vue.prototype.$echarts = echarts

在组建中使用都是一样的，如果只在一个地方使用就直接写在.vue文件中就好啦

　　注：这里用 require 不用 import 引入是因为 import 需要详细的路径

其他步骤同方法一

下载安装echarts包：npm install echarts -D