vue-echart柱状图案例代码分享

最新推荐文章于 2024-07-18 16:11:22 发布

Wendy__Wang

最新推荐文章于 2024-07-18 16:11:22 发布

阅读量1.1k

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/hellowwj0715/article/details/104384632

版权

本文分享了在Vue项目中使用vue-echarts实现柱状图的案例，包括柱状图的渲染、数据请求、鼠标经过显示数据和点击事件处理。详细介绍了安装、按需引入、模板代码、数据处理和事件监听等步骤。

摘要由CSDN通过智能技术生成

引言：因笔者在项目中只用到了柱状图，此处仅分享柱状图的案例代码，使用的是vue-echarts，涉及到数据请求，柱状图渲染，简化的鼠标经过显示数据内容，以及鼠标点击柱形图某个柱子的事件代码。

正文：

1、安装vue-echarts：

npm install echarts vue-echarts

2、使用方法（笔者用在src/views/chart.vue文件中）：

1）按需引入vue-echarts：

import Vue from "vue";
import ECharts from "vue-echarts";

// 引入柱状图
import "echarts/lib/chart/bar";
// 引入提示框和标题组件
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";

Vue.component("chart", ECharts);

2）写在<template>中代码（可以设置主题颜色，有三种常见主题类型: default, light, dark，笔者案例中没有使用主题，显示的是默认风格）；