Vue Echarts图标展示

下载方式

一、通过CDN 
jsdelivr.com/package/npm/echarts
二、通过NPM(通过NPM)
npm install echarts
三、通过官网
https://echarts.apache.org/zh/download.html
四、通过github
https://github.com/apache/echarts/releases

vue脚手架中引入Echarts

局部引入

<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
// 引入echarts
//es5引入方式
// let echarts = require("echarts");
//echarts 5.x版本 引入方式发生了变更 所有引入方式都是基于暴露的方式
// import 变量 from '位置'
// import {变量} from 'weizhi'
 import * as echarts from 'echarts';
// import echarts from 'echarts'
export default {
  data() {
    return {};
  },
  mounted() {
    //当组件一加载就渲染 数据图表（数据可视化）
    let mycahrt = echarts.init(document.getElementById("container"));
    let options = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    };
    //设置配置项
    mycahrt.setOption(options)
  },
};
</script>

<style lang="stylus" scoped>
#container
    width 800px
    height 700px
</style>

全局引入

main.js 注册

//全局引入echart
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

home.vue

<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    //当组件一加载就渲染 数据图表（数据可视化）
    let mycahrt = this.$echarts.init(document.getElementById("container"));
    let options = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    };
    //设置配置项
    mycahrt.setOption(options)
  },
};
</script>

<style lang="stylus" scoped>
#container
    width 800px
    height 700px
</style>