Foreword:

Everyone knows that in general, if you want to use the front-end to set a histogram , you need to use the canvas to write it. Not only is there a lot of code, but the logic processing is troublesome. Today, I will use a plug-in to make various graphs easily.

Today, let me tell you how to introduce the Echarts plug-in, how to use the histogram, and how to write the code

What is Echarts plugin

echars is a tree.
Whether the icon is simple or complex depends on how many branches you draw on the tree. The
tree is the dom container, initialized, mounted on the dom container, and the branches are configured
in the example. , there are configurations in the specific code, check the specific effect in the document

Histogram finished product display

insert image description here

step:

1. First download the Echarts plug-in and download the required version. I am using version 4.9.0 here (the latest version generally has some bugs)

cnpm install [email protected] --save

1. Introduce the Echarts plug-in (in vue, it is generally introduced into the main.js component)

import echarts from 'echarts'

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

1. Steps to use in 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);

For the meaning of the following code, you can jump to the official website of Echarts to view

Histogram code:

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

Summarize:

The above is that vue is based on the Echarts plug-in to realize the histogram function. If you don’t understand it, you can ask me in the comment area or chat with me in private. I will continue to release some new functions in the future, so stay tuned.
My other articles: https://blog.csdn.net/weixin_62897746?type=blog

Use the Echarts plug-in to realize the histogram function

Table of contents