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