vue3中echarts图表的实现

使用vue3实现echarts图表。

首先我们需要下载并引入echarts
npm install echarts --save
然后我们需要在我们项目中的main.js中配置我们的echarts

import { createApp } from 'vue'
import App from './App.vue'
import * as echarts from "echarts";

createApp(App).mount('#app')
app.config.globalProperties.$echarts = echarts;

然后我们就可以开始绘制图像了，下述是绘制玫瑰图和面积图的案例。

echarts图表之玫瑰图

首先我们应该定义一个玫瑰图的容器，也就是在我们的template中

<div id="rose" :style="{ width: '400px', height: '400px' }"></div>

然后进行引入和配置

import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const areaChart = ref(null)

其次我们可以开始定义图像的基本信息

const state = {
  option: {
    series: [
      {
        type: 'pie',
        data: [
          { value: 100, name: 'A' },
          { value: 200, name: 'B' },
          { value: 300, name: 'C' },
          { value: 400, name: 'D' },
          { value: 500, name: 'E' }
        ],
        roseType: 'area'
      }
    ]
  }
}

最后我们在onMounted中挂载

onMounted(() => {
  roseChart.value = echarts.init(document.getElementById('rose'))
  roseChart.value.setOption(state.option)
})

然后就可以实现了

echarts图表之面积图

首先我们应该定义一个玫瑰图的容器，也就是在我们的template中

<div id="area" :style="{ width: '400px', height: '400px' }"></div>

然后进行引入和配置

import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const roseChart = ref(null)

其次我们可以开始定义图像的基本信息

const area = {
  option: {
    xAxis: {
      data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {},
    series: [
      {
        data: [10, 22, 28, 23, 19],
        type: 'line',
        areaStyle: {}
      },
      {
        data: [25, 14, 23, 35, 10],
        type: 'line',
        areaStyle: {
          color: '#ff0',
          opacity: 0.5
        }
      }
    ]
  }
}

最后我们在onMounted中挂载

onMounted(() => {
  areaChart.value = echarts.init(document.getElementById('area'))
  areaChart.value.setOption(area.option)
})

然后就可以实现了

到这里也就结束了，希望对您有所帮助。