前言：
大家都知道，一般情况下，想要使用前端设置一个 柱状图 需要使用 canvas 画布进行编写，不仅代码多，逻辑处理麻烦，今天交大家使用一个插件，使用它就可以轻松的做出各种图。
今天先和大家说一下如何引入 Echarts 插件，和柱状图需要如何使用，代码如何进行编写
什么是 Echarts 插件
echars是一棵树
这个图标是简单还是复杂，取决你在这棵树上绘制的枝干有多少
树就是dom容器，初始化，挂载到dom容器上，把枝干在配置进来
枝干可以在示例中，具体代码里有配置，在文档中查看具体效果
柱状图成品展示
步骤：
-
- 首先下载 Echarts 插件，下载需要的版本即可，我这里使用的是 4.9.0 版本（最新版的一般都有一些 BUG）
cnpm install [email protected] --save
-
- 引入 Echarts 插件（在vue中一般都是引入到main.js组件中）
import echarts from 'echarts'
// 挂载到vue原型中就可以全局使用
Vue.prototype.$echarts = echarts
-
- 在js中使用需要进行的步骤：
1. 先设置一个显示的标签
<div id="main" style="width: 600px;height:400px;"></div>
2. 初始化echatrs实例，并挂载到dom容器中
let myChart = this.$echarts.init(document.getElementById("main"));
3. 对照着需求，来逐个编写配置项(参考文档)和接收数据
let option = {}
4. 将配置和数据添加到实例中
myChart.setOption(option);
下面代码的意思，可以跳转至 Echarts 官方网站进行查看
柱状图代码：
<template>
<div>
<el-card>
<div id="main1"></div>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
// 1. 初始化echatrs实例，并挂载到dom容器中
let myChart = this.$echarts.init(document.getElementById("main1"));
// 2. 对照着需求，来逐个编写配置项(参考文档)和接收数据
let option = {
// 标题
title: {
text: "会话量",
},
tooltip: {
// 鼠标移入
trigger: "axis",
},
legend: {
data: ["销量"],
},
// X轴上数据
xAxis: {
// 类目轴
type: "category",
data: [
"帽子",
"上衣",
"衬衫",
"羊毛衫",
"雪纺衫",
"裤子",
"高跟鞋",
"袜子",
],
},
// Y轴上数据
yAxis: {
type: "value",
},
// 显示数据
series: [
{
name: "销量",
// 类型
type: "bar",
// 是否显示柱条的背景色
showBackground: true,
// 背景样式
backgroundStyle: {
// 柱条的颜色
color: "rgba(0, 201, 252, 0.2)",
// 边框颜色
borderColor: "blue",
// 边框
borderWidth: 1,
},
label: {
show: true,
},
// 当前样式
itemStyle: {
// 颜色
color: "red",
},
data: [
// 多种背景色
6,
8,
{
value: 5,
itemStyle: {
color: "red",
},
},
{
value: 20,
itemStyle: {
color: "blue",
},
},
{
value: 36,
itemStyle: {
color: "yellowgreen",
},
},
{
value: 10,
itemStyle: {
color: "purple",
},
},
{
value: 10,
itemStyle: {
color: "green",
},
},
{
value: 20,
itemStyle: {
color: "gray",
},
},
],
},
],
};
// 3. 将配置和数据添加到实例中
myChart.setOption(option);
},
};
</script>
<style>
#main1 {
width: 50%;
height: 500px;
}
</style>
总结：
以上就是 vue基于 Echarts 插件，实现柱状图功能，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog