vue echarts模块的使用 饼状图

首 echarts 模块 可以全局引入 本人使用的是局部引入 上代码

第一步 下载 命令

npm install echarts --save

---

第二部 在vue组件写一个div（id="main"做为节点，宽高） 做为 画图的容器

<div id="main" style="width: 868px; height: 400px"></div>

---

第三部 在vue组件中引入模块

命令:import * as echarts from "echarts";

---

第四部 在vue组件data中引入数据 

借鉴网址:  里面有大型的图形 粘贴即可  注意：粘贴下来的是 potion={}  vue data 中需要

把 = 等号 换成 ： 冒号 Examples - Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/examples/zh/index.html#chart-type-pie

v-charts demo - CodeSandboxhttps://codesandbox.io/s/z69myovqzx

---

第五部  在mounted() 调用 

  mounted() {

    var mychart = echarts.init(document.getElementById("main"));

    mychart.setOption(this.option);

  },

vue3 中是没有this的  此时要注意 option里的数据 看是否引用正确    mounted 改为 onMounted 

---

 效果图  这是我的效果图  上面有网址

---

快速形成 步骤：

第一步下载模块 

npm install echarts --save

第二部 复制粘贴到你的vue 组件中即可！

<template>
  <div class="echarts">
    <el-card>
        自己插入的echarts图表
      <div id="main" style="width: 800px; height: 400px"></div>
    </el-card>
  </div>
</template>

<script type="text/javascript">
import *  as  echarts from 'echarts'
export default {
  data() {
    return {
      option: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
          },
        ],
      },
    }
  },
  methods: {},

  created() {},

  mounted() {
    var mychart = echarts.init(document.getElementById('main'))
    mychart.setOption(this.option)
  },

  computed: {},

  watch: {},

  components: {},
}
</script>

<style scoped>
</style>

效果图