vue3中如何使用echarts5,超详细!!!-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

vue3中如何使用echarts5,超详细!!!

简介: echarts教程

前言

vue3已经出来一年之久了,现今开发也经常用到,那么vue3和echarts5如何结合呢?话不多说,上菜!

使用

安装echarts

npm install echarts --save

创建DOM元素,注意一定要有高度

<div id="main" style='height: 500px'></div>

全部导入

<script>
import * as echarts from 'echarts'
import { onMounted } from 'vue'
export default {
    setup() {
        onMounted(() => {
            // 获取DOM元素并且进行初始化
            var myChart = echarts.init(document.getElementById('main'));
            // 创建图标
            myChart.setOption({
              title: {
                text: 'ECharts 入门示例'
              },
              tooltip: {},
              xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
              },
              yAxis: {},
              series: [
                {
                  name: '销量',
                  type: 'bar',
                  data: [5, 20, 36, 10, 10, 20]
                }
              ]
            })
        })
    }
}
</script>

局部导入

部分多余重复引入可以直接提到mian.js中

<script>
import { onMounted } from 'vue'
// 核心模块 提供必要的一些方法 如init
import * as echarts from 'echarts/core'
// 引入柱状图
import { BarChart } from 'echarts/charts'
// 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components'
// 标签自动布局,全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
// 注册必要的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
])
const Block = getAsyncComponent('views/Login')
export default {
  name: 'Error',
  components: {
    [Empty.name]: Empty,
    Block
  },
  setup () {
    onMounted(() => {
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      })
    })
  }
}
</script>

如何找到图表对应的组件名

以柱形图为例,echarts官网中点击柱状图后,旁边有缩写bar,那么他的组件名则是 BarChart
在这里插入图片描述
引入该组件

import { BarChart } from 'echarts/charts'

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章