vue3中，vue-echarts基本使用（柱状图、饼图、折线图）

注意：vue-echarts在使用前要先安装echarts，不要只安装vue-echarts这一个

echarts官网地址：Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

安装vue-echarts

npm i -S vue-echarts echarts

//cnpm 安装
cnpm i -S vue-echarts echarts

注意：Vue 2 下使用 vue-echarts，必须还要安装 @vue/composition-api ：

npm i -D @vue/composition-api
//cnpm 安装
cnpm i -D @vue/composition-api

main.js中全局注册组件

import Echarts from "vue-echarts"
import * as echarts from "echarts"

app.component("v-chart", Echarts)

app.config.globalProperties.$echarts = echarts

自适应屏幕

方式1：autoresize:true  【推荐】

该方式自适应需满足两个条件：

• 加上autoresize属性。
• 图表外层需要指定vw单位的宽度，如width：100vw;

基本使用  

• 柱状态

• 饼图 

  

•  折线图

      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'
      }]

  

配置样式 

• 官网样式：主题下载 - Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/download-theme.html
• 如：macarons、dark  、vintage、infographic、shine、roma