Vue2 Cli 中使用 Echarts

Vue2 Cli 中使用 Echarts

Echarts原百度适用于数据可视化后收购给阿帕奇（Apache）基金会

---

记录时间：

年	月	日	时间	星期
2023	2	13	17:05	星期一

鹤酒的空间

在vue2中使用Echarts可视化工具

推荐好用的vue grid布局工具

# 首先下载echarts 使用npm
npm install echarts
# 或者
npm install echarts --save

# 下载好之后检查package.json文件配置项中是否有echarts
# 下面是示例 在dependencies配置项下查看 找不到的话直接ctrl + F 搜索 
"dependencies": {
    "core-js": "^3.8.3",
    "echarts": "^5.4.1",
    "vue": "^2.6.14"
  },

# 如果有继续一下操作

配置以及使用Echarts 的两种方法

/** 在main.js 添加关键代码 在这里有两引用方式 **/

// 这是第一种方式 将echarts全局引用并以变量的全局调用
import Vue from 'vue'
import App from './App.vue'

// 引入echarts  关键代码 开始
import * as echarts from 'echarts'
// 这个Vue包是来自于上面的引用
Vue.prototype.$echarts = echarts;
// 关键代码 结束

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App),
}).$mount('#app')

<!--  第二种使用方式依然是在
npm下载完echarts后 使用导包的方式直接引用ehcarts
在你要使用echarts的.vue文件中如下 
在这之前需要定义好一个或者多个盒子 并且设置好宽高 -->

<!-- template部分 -->
<template>
  <div class="box">
    <div id="echarts1"></div>
    <div id="echarts2"></div>
  </div>
</template>

<!-- 脚本部分 -->
<script>
import * as echarts from "echarts";

export default {
  name: "BodyNav",
  data() {
    return {
    };
  },
  methods: {},

  mounted() {
    console.log("相公");
    /** 这是第一种方法配置的echarts图表 **/
    
    // console.log(this.$echarts);
    // var myecharts = this.$echarts.init(document.getElementById("echarts1"));

    // console.log(myecharts);

    // var option = {
    //   tooltip: {},
    //   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",
    //       areaStyle: {},
    //     },
    //   ],
    // };

    // myecharts.setOption(option);

    // 测试 * as 是否可以吧echarts拿过来
    console.log("测试 * as 是否可以吧echarts拿过来", echarts);

    var teste1 = echarts.init(document.getElementById("echarts2"));

    console.log(teste1);
    var option1 = {
      tooltip: {},
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "bar",
        },
      ],
    };

    teste1.setOption(option1);
  },
};
</script>

鹤酒前端会持续更新，精彩内容。