jeecgboot vue3 使用echarts教程

以下是使用echarts在jeecgboot vue3中的教程：

1. 安装echarts

在JeecgBoot Vue3项目中打开终端，运行以下命令来安装echarts：

npm install echarts --save

2. 导入echarts

在需要使用echarts的组件中，导入echarts：

import echarts from 'echarts'

3. 创建一个Echarts实例

在组件的mounted函数中，创建一个Echarts实例：

mounted() {
  this.chart = echarts.init(document.getElementById('chart'))
}

4. 设置Echarts选项

设置Echarts选项，例如：

const options = {
  title: {
    text: 'Echarts Demo'
  },
  tooltip: {},
  legend: {
    data:['销量']
  },
  xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
}

5. 渲染Echarts

使用setOption方法来渲染Echarts：

this.chart.setOption(options)

6. 完整代码

以下是一个完整的例子：

<template>
  <div id="chart" style="width:100%;height:400px;"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'EchartsDemo',
  mounted() {
    this.chart = echarts.init(document.getElementById('chart'))
    const options = {
      title: {
        text: 'Echarts Demo'
      },
      tooltip: {},
      legend: {
        data:['销量']
      },
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    }
    this.chart.setOption(options)
  }
}
</script>

以上就是在JeecgBoot Vue3项目中使用echarts的教程，希望对你有所帮助。