echarts—柱状图

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

    // 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 },
              ],
            },
          ],
        });