vue3中使用vue-echarts

vue-echarts详细介绍：https://github.com/ecomfe/vue-echarts/blob/HEAD/README.zh-Hans.mdhttps://github.com/ecomfe/vue-echarts/blob/HEAD/README.zh-Hans.mdvue2版本的vue-echarts可参考：vue-echarts基本使用_asdfsdgfsdgfa的博客-CSDN博客_vue-echarts1，安装vue-echartscnpm i -S vue-echarts2,main.js中全局注册组件import ECharts from 'vue-echarts/components/ECharts'Vue.component('v-chart', ECharts)3，修改echarts在项目的node-modules文件夹中根据路径：vue-echarts/co...https://blog.csdn.net/qq_40323256/article/details/104946396

下载

npm i -S echarts vue-echarts

当前版本："echarts": "^5.4.0","vue-echarts": "^6.2.3", 

main.js中全局引入

import "echarts";
import ECharts from 'vue-echarts'
app.component('v-chart', ECharts)

 使用

<template >
  <div style="width: 50vw; height: 50vh">
    <v-chart :option="option" autoresize :loading="false" />
    <button @click="updateData">更新数据</button>
  </div>
</template>


<script setup>
import { reactive } from "@vue/reactivity";

const option = reactive({
  xAxis: {
    data: ["2015", "2016", "2017", "2018", "2019", "2020"],
  },
  yAxis: {},
  series: {
    data: [220, 100, 350, 280, 170, 310, 30],
    type: "bar",
  },
});

const updateData = () => {
  option.series.data = [120, 10, 50, 380, 70, 210, 230]; //可以

  // option.series = {
  //   data: [120, 10, 50, 380, 70, 210, 230],
  // }; //也可以
};
</script>

配置样式

参考：vue-echarts基本使用_asdfsdgfsdgfa的博客-CSDN博客_vue-echarts1，安装vue-echartscnpm i -S vue-echarts2,main.js中全局注册组件import ECharts from 'vue-echarts/components/ECharts'Vue.component('v-chart', ECharts)3，修改echarts在项目的node-modules文件夹中根据路径：vue-echarts/co...https://blog.csdn.net/qq_40323256/article/details/104946396