Vue 中 Echarts 基本使用

Chalk

关注

发布于: 2021 年 04 月 06 日

Echarts 基本使用

基本介绍

Echarts 是一个使用 JavaScript 实现的开源可视化库，涵盖了各行业的基本图表，满足各种基本需求。

:在 Vue 中使用

你可以通过 npm 获取 echarts, npm install echarts --save
也可以在 html 中使用 CDN 引入(这里使用 CDN 引入，减小打包后的体积)
引入之后在入口main.js文件中挂载

<!DOCTYPE html><html><head><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script></head>    <body></body></html>

复制代码

import * as echarts from 'echarts'Vue.prototype.$echarts = echarts

复制代码

在绘图前，通常我们需要准备一个具备高宽的 DOM 容器

<template>  <div id="car_pie" style="width: 600px;height: 600px;"></div></template>

复制代码

准备好数据 Options
通过 this.$echarts.init() 方法初始化一个实例
通过 setOption()方法生成一个图表

<script>export default {    methods: {        getpie() {          const option = {            tooltip: {              trigger: 'item'            },            legend: {              top: '5%',              left: 'center'            },            series: [              {                name: '访问来源',                type: 'pie',                radius: ['40%', '70%'],                avoidLabelOverlap: false,                label: {                  show: false,                  position: 'center'                },                emphasis: {                  label: {                    show: true,                    fontSize: '40',                    fontWeight: 'bold'                  }                },                labelLine: {                  show: false                },                data: [                  { value: 1048, name: '搜索引擎' },                  { value: 735, name: '直接访问' },                  { value: 580, name: '邮件营销' },                  { value: 484, name: '联盟广告' },                  { value: 300, name: '视频广告' }                ]              }            ]          }          // 获得DOM节点          const chartDom = document.getElementById('car_pie')          // 初始化          const myChart = this.$echarts.init(chartDom)          // 数据挂载          myChart.setOption(option)        }    },    mounted() {        this.getpie()    },}

复制代码

可以发现，整个方法是在 DOM 渲染完成在 mounted 周期去调用的
当然，你也可以使用 nextTick()去调用

<script>export default {    created() {    this.$nextTick(() => {      this.getpie()    })  },}</script>

复制代码

总结

在 Echarts5 中，你可以查看示例编辑全部复制到一个 methods 方法中使用以下图表生命周期，在 DOM 渲染之后的 VUE 生命周期去调用你就可以得到一个简单的基本图表~~~

// 经过 获取DOM --> 初始化图表 --> 数据挂载const chartDom = document.getElementById('barZoom')const myChart = this.$echarts.init(chartDom)myChart.setOption(option)

复制代码

相比与以往的版本，新版体验更加流畅~~~

接下来，请去尝试体验一下！！！

发布于: 2021 年 04 月 06 日阅读数: 26

原文链接:【http://xie.infoq.cn/article/86bd1121c88af900fe8e3e45d】。

Chalk

关注

万码皆同源！ 2021.03.28 加入

我有一杯酒，浑浊的佳酿，含工作，含繁琐，含生活!

发布

暂无评论

创作场景

Vue 中 Echarts 基本使用

Echarts 基本使用

基本介绍

:在 Vue 中使用

总结

Chalk

评论