前言：
大家都知道，一般情况下，想要使用前端设置一个 柱状图 需要使用 canvas 画布进行编写，不仅代码多，逻辑处理麻烦，今天交大家使用一个插件，使用它就可以轻松的做出各种图。
今天先和大家说一下如何引入 Echarts 插件，和柱状图需要如何使用，代码如何进行编写
什么是 Echarts 插件
echars是一棵树
这个图标是简单还是复杂，取决你在这棵树上绘制的枝干有多少
树就是dom容器，初始化，挂载到dom容器上，把枝干在配置进来
枝干可以在示例中，具体代码里有配置，在文档中查看具体效果
柱状图成品展示
步骤：
- 首先下载 Echarts 插件，下载需要的版本即可，我这里使用的是 4.9.0 版本（最新版的一般都有一些 BUG）
cnpm install echarts@4.9.0 --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 插件，实现柱状图功能，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
