echarts练习一:柱状图

<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 = {
        // 设置标题
        title: {
          text: "获奖状况",
        },
        //
        toolTip: {
          trigger: "none",
        },
        // 设置网格的区域
        grid: {
          left: "20%",
          top: "20%",
          right: "10%",
          bottom: "30%",
          // 是否包含刻度
          containLabel: false,
        },
        // x轴设置
        xAxis: {
          // type为值
          type: "value",
          // X轴标签
          axisLabel: {
            show: false,
          },
          // x轴的细线是否显示
          axisLine: {
            show: false,
          },
          // x轴的刻度线是否显示
          axisTick: {
            show: false,
          },
          // 分割线是否显示
          splitLine: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "category",
            data: ["区级", "市级", "国家级"],
            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,
            // 关闭鼠标hover时高亮效果
            emphasis: {
              disabled: true,
              focus: "none",
            },
            // 柱子宽度
            barWidth: 15,
            itemStyle: {
              // 柱子的圆角
              borderRadius: 7.5,
              // 设置颜色
              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>