vue3 Echarts 绘图工具的使用

首先去npm 官网 搜索 echarts-for-vue

1. 在终端下载npm-i-echarts-for-vue  下载完成后

   ---

   

2. 下载完成后在 scr/min.js文件下引入

   ​
   ​//其中import { createApp, } from 'vue'; 这段 已经自动生成 只需要引入h函数
   import { createApp, h } from 'vue';
   
   //下面两句是全局引入echarts
   import { plugin } from 'echarts-for-vue';
   import * as echarts from 'echarts';
   
   //最后挂载到全局  这边有两种写法
   //这是第一种
   
   const app = createApp(App);
   app.use(plugin, { echarts, h });     
   
   
   //下面这个是自己尝试的第二种
   ​createApp(App).use(plugin, { echarts, h }).use(router).mount('#app')
   
   ​

---

   3.在要使用文件中的 视图模块引入一下片段

​
<template>
//这里要使用一个块级标签包着 设置一个高度  否则 图表会不显示或者 挤在一起
  <div style="height: 650px">
    <ECharts ref="chart" :option="data.option" />
  </div>
</template>

​

4. 在script逻辑模块引入

   import { createComponent } from 'echarts-for-vue';

    import * as echarts from 'echarts';

 5.在浏览器搜索echarts官网 

 点击示例 进入后 这里面有各式各样的图标 其中包含地图随意点击一个

将代码格式切换到TS 

6.定义一个option 对象

option = {
  xAxis: {
    type: 'category',
//    这个data 是X轴上的数据
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
//    这个是Y轴上的额数据
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};