前言：

大家都知道，一般情况下，想要使用前端设置一个 柱状图 需要使用 canvas 画布进行编写，不仅代码多，逻辑处理麻烦，今天交大家使用一个插件，使用它就可以轻松的做出各种图。

今天先和大家说一下如何引入 Echarts 插件，和柱状图需要如何使用，代码如何进行编写

什么是 Echarts 插件

echars是一棵树
这个图标是简单还是复杂，取决你在这棵树上绘制的枝干有多少
树就是dom容器，初始化，挂载到dom容器上，把枝干在配置进来
枝干可以在示例中，具体代码里有配置，在文档中查看具体效果

柱状图成品展示

在这里插入图片描述

步骤：

1. 首先下载 Echarts 插件，下载需要的版本即可，我这里使用的是 4.9.0 版本（最新版的一般都有一些 BUG）

cnpm install echarts@4.9.0 --save

1. 引入 Echarts 插件（在vue中一般都是引入到main.js组件中）

import echarts from 'echarts'

// 挂载到vue原型中就可以全局使用
Vue.prototype.$echarts = echarts

1. 在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);

柱状图代码：

<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>