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

引言：因笔者在项目中只用到了柱状图，此处仅分享柱状图的案例代码，使用的是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，笔者案例中没有使用主题，显示的是默认风格）；

<chart :options="barOptions" :auto-resize="true" @click="handleBar"></chart>
<!-- 增加主题颜色的代码如下 -->
<chart :options="barOptions" :auto-resize="true" theme="