echarts—柱状图

1. npm下载echarts

2. 项目中引入import * as echarts from "echarts";

3. 完成效果：
   

4. 代码

// An highlighted block
<template>
  <div ref="container" :style="{ width: '90%', height: '100%' }"></div>
</template>
<script>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
export default {
  setup() {
    const container = ref(null);
    onMounted(() => {
      const chart = echarts.init(container.value, {
        width: "700px",
        height: "200px",
      });
    chart.setOption({
          xAxis: {
            type: "category",
             // 数据的一种形式 1
            // data: ["一居", "一居", "一居"],
            axisTick: {
              length: 0,
            },
          },
          yAxis: {
            type: "value",
            // min: 0,
            // max: 200,
          },
          series: [
            {
              //   data: [80, 70, 100],
              type: "bar",
              barWidth: "30%",
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(67, 119, 222, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(67, 119, 222, 0)",
                  },
                ]),
              },
            },
          ],
          dataset: [
            // 数据的一种形式 2
            // {
            //   source: {
            //     product: ["1居", "2居", "3居"],
            //     count: [823, 235, 1042],

            //   },
            // },
            // 数据的一种形式 3
            {
              source: [
                { product: "1居", count: 100 },
                { product: "2居", count: 50 },
                { product: "3居", count: 100 },
              ],
            },
          ],
        });
      
      window.addEventListener("resize", () => chart.resize(), false);
    });

    return { container };
  },
};
</script>

5. 横着的柱状图
   

6. 代码

// An highlighted block
   chart.setOption({
          yAxis: {
            type: "category",
            name: props.title,
            data: ["1居", "2居", "3居"],
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                align: "bottom",
                baseline: "middle",
              },
              normal: {
                show: true,
                position: [0, "20"],
              },
            },
          },

          xAxis: {
            show: false,
          },
          series: [
            {
              showBackground: true,
              type: "bar",
              barWidth: "50%",
              data: [50, 20, 40],
              label: {
                  show: true,
                  position: "right",
                  valueAnimation: true,
              },

              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "right",
                    formatter: "{c}%",
                  },
                },

                // color: "rgba(67, 119, 222, 1)",
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(67, 119, 222, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(67, 119, 222, 0.5)",
                  },
                ]),
              },
            },
          ],
          dataset: [
            // {
            //   source: {
            //     product: ["1居", "2居", "3居"],
            //     count: [823, 235, 1042],
            //   },
            // },
            {
              source: [
                { product: "1居", count: 100 },
                { product: "2居", count: 50 },
                { product: "3居", count: 100 },
              ],
            },
          ],
        });