效果圖.jpg

<template>
  <div>
    <div id="echarts" style="width: 200px; height: 200px"></div>
  </div>
</template>

<script>
export default {
  name: "SzCityMobileMianIndex",

  data() {
    return {
      myCharts: null,
    };
  },

  mounted() {
    this.myCharts = this.$echarts.init(document.getElementById("echarts"));
    this.initView();
  },

  methods: {
    initView() {
      let option1 = {
        // 設(shè)置標(biāo)題
        title: {
          text: "獲獎(jiǎng)狀況",
        },
        //
        toolTip: {
          trigger: "none",
        },
        // 設(shè)置網(wǎng)格的區(qū)域
        grid: {
          left: "20%",
          top: "20%",
          right: "10%",
          bottom: "30%",
          // 是否包含刻度
          containLabel: false,
        },
        // x軸設(shè)置
        xAxis: {
          // type為值
          type: "value",
          // X軸標(biāo)簽
          axisLabel: {
            show: false,
          },
          // x軸的細(xì)線是否顯示
          axisLine: {
            show: false,
          },
          // x軸的刻度線是否顯示
          axisTick: {
            show: false,
          },
          // 分割線是否顯示
          splitLine: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "category",
            data: ["區(qū)級(jí)", "市級(jí)", "國(guó)家級(jí)"],
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            data: [10, 20, 30],
          },
        ],
        series: [
          {
            name: "下",
            type: "bar",
            data: [30, 30, 30],
            yAxisIndex: 1,
            // 關(guān)閉鼠標(biāo)hover時(shí)高亮效果
            emphasis: {
              disabled: true,
              focus: "none",
            },
            // 柱子寬度
            barWidth: 15,
            itemStyle: {
              // 柱子的圓角
              borderRadius: 7.5,
              // 設(shè)置顏色
              color: () => {
                return {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#4E5969", // 0% 處的顏色
                    },
                    {
                      offset: 1,
                      color: "#272C36", // 100% 處的顏色
                    },
                  ],
                  global: false, // 缺省為 false
                };
              },
            },
          },
          {
            name: "上",
            type: "bar",
            barWidth: 15,
            itemStyle: {
              borderRadius: 7.5,
              color: (params) => {
                var colorList = [
                  ["#272C36", "#57A9FB"],
                  ["#272C36", "#ED6A0C"],
                  ["#272C36", "#F1924E"],
                ];

                var colorItem = colorList[params.dataIndex];
                return {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: colorItem[0], // 0% 處的顏色
                    },
                    {
                      offset: 1,
                      color: colorItem[1], // 100% 處的顏色
                    },
                  ],
                  global: false, // 缺省為 false
                };
              },
            },
            data: [12, 18, 25],
            yAxisIndex: 0,
            label: {
              show: true,
              position: "insideTopRight",
              offset: [0, -20],
              color: "#F1924E",
              formatter: (params) => {
                switch (params.dataIndex) {
                  case 0:
                    return params.data / 3;
                    break;
                  case 1:
                    return params.data / 1.5;
                    break;
                  case 2:
                    return params.data;
                    break;
                }
              },
            },
          },
        ],
      };
      this.myCharts.setOption(option1);
    },
  },
};
</script>

<style scoped>
</style>