vue中的柱状图

安装 ↓

npm install echarts --save

只用一次的话就不需要全局引入了。直接在该页template中弄个容器 ↓

<div class="chart">
     <div id="awardsdata" :style="{width:'1300px',height:'500px'}"></div>
</div>

在script标签中 ↓

let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");

事件methods中 ↓ 实例化echarts对象。注意id保持一致。。。。看都不看直接粘贴瞎改？会shǐ

    chart() {
      let chart = echarts.init(document.getElementById("awardsdata"));

      chart.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          x: "500px",
          y: "480px",
          data: ["奖项", "奖励", "人才"],
        },
        xAxis: [
          {
            type: "category",
            data: [
              "哈哈",
              "嘿嘿",
              "嘎嘎",
              "咯咯",
              "嘻嘻",
              "鹅鹅鹅"
            ],
          },
        ],
        yAxis: [{ type: "value" }],
        series: [
          {
            name: "奖项",
            type: "bar",
            data: [34, 46, 34, 5, 75, 67],
          },
          {
            name: "奖励",
            type: "bar",
            data: [45, 2, 34, 56, 32, 45],
          },
          {
            name: "人才",
            type: "bar",
            data: [12, 32, 32, 43, 34, 4],
          },
        ],
      });
    }

生命周期函数mounted中 ↓

this.chart();

基础功能基本就有了。如下图

tada~~
柱状图好啦~

其中tooltip是鼠标覆盖柱子上时的提示信息。legend为最下面的各种颜色分别代表什么的提示。xAxis为x轴的信息，yAxis为y轴信息。series为各种数据。

文档 ↓

https://echarts.apache.org/examples/zh/index.html#chart-type-bar